Vue_(组件)实例方法

　　Vue.js实例方法/生命周期　　传送门

Vue_(组件)实例方法

　　常用的实例方法

　　数据：　　传送门

　　　　vm.$set：设置属性值

　　　　vm.$delete：删除属性值

　　　　vm.$watch：观测数据变化

　　生命周期

　　　　vm.$mount：手动挂载Vue实例

　　　　vm.$destroy：销毁Vue实例，清理数据绑定，移除事件监听

　　　　vm.$nextTick：将方法中的回调函数，延迟到DOM更新后　　传送门

　　Learn

　　　　一、vm.$set

　　　　二、vm.$delete

　　　　三、vm.$watch

　　　　四、实例方法-生命周期

　　项目结构

　　【每个demo下方都存有html源码】

一、vm.$set　　传送门

　　vm.$set：设置属性值　

　　给user添加一个username属性和两个实例方法，通过changeUsername()方法去修改username属性的值，通过addId()去添加用户的id，通过按钮点击事件分别触发这两个方法

<div>
            Id：<span>{{user.id}}</span><br />
            用户名：<span>{{user.username}}</span><br />
            <button @click="changeUsername">change</button><br />
            <button @click="addId">addId</button><br />
</div>

 　　　　data:{
                user:{
                    username:'Gary'
                }
            },
            methods:{
                changeUsername(){
                    this.user.username = 'Gary-2!!!';
                    console.log(this.user.username);
                },
                addId(){
                    this.user.id=1;
                    console.log(this.user.id);
                }
            }

　　可以看到user的id并没有被赋值1，而user的username属性已经是被改变

Vue_(组件)实例方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gary</title>
    <script type="text/javascript"  src="../js/vue.js"></script>
    
</head>
<body>
<div>
            Id：<span>{{user.id}}</span><br />
            用户名：<span>{{user.username}}</span><br />
            <button @click="changeUsername">change</button><br />
            <button @click="addId">addId</button><br />
</div>  
</body>

<script>
     let vm = new Vue({
        el:'div',
        data:{
                user:{
                    username:'Gary'
                }
            },
            methods:{
                changeUsername(){
                    this.user.username = 'Gary-2!!!';
                    console.log(this.user.username);
                },
                addId(){
                    this.user.id=1;
                    console.log(this.user.id);
                }
            }
        });
        
</script>



</html>

Gary_InstanceMethod.html