vue2.0 watch
类型:string | Function | Object
vue官网解释: 一个对象,键是需要观察的表达式,值是对应回调函数。值也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用 $watch(),遍历 watch 对象的每一个属性。
也就是说watch可以监听对象的变化,规则是键值对方式。
export default {
props: {
fatherAjaxData: {
type: Object
}
},
data() {
return {
a: 1,
b: 2,
c: 3
}
},
watch: {
// 父级异步加载的数据 props 方式给到 当前子级
fatherAjaxData: function (val, oldVal) {
this.$nextTick(() => {
console.log('监听到已异步加载的fatherAjaxData数据 已有值');
});
},
a: function (val, oldVal) {
console.log(`watch a val change --- new val: ${val}, old val: ${oldVal}`);
},
// watch_b_val_change 方法名
b: 'watch_b_val_change',
c: {
handler: function (val, oldVal) {
console.log(`watch c val change --- new val: ${val}, old val: ${oldVal}`);
},
deep: true // 为了发现对象内部值的变化,可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。
}
},
mounted() { // vue 生命周期方法 vue页面全部加载完毕(不包括异步数据)
this.$nextTick(() => {
console.log('vue页面加载完毕!');
});
},
methods: {
watch_b_val_change(val, oldVal) {
console.log(`watch b val change --- new val: ${val}, old val: ${oldVal}`);
}
}
};
this.$nextTick :vue生命周期方法 当数据发生变化 dom变化后 执行$nextTick的callback方法
deep: 为了发现对象内部值的变化,可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。
vm.$watch('someObject', callback, {
deep: true
})
vm.someObject.nestedValue = 123
// callback is fired
vue2.0 watch的更多相关文章
- vue2.0实践的一些细节
最近用vue2.0做了个活动.做完了回头发现,好像并没有太多的技术难点,而自己好像又做了比较久...只能说效率有待提升啊...简单总结了一些比较细节的点. 1.对于一些已知肯定会有数据的模块,先用一个 ...
- vue2.0构建淘票票webapp
项目描述 之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务. 前端技术栈:vue2.0 + vue-router + ...
- Vuex2.0+Vue2.0构建备忘录应用实践
一.介绍Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,适合于构建中大型单页应用. ...
- 一步步构造自己的vue2.0+webpack环境
前面vue2.0和webpack都已经有接触了些(vue.js入门,webpack入门之简单例子跑起来),现在开始学习如何构造自己的vue2.0+webpack环境. 1.首先新建一个目录vue-wk ...
- Vue2.0组件间数据传递
Vue1.0组件间传递 使用$on()监听事件: 使用$emit()在它上面触发事件: 使用$dispatch()派发事件,事件沿着父链冒泡: 使用$broadcast()广播事件,事件向下传导给所有 ...
- 基于Vue2.0+Vue-router构建一个简单的单页应用
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6185492.html 一.介绍 vue.js 是 目前 最火的前端框架,vue.js ...
- vue2.0实战
学了几周的vue2.0,终于有时间去做一个应用了. 为了全面联系相关知识,所以用到了vue-router,以及作者最新推荐的axios,组件库用的是饿了么的mint-ui2.0. 项目构建使用官方vu ...
- vue DatePicker vue2.0的日期插件
一个用vue2.0写的日期控件,可以支持简单的年月日选择.地址:https://github.com/Stevenzwzhai/vue-datepicker. 首先是关于日期对象的使用,基本就是日期的 ...
- 项目vue2.0仿外卖APP(六)
goods 商品列表页开发 布局编写 除了商品之外还有购物车,还有个详情页,挺复杂的. 两栏布局:左侧固定宽度,右侧自适应,还是用flex. 因为内容可能会超过手机高度,超过就隐藏.左右两侧的内容是可 ...
- 项目vue2.0仿外卖APP(五)
header组件 vue-resourse应用 https://github.com/pagekit/vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHtt ...
随机推荐
- 【[SCOI2012]喵星球上的点名】
好题啊 \(SA+ST\text{表}+\text{莫队}\) 我们先强行把所有的串连起来,串与串之间插入特殊字符,姓和名之间也插入特殊字符 之后跑一遍\(SA\),求出\(sa\)和\(het\) ...
- 如何解决“请考虑使用 app.config 将程序集“XXXXXXXX”从版本XXXX重新映射到版本XXXX”的问题
> 请考虑使用 app.config 将程序集“System.ValueTuple, Culture=neutral, PublicKeyToken=cc7b13ffcd2ddd51”从版本“\ ...
- iText生成PDF 格式报表
1.导包 <dependency> <groupId>com.lowagie</groupId> <artifactId>itext</artif ...
- 简述 private、 protected、 public、 internal 修饰符的访问权限
简述 private. protected. public. internal 修饰符的访问权限. private : 私有成员, 在该类的内部才可以访问. protected : 保护成员,该类内部 ...
- c语言描述的双向链表的基本操作
#include<stdio.h> #include<stdlib.h> #define ok 1 #define error 0 typedef int Status; ty ...
- 复制D:\\day05目录下的所有文件到D:\\copy,并将.txt文件改为.java文件。
**解题思路: 1.首先定义一个静态的refile方法,参数传入两个文件路径 2.要复制目录下的所有文件,首先查询File类的方法,可以使用listFiles方法得到目录下的文件 3.想到这问题基本就 ...
- ATK-DataPortal 设计框架(一)
无论是简单的还是复杂的框架,总需要一个开始的原点,ATK-DataPortal中包含了所有基础类的定义. 一.业务框架基础类 1.BusinessBase:所有业务类的根类,要使用ATK库的类,必需继 ...
- Oracle 数据导出注意事项
1.数据导出exp.expbd和imp.impbd 区别: exp,imp:既可以在客户端执行也可以在服务端执行,效率慢于expbd.impbd expbd.impbd:只能够在服务端执行,impbd ...
- flask笔记(三)Flask 添加登陆验证装饰器报错,及解析
Flask 添加登陆验证装饰器报错,及解析 写这个之前,是想到一个需求,这个是关于之前写Flask笔记(二)中的一个知识点,路由相关 需求为 : 有一些页面必须是登陆之后才能访问的,比如Shoppin ...
- Vue组件通讯黑科技
Vue组件通讯 组件可谓是 Vue框架的最有特色之一, 可以将一大块拆分为小零件最后组装起来.这样的好处易于维护.扩展和复用等. 提到 Vue的组件, 相必大家对Vue组件之间的数据流并不陌生.最常规 ...