Vue数据监听方法watch的使用


Posted in Javascript onMarch 28, 2018

watch本身很容易理解, watch负责将视图中的数据与某个函数关联起来

当Vue视图中的数据变化时, 关联的函数会被执行

Vue数据监听方法watch的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>监听方法watch的使用</title>
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    var vm = new Vue({
      el: "#root",
      data: { obj: {name: "zhaoolee", age: 12} , tel:6666666},
      template: `<div><div>姓名: {{obj.name}}</div>
        <div>电话: {{tel}}</div>
        <input type="text" v-model="obj.name">
        <input type="text" v-model="tel"></div>`,
      watch: {
        obj: {
         handler(){
           console.log("obj被改变");
         },
          // 页面加载之初先执行一次handle
         immediate: true,
          // 深度检查属性,即使对象内部的属性值改变, 也能检测到(比较消耗性能)
         deep: true
        },
        "obj.name": {
          handler(){
            console.log("=>obj.name被改变");
          }
        },
        tel:{
          handler(){
            console.log("tel被改变");
          }
        }
      }
    })
  </script>
</body>
</html>

对应一个对象,键是观察表达式,值是对应回调。值也可以是方法名,或者是对象,包含选项。在实例化时为每个键调用 $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 相关文章推荐
延时重复执行函数 lLoopRun.js
May 08 Javascript
jQuery live
May 15 Javascript
超酷的网页音乐播放器DewPlayer使用方法
Dec 18 Javascript
使用js获取图片原始尺寸
Dec 03 Javascript
JavaScript 学习笔记之语句
Jan 14 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
AngularJS控制器之间的通信方式详解
Nov 03 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
Dec 23 Javascript
使用vue-cli导入Element UI组件的方法
May 16 Javascript
vue中锚点的三种方法
Jul 06 Javascript
Vue 自定义动态组件实例详解
Mar 28 #Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 #Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 #Javascript
js中el表达式的使用和非空判断方法
Mar 28 #Javascript
JS实现左边列表移到到右边列表功能
Mar 28 #Javascript
JS中用EL表达式获取上下文参数值的方法
Mar 28 #Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 #jQuery
You might like
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
2019/10/17 PHP
javascript读取xml
2006/11/04 Javascript
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
2007/07/21 Javascript
ext form 表单提交数据的方法小结
2008/08/08 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
jQuery中offsetParent()方法用法实例
2015/01/19 Javascript
分析了一下JQuery中的extend方法实现原理
2015/02/27 Javascript
jQuery实现响应鼠标滚动的动感菜单效果
2015/09/21 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
在一个页面实现两个zTree联动的方法
2017/12/20 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
2019/06/24 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
如何使用JS console.log()技巧提高工作效率
2020/10/14 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
Python中数字以及算数运算符的相关使用
2015/10/12 Python
Python字典操作详细介绍及字典内建方法分享
2018/01/04 Python
python三大神器之fabric使用教程
2019/06/10 Python
python+logging+yaml实现日志分割
2019/07/22 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
乌克兰最大的家用电器和电子产品连锁店:Eldorado
2019/10/02 全球购物
内科护士实习自我鉴定
2013/10/17 职场文书
药物学专业学生的自我评价
2013/10/27 职场文书
赔偿协议书范本
2014/04/15 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
党员干部作风建设思想汇报范文
2014/10/25 职场文书
追悼词范文大全
2015/06/23 职场文书
深入理解Vue的数据响应式
2021/05/15 Vue.js
使用JS前端技术实现静态图片局部流动效果
2022/08/05 Javascript