常用的实例方法：

数据：

vm.$set：设置属性值；

vm.$delete：删除属性值；

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

生命周期：

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

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

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

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

示例：

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

vue代码：

  1. <script>
  2.  
  3.             let vm=    new Vue({
  4.                     el:'div',
  5.                     data:{
  6.                         user:{
  7.                             username:'perfect'
  8.                         }
  9.  
  10.                     },
  11.                     methods:{
  12.  
  13.                         changeUsername(){
  14.  
  15.                             this.user.username='perfect_1';
  16.                         },
  17.  
  18.                         addId(){
  19. //                            this.$set(this.user,'id',1);//局部进行添加Id
  20. //                            Vue.set(this.user,'id',1);//全局设置
  21.  
  22.                          if(this.user.id){
  23.                              this.user.id++;
  24.                          }else{
  25.                              Vue.set(this.user,'id',);
  26.                          }
  27.                          console.log(this.user.id);
  28.                         }
  29.                     }
  30.  
  31.             });
  32.  
  33.         </script>

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

html:

  1. <body>
  2.         <div>
  3.             Id:<span>{{user.id}}</span><br />
  4.  
  5.             用户名：<span>{{user.username}}</span><br />
  6.             <button @click="changeUsername">changeUsername</button>
  7.             <button @click="addId">添加ID</button>
  8.  
  9.     </div>
  10.     </body>

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

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

  1. delId(){
  2.                             if(this.user.id){
  3. //                                this.$delete(this.user,'id');
  4.  
  5.                                 Vue.delete(this.user,'id');//全局的
  6.                                  console.log('已经删除ID');
  7.                             }

HTML：

  1.     <div>
  2.             Id:<span>{{user.id}}</span><br />
  3.  
  4.             用户名：<span>{{user.username}}</span><br />
  5.             <button @click="changeUsername">changeUsername</button>
  6.             <button @click="addId">添加ID</button>
  7.             <button @click="delId">删除ID</button>
  8.  
  9.     </div>

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

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title> 06_常用的实例方法</title>
  6.          <script type="text/javascript" src="../js/vue.js" ></script>
  7.  
  8.      </head>
  9.      <body>
  10.          <div>
  11.              Id:<span>{{user.id}}</span><br />
  12.  
  13.              用户名：<span>{{user.username}}</span><br />
  14.              <button @click="changeUsername">changeUsername</button>
  15.              <button @click="addId">添加ID</button>
  16.              <button @click="delId">删除ID</button>
  17.  
  18.      </div>
  19.      </body>
  20.  
  21.      <script>
  22.  
  23.              let vm=    new Vue({
  24.                      el:'div',
  25.                      data:{
  26.                          user:{
  27.                              username:'perfect'
  28.                          }
  29.  
  30.                      },
  31.                      methods:{
  32.  
  33.                          changeUsername(){
  34.  
  35.                              this.user.username='perfect_1';
  36.                          },
  37.  
  38.                          addId(){
  39.  //                            this.$set(this.user,'id',1);//局部进行添加Id
  40.  //                            Vue.set(this.user,'id',1);//全局设置
  41.  
  42.                           if(this.user.id){
  43.                               this.user.id++;
  44.                           }else{
  45.                               Vue.set(this.user,'id',);
  46.                           }
  47.                           console.log(this.user.id);
  48.                          },
  49.                          delId(){
  50.                              if(this.user.id){
  51.  //                                this.$delete(this.user,'id');
  52.  
  53.                                  Vue.delete(this.user,'id');//全局的
  54.                                   console.log('已经删除ID');
  55.                              }
  56.  
  57.                          }
  58.  
  59.                      }
  60.  
  61.              });
  62.  
  63.          </script>
  64.  </html>

.$set与.$delete实例方法

vm.$watch：观测数据变化

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title> 07_常用的实例方法_watch</title>
  6.         <script type="text/javascript" src="../js/vue.js" ></script>
  7.  
  8.     </head>
  9.     <body>
  10.         <div>
  11.             <input type="text" v-model="msg" /><br />
  12.             msg:<span> {{msg}}</span><br />
  13.             <input type="text" v-model="num" /><br />
  14.             num:<span> {{msg}}</span><br />
  15.             <button onclick="unWatch()">unWatch</button>
  16.  
  17.     </div>
  18.     </body>
  19.  
  20.     <script>
  21.  
  22.             let vm=    new Vue({
  23.                     el:'div',
  24.                     data:{
  25.                         msg:'perfect',
  26.                         num:
  27.  
  28.                     },
  29.                     watch:{
  30.                         num:function(newValue,oldValue){
  31.                             console.log("修改了num old="+oldValue+"new="+newValue);
  32.                         }
  33.                     },
  34.  
  35.                     });
  36.                     let unwatch=vm.$watch('msg',function(newValue,oldValue){//返回一个取消观察函数，用来停止触发回调：
  37.  
  38.                         console.log("修改了msg old="+oldValue+"new="+newValue);
  39.                     });
  40.                     function unWatch(){
  41.  
  42.                         unwatch();
  43.                     }
  44.  
  45.         </script>
  46. </html>

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

实例方法watch深度观测

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

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

加入的vue代码：

  1.     user:{
  2.                             handler:function(newValue,oldValue){
  3.                             console.log("修改了username old="+oldValue.username+"new="+newValue.username);
  4.                             console.log(oldValue==newValue);
  5.                         },
  6.                         deep:true
  7.                     }

加入的HTML：

  1.  <input type="text" v-model="user.username" /><br />
  2.               username:<span> {{user.username}}</span><br />

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

其代码为：

  1. let unwatch=vm.$watch('user',{//返回一个取消观察函数，用来停止触发回调：
  2.  
  3.                         handler:function(newValue,oldValue){
  4.                         console.log("修改了msg old="+oldValue+"new="+newValue);
  5.                         },
  6.                         deep:true
  7.                     });

vm.$watch总的代码：

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title> 07_常用的实例方法_watch</title>
  6.          <script type="text/javascript" src="../js/vue.js" ></script>
  7.  
  8.      </head>
  9.      <body>
  10.          <div>
  11.              <input type="text" v-model="msg" /><br />
  12.              msg:<span> {{msg}}</span><br />
  13.              <input type="text" v-model="num" /><br />
  14.              num:<span> {{msg}}</span><br />
  15.              <input type="text" v-model="user.username" /><br />
  16.                username:<span> {{user.username}}</span><br />
  17.              <button onclick="unWatch()">unWatch</button>
  18.  
  19.      </div>
  20.      </body>
  21.  
  22.      <script>
  23.  
  24.              let vm=    new Vue({
  25.                      el:'div',
  26.                      data:{
  27.                          msg:'perfect',
  28.                          num:,
  29.                          user:{
  30.                              id:'',
  31.                              username:'perfect*'
  32.                          }
  33.  
  34.                      },
  35.                      watch:{
  36.                          num:function(newValue,oldValue){
  37.                              console.log("修改了num old="+oldValue+"new="+newValue);
  38.                          },
  39.  
  40.  //                        user:{
  41.  //                            handler:function(newValue,oldValue){
  42.  //                            console.log("修改了username old="+oldValue.username+"new="+newValue.username);
  43.  //                            console.log(oldValue==newValue);
  44.  //                        },
  45.  //                        deep:true
  46.  //                    }
  47.                      }
  48.  
  49.                      });
  50.  
  51.                      let unwatch=vm.$watch('user',{//返回一个取消观察函数，用来停止触发回调：
  52.  
  53.                          handler:function(newValue,oldValue){
  54.                          console.log("修改了msg old="+oldValue+"new="+newValue);
  55.                          },
  56.                          deep:true
  57.                      });
  58.                      function unWatch(){
  59.  
  60.                          unwatch();
  61.                      }
  62.  
  63.          </script>
  64.  </html>

观测数据变化的实例方法

Vue基础进阶 之 实例方法的更多相关文章

  1. Vue基础进阶 之 实例方法--生命周期

    在上一篇博客中我们知道生命周期的方法: 生命周期: vm.$mount:手动挂载Vue实例: vm.$destroy:销毁Vue实例,清理数据绑定,移除事件监听: vm.$nextTick:将方法中的 ...

  2. vue 基础-->进阶 教程(1): 基础（数据绑定）

    第一章 建议学习时间4小时  课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...

  3. vue 基础-->进阶 教程(2): 指令、组件

    第二章 建议学习时间4小时  课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...

  4. vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制

    前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...

  5. vue 基础-->进阶 教程(2): 指令、自定义指令、组件

    第二章 建议学习时间4小时  课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...

  6. Vue基础进阶 之 列表过渡

    在前面的博客我们一直在操作单个元素的过渡,如果是对多个元素过渡,例如列表,这时就要用到<transition-group>这个组件了: 如何使用:将要操作的列表元素放在<transi ...

  7. Vue基础进阶 之 过渡效果

    进入/离开过渡效果:Vue在插入.更新或移除DOM时,可以设置一些动画效果: 如何使用过渡效果:利用<transition></transition>组件将需要应用的过渡效果的 ...

  8. Vue基础进阶 之 自定义指令

    自定义指令-----钩子函数 自定义指令 除了内置指令,Vue也允许用户自定义指令: 注册指令:通过全局API Vue.directive可以注册自定义指令: 自定义指令的钩子函数: bind: in ...

  9. Vue基础进阶 之 常用的实例属性

    Vue实例属性: vue实例直接调用的属性: 常用的实例属性: vm.$data:获取属性: vm.$el:获取实例挂载的元素: vm.$options:获取自定义选项/属性: vm.$refs:获取 ...

随机推荐

  1. ganglia问题汇总

    1.有数据,不出图 排查方法: 1)确保 php-gd 插件已安装 2) 确保rrdtool 的命令路径是正确的 3)确保php.ini中passthru函数是否开启,参数safe_mode 是否为o ...

  2. Scikit-learn使用总结

    在机器学习和数据挖掘的应用中,scikit-learn是一个功能强大的python包.在数据量不是过大的情况下,可以解决大部分问题.学习使用scikit-learn的过程中,我自己也在补充着机器学习和 ...

  3. ASP.NET MVC+HighCharts开发统计图表

    HighCharts是开源的Web图表js组件,与D3.js一样,经常用于数据可视化.HighCharts图表类型丰富,功能非常强大,是很好的数据可视化解决方案,其官方网站为:http://www.h ...

  4. c++学习计划

    我选择的课程是西北工业大学的<C++程序设计> 理由是:西北工业大学的计算机挺不错的,而且这门课程还有"国家精品"的认证,感觉应该挺不错的. 共48讲...有点多 从2 ...

  5. linux 的基本操作（linux系统的日常管理）

    系统的日常管理 笔者在前面介绍的内容都为linux系统基础类的,如果你现在把前面的内容全部很好的掌握了,那最好了.不过笔者要说的是,即使你完全掌握了,你现在还是不能作为一名合格的linux系统管理员的 ...

  6. hive 元数据库表描述

    元数据库表描述 这一节描述hive元数据库中比较重要的一些表的作用,随着后续对hive的使用逐渐补充更多的内容. mysql元数据库hive中的表: 表名 作用 BUCKETING_COLS 存储bu ...

  7. python全栈开发 * 12 知识点汇总 * 180530

    12 知识点总结 装饰器进阶 ⼀. 通⽤装饰器的回顾1.开闭原则: 对增加功能开放. 对修改代码封闭2.装饰器的作⽤: 在不改变原有代码的基础上给⼀个函数增加功能3.通⽤装饰器的写法:def wrap ...

  8. JavaScript基础知识（Number的方法）

    Number的方法 number : 数字 正数 负数 0 NaN 小数; NaN : not a number; 不是一个数字,但是属于数字类型的: 1.typeof :检测当前的数据类型的: 首先 ...

  9. 【立体几何】Journey to Jupiter Gym - 101991J 立体几何模板

    https://cn.vjudge.net/problem/Gym-101991J 题目很长,其实就是给你一个正三角形,并且告诉你它的中点在Z轴上以及法向量,边长和顶点A的坐标(自由度已定),让你求A ...

  10. elastricsearch学习笔记

    一.基础概念 Elasticsearch有几个核心概念.从一开始理解这些概念会对整个学习过程有莫大的帮助. 接近实时(NRT)         Elasticsearch是一个接近实时的搜索平台.这意 ...