Vue基础进阶之实例方法

常用的实例方法：

数据：

vm.$set：设置属性值；

vm.$delete：删除属性值；

vm.$watch：观测数据变化；

生命周期：

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

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

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

vm.$set：设置属性值与vm.$delete：删除属性值；

示例：

Vue基础进阶之实例方法

想和上图一样可以添加一个id，如果有id就就行自增，如果没有就添加一个默认值，因此只能使用.$set的实例方法：

Vue基础进阶之实例方法

vue代码：

<script>

            let vm=    new Vue({

                    el:'div',

                    data:{

                        user:{

                            username:'perfect'

                        }

                    },

                    methods:{

                        changeUsername(){

                            this.user.username='perfect_1';

                        },

                        addId(){

//                            this.$set(this.user,'id',1);//局部进行添加Id

//                            Vue.set(this.user,'id',1);//全局设置

                         if(this.user.id){

                             this.user.id++;

                         }else{

                             Vue.set(this.user,'id',);

                         }

                         console.log(this.user.id);

                        }

                    }

            });

        </script>

其中，this.user表示对象，id表示key，1表示value

html:

<body>

        <div>

            Id:<span>{{user.id}}</span><br />

            用户名：<span>{{user.username}}</span><br />

            <button @click="changeUsername">changeUsername</button>

            <button @click="addId">添加ID</button>

    </div>

    </body>

同理，我们使用.$delete实例方法：如果有id的时候我们进行删除

Vue基础进阶之实例方法

使用.$delete实例方法的vue代码：

delId(){

                            if(this.user.id){

//                                this.$delete(this.user,'id');

                                Vue.delete(this.user,'id');//全局的

                                 console.log('已经删除ID');

                            }

HTML：

    <div>

            Id:<span>{{user.id}}</span><br />

            用户名：<span>{{user.username}}</span><br />

            <button @click="changeUsername">changeUsername</button>

            <button @click="addId">添加ID</button>

            <button @click="delId">删除ID</button>

    </div>

.$set与.$delete实例方法总的代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title> 06_常用的实例方法</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">changeUsername</button>

             <button @click="addId">添加ID</button>

             <button @click="delId">删除ID</button>

     </div>

     </body>

     <script>

             let vm=    new Vue({

                     el:'div',

                     data:{

                         user:{

                             username:'perfect'

                         }

                     },

                     methods:{

                         changeUsername(){

                             this.user.username='perfect_1';

                         },

                         addId(){

 //                            this.$set(this.user,'id',1);//局部进行添加Id

 //                            Vue.set(this.user,'id',1);//全局设置

                          if(this.user.id){

                              this.user.id++;

                          }else{

                              Vue.set(this.user,'id',);

                          }

                          console.log(this.user.id);

                         },

                         delId(){

                             if(this.user.id){

 //                                this.$delete(this.user,'id');

                                 Vue.delete(this.user,'id');//全局的

                                  console.log('已经删除ID');

                             }

                         }

                     }

             });

         </script>

 </html>

.$set与.$delete实例方法

vm.$watch：观测数据变化

Vue基础进阶之实例方法

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title> 07_常用的实例方法_watch</title>

        <script type="text/javascript" src="../js/vue.js" ></script>

    </head>

    <body>

        <div>

            <input type="text" v-model="msg" /><br />

            msg:<span> {{msg}}</span><br />

            <input type="text" v-model="num" /><br />

            num:<span> {{msg}}</span><br />

            <button onclick="unWatch()">unWatch</button>

    </div>

    </body>

    <script>

            let vm=    new Vue({

                    el:'div',

                    data:{

                        msg:'perfect',

                        num:

                    },

                    watch:{

                        num:function(newValue,oldValue){

                            console.log("修改了num old="+oldValue+"new="+newValue);

                        }

                    },

                    });

                    let unwatch=vm.$watch('msg',function(newValue,oldValue){//返回一个取消观察函数，用来停止触发回调：

                        console.log("修改了msg old="+oldValue+"new="+newValue);

                    });

                    function unWatch(){

                        unwatch();

                    }

        </script>

</html>

观测一个普通的属性，可以进行回调

实例方法watch深度观测

当观测一个对象时：需要一个深度观测deep这样才能进行回调

Vue基础进阶之实例方法

发现打印出来新值与旧值得结果都一样，说明没有获取到修改的username

加入的vue代码：

    user:{

                            handler:function(newValue,oldValue){

                            console.log("修改了username old="+oldValue.username+"new="+newValue.username);

                            console.log(oldValue==newValue);

                        },

                        deep:true

                    }

加入的HTML：

 <input type="text" v-model="user.username" /><br />

              username:<span> {{user.username}}</span><br />

当然.$watch也有这样的写法；

Vue基础进阶之实例方法

其代码为：

let unwatch=vm.$watch('user',{//返回一个取消观察函数，用来停止触发回调：

                        handler:function(newValue,oldValue){

                        console.log("修改了msg old="+oldValue+"new="+newValue);

                        },

                        deep:true

                    });

vm.$watch总的代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title> 07_常用的实例方法_watch</title>

         <script type="text/javascript" src="../js/vue.js" ></script>

     </head>

     <body>

         <div>

             <input type="text" v-model="msg" /><br />

             msg:<span> {{msg}}</span><br />

             <input type="text" v-model="num" /><br />

             num:<span> {{msg}}</span><br />

             <input type="text" v-model="user.username" /><br />

               username:<span> {{user.username}}</span><br />

             <button onclick="unWatch()">unWatch</button>

     </div>

     </body>

     <script>

             let vm=    new Vue({

                     el:'div',

                     data:{

                         msg:'perfect',

                         num:,

                         user:{

                             id:'',

                             username:'perfect*'

                         }

                     },

                     watch:{

                         num:function(newValue,oldValue){

                             console.log("修改了num old="+oldValue+"new="+newValue);

                         },

 //                        user:{

 //                            handler:function(newValue,oldValue){

 //                            console.log("修改了username old="+oldValue.username+"new="+newValue.username);

 //                            console.log(oldValue==newValue);

 //                        },

 //                        deep:true

 //                    }

                     }

                     });

                     let unwatch=vm.$watch('user',{//返回一个取消观察函数，用来停止触发回调：

                         handler:function(newValue,oldValue){

                         console.log("修改了msg old="+oldValue+"new="+newValue);

                         },

                         deep:true

                     });

                     function unWatch(){

                         unwatch();

                     }

         </script>

 </html>

观测数据变化的实例方法