vue中watch的使用
vue中的watch是一个比较重要的概念，通过他我们可以检测data的变化，下面进行详细的介绍。
watch定义方式如下：
{[key: string]: string | Function | Object }
即在watch中，
键是一个字符串，它是被观测的对象。
值可以是一个字符串，这个字符串是方法名。
值还可以是一个函数，但不能使用箭头函数的形式，this会出现问题。
值也可以是一个对象，其中包含回调函数可以其他一些选项：比如是否深度遍历。
举例如下：
vuevar vm = new Vue({
data: {
a: ,
b: ,
c: {
name: "JohnZhu"
}
},
watch: {
a: function (val, oldVal) {
console.log('new a: %s, old a: %s', val, oldVal)
},
// 方法名
b: 'someMethod',
// 深度 watcher， 检测到变化，并打印出c.name变化前后的结果
// 'c.name': {
// handler: function (val, oldVal) {
// console.log('new c: %s, old c: %s', val, oldVal);
// },
// deep: true
// },
// 报错 必须用c.name，否则在data下不能直接找到name
// name: function () {
// console.log('new c: %s, old c: %s', val, oldVal);
// }
// 报错，键值必须是一个字符串，所以用引号括起来
// c.name: {
// handler: function (val, oldVal) {
// console.log('new c: %s, old c: %s', val, oldVal);
// },
// deep: true
// }
// 这里未检测到变化
// c : {
// handler: function (val, oldVal) {
// console.log('new c: %s, old c: %s', val, oldVal);
// },
// deep: false
// },
// 成功检测到变化
// c : {
// handler: function (val, oldVal) {
// console.log('new c: %s, old c: %s', val, oldVal);
// },
// deep: true
// },
// 检测不到变化，因为参数 deep 的默认值是false
// c : {
// handler: function (val, oldVal) {
// console.log('new c: %s, old c: %s', val, oldVal);
// },
// },
},
methods: {
someMethod: function () {
alert("b is changed");
}
}
})
vm.a = ; // new: 2, old: 1
vm.b = ; // alert 666
vm.c.name = "HTT";
函数执行之后，分别在控制台中打印出new: 2, old:1 以及 alert 666。
可以看出， watch函数的参数中，第一个是改变之前的值，第二个是改变之后的值， 这两个参数非常有用。
这里分别使用了 三种定义函数(或option)的方法。
如果要观察data下一个对象的属性，我们可以使用 '对象.属性' 的方式， 注意： 一定要要引号。
如果改变了一个对象的属性，就必须使用 deep: true， 否则检测不到变化。
举例：
这样的一个组件，当我想要同级输入的字数并希望在字数达到一定的数目时，给出提示，就可以watch字数， 即v-model实现，当字数的length改变时，我们判断， 然后给出相应的提示：
最后贴出完整的代码：
{{message.length}}/
不吃辣
少放辣
多放辣
不吃蒜
不吃香菜
不吃葱
@main-color: #51B1B0;
@sub-color: #eeefef;
div.add-remark {
div.input {
position: relative;
padding: .2rem .5rem;
textarea {
box-sizing: border-box;
width: %;
height: 4rem;
font-size: .4rem;
padding: .3rem;
border: .0294rem solid @sub-color;
&:focus {
box-shadow: .0417rem @main-color;
}
}
span.font-number {
position: absolute;
font-size: .4rem;
color: #aaa;
bottom: .5rem;
right: .7rem;
}
}
div.hint-content {
padding: .2rem;
span.hint {
display: inline-block;
margin: .2rem .3rem .2rem .3rem;
padding: .25rem;
border: .02rem solid @sub-color;
border-radius: .1rem;
&:active {
background-color: @sub-color;
}
}
}
div.btn {
width: 9rem;
height: 1rem;
margin: .3rem auto;
line-height: 1rem;
text-align: center;
background-color: @main-color;
font-size: .45rem;
font-weight: bold;
color: white;
border-radius: .2rem;
}
}
export default {
data () {
return {
message: ""
}
},
watch: {
message: function (val, oldValue) {
if (val.length == ) {
this.$toast("备注最多输入50字哦");
}
}
},
methods: {
handleHint: function (e) {
if (e.target.nodeName.toLowerCase() == "span") {
this.message += (" " + e.target.innerHTML )
}
},
goback () {
this.$router.back();
}
}
}
https://cn.vuejs.org/v2/api/#watch
http://www.jianshu.com/p/ffe50c5e3368
http://www.cnblogs.com/dupd/p/5887907.html
https://cn.vuejs.org/v2/guide/computed.html#Computed-属性-vs-Watched-属性、
仰天大笑出门去，我辈岂是蓬蒿人。
vue中如何不通过路由直接获取url中的参数
前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...
vue中的重要特性
一.vue中的自定义组件 html的代码:
Vue中comoputed中的数据绑定
Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...
vue中使用stompjs实现mqtt消息推送通知
最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...
Vue中应用CORS实现AJAX跨域，及它在 form data 和 request payload 的小坑处理
基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...
vue中watched属性
watched属性,vue中的观察属性,可用来监听一个值的变化 默认有两个参数,新值,旧值 data (){ return { currentCity: "深圳" } } watc ...
七、vue中v-for有时候对页面不会重新渲染，数组变化后如何到渲染页面
v-for不能进行双向数据绑定,页面渲染完成后,再次更改v-for遍历的数据,js里面打印的数据看到数据值已经更改,但是页面的数据就是没有渲染,这是为什么呢? vue中v-for和angularj ...
【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
vue中数据双向绑定的实现原理
vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...
Vue中之nextTick函数源码分析
Vue中之nextTick函数源码分析 1. 什么是Vue.nextTick()?官方文档解释如下:在下次DOM更新循环结束之后执行的延迟回调.在修改数据之后立即使用这个方法,获取更新后的DOM. 2 ...
随机推荐
eclipse报错 :java was started but returned exit code=13
一个礼拜没打开自己电脑上的eclipse,一打开居然报错,错误提示如下: cdm运行一下Java -version和javac 运行javac时报错,错误提示如下: 然后发现jdk的bin下没有dt. ...
ASP.Net MVC如何访问的静态页面
MVC开发中,因为View文件夹下的web.config文件默认会把任何方法的请求的任何文件,路径都交给 System.Web.HttpNotFoundHandler 去处理.起到Controller ...
something: 重构、正则、vim -- clwu
项目需要做一个db table 操作的小工具. 从phpMyAdmin上拷贝了一些代码过来修改,但我有没有足够的时间把所有拷贝过来的代码都重构修改和测试完,于是希望后面接手的同事在需要修改这些代码时能 ...
HTML5验证及日期显示
以前忽略了HTML5的强大功能,谁知有了它数据大部分都不需要自己验证,显示日历也不需要插件啦,一些小功能分享给大家 1.Email输入框,自动验证Email有效性. ..
C#编写Windows服务程序图文教程(转载)
Windows Service这一块并不复杂,但是注意事项太多了,网上资料也很凌乱,偶尔自己写也会丢三落四的.所以本文也就产生了,本文不会写复杂的东西,完全以基础应用的需求来写,所以不会对Window ...
【NOIP2016】换教室(动态规划)
题目戳我 题解 其实感觉16年的难度不是很大???? 这道题去年考场上DP都想出来了... 只是因为不会数学期望...然后GG.... 这道题目只要把数学期望搞出来就可以啦 设f[i][j][0/1] ...
Request URI Too Long
如上图所示,URL传參长度限制,改为Post参数提交就好了.
ajax无刷新获取天气信息
浏览器由于安全方面的问题,禁止ajax跨域请求其他网站的数据,但是可以再本地的服务器上获取其他服务器的信息,在通过ajax请求本地服务来实现: <?php header("conten ...
Rakefile实例教程
一.简介 简单的说Rakefile就是使用Ruby语法的makefile, 对应make的工具就是rake. 在Ruby on Rails里面, 不管是数据库的初始化, 内容初始化, 删除, 还是测试 ...
Linux中终端和控制台的一些不成熟的理解
首先声明,这仅仅是在下一些不成熟的想法.是通过看网上的一些资料和自己实践的一些心得,应该都是些很不成熟甚至是不太正确的想法.但是我还是想记录下来,算是一个心路历程吧.等以后成熟了,再来修改. 首先说一 ...
706
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
