watch是一个对象,具有键值对;键指被监听的数据,值指处理方式。

值类型包括以下三个:

  1. 第一个handler:其值是一个回调函数。即监听到变化时应该执行的函数。
  2. 第二个是deep:其值是true或false;确认是否深入监听。(一般监听时是不能监听到对象属性值的变化的,数组的值变化可以听到。)
  3. 第三个是immediate:其值是true或false;确认是否以当前的初始值执行handler的函数。
var vm = new Vue({
data: {
a: 1,
b: 2
},
watch: {
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 方法名
b: 'someMethod',
// 选项的对象
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true,
immediate: true
}
}
})

原文:https://blog.csdn.net/wangxiaoxiaosen/article/details/78487089

vue中watch简单使用的更多相关文章

  1. axios在Vue中的简单应用(一)

    1.安装axios: npm install --save axios vue-axios 2.安装qs: qs.stringify(data)可以解决data数据格式问题 npm install - ...

  2. axios在vue中的简单配置与使用

    一.axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:https://hzzly.github.io/2017/03/12/ ...

  3. vue中超简单的方法实现点击一个按钮出现弹框,点击弹框外关闭弹框

    效果图展示: View层 <template> <div> <div class="mask" v-if="showModal" ...

  4. vue中简单的小插曲

    我们现在来学习一下vue中一些简单的小东西: 首先我们必须要引入vue.js文件哦! 1.有关文本框里的checkbox js代码: new Vue({ el:"#app", da ...

  5. 微信 jssdk 逻辑在 vue 中的运用

    微信 jssdk 在 vue 中的简单使用 import wx from 'weixin-js-sdk'; wx.config({ debug: true, appId: '', timestamp: ...

  6. 【转】简单理解Vue中的nextTick

    前言: Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick ...

  7. 简单理解Vue中的nextTick

    Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一. ...

  8. vue中引入mintui、vux重构简单的APP项目

    最近在学习vue时也了解到一些常用的UI组件,有用于PC的和用于移动端的.用于PC的有:Element(饿了么).iView等:用于移动端APP的有Vux.Mint UI(饿了么).Vant(有赞团队 ...

  9. vue中axios的简单使用

    我们一般在用jq的时候会使用到ajax来进行与服务器之间的交流,vue中也提供了相应的类似于ajax的方法-axios来进行与服务器之间的数据传递 现在的这篇是最简单的使用,后续会添加上来复杂的使用 ...

随机推荐

  1. tomcat manager 禁止外网访问 只容许内网访问

    参考:http://tomcat.apache.org/tomcat-7.0-doc/manager-howto.html A default Tomcat installation includes ...

  2. webpack第一节(4)

    每次修改了代码都需要重新手动打包,这样很麻烦,不符合webpack的初衷,我们查看webpack帮助看看有没有可以自动运行的方法 输入 webpack -help 可以发现有个 --watch方法 它 ...

  3. python2和python3中TestSuite().addTest的区别

    Python2中unittest.TestSuite().addTest()的参数是这样的:unittest.TestSuite().addTest(TestFun("test_nam&qu ...

  4. JSP自定义方法标签

    1.自定义方法标签 引入方式示例: <%@ taglib prefix="fns" uri="/WEB-INF/tlds/fns.tld" %> 写 ...

  5. 【算法】一致性Hash算法

    一.分布式算法 在做服务器负载均衡时候可供选择的负载均衡的算法有很多,包括: 轮循算法(Round Robin).哈希算法(HASH).最少连接算法(Least Connection).响应速度算法( ...

  6. 【Shell】ps -ef 和ps aux

    两者没太大差别 追溯到Unix系统中的两种风格,System V风格和BSD 风格,ps aux最初用到Unix Style中,而ps -ef被用在System V Style中,两者输出略有不同.现 ...

  7. 解决handsontable日期控件汉化的问题

    在项目的 node_modules\pikaday目录下打开 pikaday.js 把 i18n: { previousMonth : 'Previous Month', nextMonth : 'N ...

  8. [MySQL] innobackupex在线备份及恢复(全量和增量)

    安装percona-xtrabackup 方法1: percona-xtrabackup-2.1.9-744-Linux-x86_64.tar.gz(D:\share\src\linux-mysql) ...

  9. JAVA 的StringBuffer类

    StringBuffer类和String一样,也用来代表字符串,只是由于StringBuffer的内部实现方式和String不同,所以StringBuffer在进行字符串处理时,不生成新的对象,在内存 ...

  10. win 10 把秘钥清掉之后查不到秘钥怎么办

    因工作需要系统要激活,跟这网上说的  使用 slmgr.vbs /upk  命令卸载密钥.但是在第2步的时候  slmgr /ipk  ****-****-****-****  无法安装.. 问题现在 ...