实例详解vue.js浅度监听和深度监听及watch用法


Posted in Javascript onAugust 16, 2018

第一个浅度监听:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="js/vue.js"></script>
 </head>
 <body>
 <div id="app">
  <p>{{a}}</p>
  <p>{{b}}</p>
 </div>
 <script>
  
 var vm=new Vue({
  el:"#app",
  data:{
   a:10,
   b:15
  }
 });
 vm.$watch("a",function(){
  alert('a变化了');
  this.b=100;
 });
 document.onclick=function(){
  vm.a=2
 }
 </script>
 </body>
</html>

第二个深度监听

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <script type="text/javascript" src="js/vue.js"></script>
 </head>
 <body>
 <div id="app">
  <p>{{a|json}}</p>
  <p>{{b}}</p>
 </div>
 <script>
  var vm = new Vue({
  el: "#app",
  data: {
   a: { id: "1", title: "width" },
   b: 15
  }
  });
  vm.$watch("a", function() {
  alert('a变化了');
  this.b = 100;
  }, { deep: true });
  document.onclick = function() {
  vm.a.id = "2";
  }
 </script>
 </body>
</html>

ps:下面看下vue中watch用法

对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。在实例化时为每个键调用 $watch() ;

//使用官方vue-cli脚手架书写
<template>
//观察数据为字符串或数组

 <input v-model="example0"/>

 <input v-model="example1"/>

/当单观察数据examples2为对象时,如果键值发生变化,为了监听到数据变化,需要添加deep:true参数

 <input v-model="example2.inner0"/>
</template>
<script>

 export default {



data(){




return {





example0:"",





example1:"",





example2:{






inner0:1,






innner1:2





}




}



},



watch:{




example0(curVal,oldVal){





console.log(curVal,oldVal);




},




example1:'a',//值可以为methods的方法名




example2:{




 //注意:当观察的数据为对象或数组时,curVal和oldVal是相等的,因为这两个形参指向的是同一个数据对象





handler(curVal,oldVal){






conosle.log(curVal,oldVal)





},





deep:true




}



},



methods:{




a(curVal,oldVal){





conosle.log(curVal,oldVal)




}



}
  }
</script>

Javascript 相关文章推荐
javascript之解决IE下不渲染的bug
Jun 29 Javascript
js 验证密码强弱的小例子
Mar 21 Javascript
jquery中的过滤操作详细解析
Dec 02 Javascript
node模块机制与异步处理详解
Mar 13 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 Javascript
浅谈React前后端同构防止重复渲染
Jan 05 Javascript
深入理解Vue.js轻量高效的前端组件化方案
Dec 10 Javascript
jQuery zTree树插件的使用教程
Aug 16 jQuery
如何优雅地取消 JavaScript 异步任务
Mar 22 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 #Javascript
vue watch深度监听对象实现数据联动效果
Aug 16 #Javascript
JS实现的RC4加密算法示例
Aug 16 #Javascript
vue2.0父子组件间传递数据的方法
Aug 16 #Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 #Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
Aug 16 #Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 #Javascript
You might like
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
学习php设计模式 php实现观察者模式(Observer)
2015/12/09 PHP
很酷的javascript loading效果代码
2008/06/18 Javascript
javascript 自定义事件初探
2009/08/21 Javascript
解决Jquery鼠标经过不停滑动的问题
2014/03/03 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
Jquery uploadify上传插件使用详解
2016/01/13 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
vue-自定义组件传值的实例讲解
2018/09/18 Javascript
vue实现自定义H5视频播放器的方法步骤
2019/07/01 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
[01:19:54]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#1Alliance VS EHOME
2016/03/03 DOTA
在centos7中分布式部署pyspider
2017/05/03 Python
LRUCache的实现原理及利用python实现的方法
2017/11/21 Python
有趣的python小程序分享
2017/12/05 Python
Python之多线程爬虫抓取网页图片的示例代码
2018/01/10 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
python实现泊松图像融合
2018/07/26 Python
自学python的建议和周期预算
2019/01/30 Python
python操作kafka实践的示例代码
2019/06/19 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
Python字典底层实现原理详解
2019/12/18 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
Python分析微信好友性别比例和省份城市分布比例的方法示例【基于itchat模块】
2020/05/29 Python
日本最大的眼镜购物网站:Oh My Glasses
2016/11/13 全球购物
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
类成员函数的重载、覆盖和隐藏区别
2016/01/27 面试题
交通专业个人自荐信格式
2013/09/23 职场文书
大跃进口号
2014/06/16 职场文书
沈阳故宫导游词
2015/01/31 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
党员带头倡议书
2015/04/29 职场文书
python实现黄金分割法的示例代码
2021/04/28 Python
win10更新失败无限重启解决方法
2022/04/19 数码科技
GoFrame gredis缓存DoVar Conn连接对象 自动序列化GoFrame gredisDo/DoVar方法Conn连接对象自动序列化/反序列化总结
2022/06/14 Golang
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android