vue中watch的使用
vue中watch的使用
vue中的watch是一个比较重要的概念,通过他我们可以检测data的变化,下面进行详细的介绍。
watch定义方式如下:
{[key: string]: string | Function | Object }
即在watch中,
- 键是一个字符串,它是被观测的对象。
- 值可以是一个字符串,这个字符串是方法名。
- 值还可以是一个函数,但不能使用箭头函数的形式,this会出现问题。
- 值也可以是一个对象,其中包含回调函数可以其他一些选项:比如是否深度遍历。
举例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
</head>
<body>
<script>
var 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";
</script>
</body>
</html>
函数执行之后,分别在控制台中打印出new: 2, old:1 以及 alert 666。
- 可以看出, watch函数的参数中,第一个是改变之前的值,第二个是改变之后的值, 这两个参数非常有用。
- 这里分别使用了 三种定义函数(或option)的方法。
- 如果要观察data下一个对象的属性,我们可以使用 '对象.属性' 的方式, 注意: 一定要要引号。
- 如果改变了一个对象的属性,就必须使用 deep: true, 否则检测不到变化。
举例:
这样的一个组件,当我想要同级输入的字数并希望在字数达到一定的数目时,给出提示,就可以watch字数, 即v-model实现,当字数的length改变时,我们判断, 然后给出相应的提示:
最后贴出完整的代码:
<template>
<div class="add-remark">
<div class="input">
<textarea maxlength="" placeholder="请输入备注,最多50个字哦" v-model="message"></textarea>
<span class="font-number" >{{message.length}}/</span>
</div>
<div class="hint-content" v-on:click="handleHint($event)">
<span class="hint">不吃辣</span>
<span class="hint">少放辣</span>
<span class="hint">多放辣</span>
<span class="hint">不吃蒜</span>
<span class="hint">不吃香菜</span>
<span class="hint">不吃葱</span>
</div>
<div class="btn" v-on:click="goback">完成</div>
</div>
</template> <style scoped lang="less">
@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;
}
}
</style> <script>
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();
}
}
}
</script>
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中watch的使用的更多相关文章
- vue中如何不通过路由直接获取url中的参数
前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...
- vue中的重要特性
一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- 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同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
- vue中数据双向绑定的实现原理
vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...
- Vue中之nextTick函数源码分析
Vue中之nextTick函数源码分析 1. 什么是Vue.nextTick()?官方文档解释如下:在下次DOM更新循环结束之后执行的延迟回调.在修改数据之后立即使用这个方法,获取更新后的DOM. 2 ...
随机推荐
- 20169219 Nmap扫描实验
提交用 namp 对Windows 靶机,SEED靶机,Linux靶机的扫描的命令和结果进行截图 一.首先分析Linux靶机Metasploitable 扫描Metasploitableb靶机 扫描M ...
- APUE(1)----UNIX基础知识
一.UNIX体系结构 所有操作系统都为他们所运行的程序提供服务,典型的服务包括:执行新程序.打开文件.读文件.分配存储区等.严格意义上来说,操作系统可以定义为一种软件,它控制计算机硬件资源,提供程序运 ...
- 【Java学习01】:win7环境安装JDK
最近开始学习java,从第一步做起吧.win7中安装jdk非常简单,大牛勿喷. 1.下载JDK并执行安装. 访问网站www.java.com,选择win7版本的JDK下载.下载后双击安装(比较慢,耐心 ...
- 《spring 攻略》笔记1
chapter1 spring简介 两种spring ioc容器实现类型: BeanFactory ApplicationContext 应用程序上下文 DI技巧: @Autowired(requir ...
- oracle 新增主键
alter table tablename add constraint pk_tablename primary key (column1,column2,...); 可以新增单主键或联合主键: 新 ...
- javascript常用函数(find、filter、map)
1.find 查询数组中符合条件的第一个元素,如果没有符合条件的元素则返回空数组var arr = [1,2,3,4,5,6,7];var dogs=arr.find(v=>v===4);结果: ...
- 题解 P1720 【月落乌啼算钱】
题目链接 定义一个函数比较好求. #include<bits/stdc++.h>//万能头文件 using namespace std; double F(int x)//定义函数,为了保 ...
- 【spring源码】bean的实例化(转载)
首先来看一段代码,看过上一节的朋友肯定对这段代码并不陌生.这一段代码诠释了Spring加载bean的完整过程,包括读取配置文件,扫描包,加载类,实例化bean,注入bean属性依赖. 上一节介绍了Sp ...
- ThinkCMF Foreach标签
foreach标签类似与volist标签,只是更加简单,没有太多额外的属性,例如: <foreach name="list" item="vo"> ...
- AngularJS 1.x系列:AngularJS服务-Service
1. AngularJS服务 AngularJS可注入类型包括:Service.Factory.Provider.Value及Constant. 2. Service AngularJS Servic ...