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. Python3.5-20190504-廖老师的2-if elif else continue break

    条件判断: if 条件1: 代码块 elif 条件2: 代码块 else 条件3: 代码块 brith = input("请输入出身年月:") if  brith > 200 ...

  2. python3.x __str__与__repr__

    __repr__和__str__用于显示,__str__是面向用户的,而__repr__面向coder[调试与开发] repr(默认交互式回显)[来自python入门] str(也就是打印语句) 一般 ...

  3. java版扫雷

    package com.titian.bean; import java.awt.CardLayout; import java.awt.Point; public class Grid { char ...

  4. [CSP-S模拟测试]:简单的填数(贪心+模拟)

    题目描述 对于一个长度为$n$,且下标从$1$开始编号的序列$a$,我们定义它是「合法的」,当且仅当它满足以下条件:·$a_1=1$·对于$i\in [1,n),a_i\leqslant a_{i+1 ...

  5. 一起探讨下POST、GET请求

    以下的讨论都是基于java和Spring MVC,主要记录自己的一些练习心得. 做web网站开发HTTP请求必不可少,一直在使用写好的Utils没有考虑过如何以及为什么,现在闲下来想着捋一捋java的 ...

  6. leetcode上的一些栈、队列问题

    20-有效的括号 思路:主要考察栈的一些基本操作,像push()(将数据压入栈顶).top()(取栈顶的数据但不删除).pop()(直接删除栈顶的元素).empty()(判断栈是否为空).这题就是先把 ...

  7. Openstack组件部署 — Keystone Install & Create service entity and API endpoints

    目录 目录 前文列表 Install and configure Prerequisites 先决条件 Create the database for identity service 生成一个随机数 ...

  8. IIS发布获取apk文件,部署IIS遇到的问题记录

    今天需要帮着测试一下PDA的检测更新功能,所以需要把web部署到IIS上. 在部署的时候,遇到了两个小问题. 一.web 服务器被配置为不列出此目录的内容. 解决办法:1.按照提示的可尝试操作,启用了 ...

  9. alerttemplate 时间戳转换

    /*时间戳转换*/ template.defaults.imports.dateFmt = function(ns){ return new Date(parseInt(ns)).toLocaleSt ...

  10. Spring 源码学习——Aop

    Spring 源码学习--Aop 什么是 AOP 以下是百度百科的解释:AOP 为 Aspect Oriented Programming 的缩写,意为:面向切面编程通过预编译的方式和运行期动态代理实 ...