第六十六篇：Vue的watch侦听器
好家伙，哇吃侦听器
1.watch侦听器
watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作
1.1.侦听器的基本用法
<body>
<div id="app">
<input type="text" v-model="username">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const vm = new Vue({
el:'#app',
data:{
username:'ni hao shuai'
},
//所有的
watch:{
//侦听器本质上是一个函数，要监听哪个数据，就把那个数据作为方法名即可
username(newVal,oldVal){
console.log("username的数值发生变化",newVal,oldVal)
}
},
methods:{
}
})
</script>
</body>
数据的改变可以被侦听到
2.侦听器的格式
( 1 )方法格式的侦听器
代码参上
缺点1:无法在进入页面时自动触发
缺点2:如果监听的是一个对象,若果对象中的属性发生了变化,不会触发侦听器!
( 2 )对象格式的侦听器
好处1:可以通过immediate属性让监听器自动触发
好处2:可以通过deep选项,让侦听器深度监听对象中的每个属性
代码如下:
<body>
<div id="app">
<input type="text" v-model="username">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const vm = new Vue({
el:'#app',
data:{
username:'ni hao shuai'
},
//所有的
watch:{
//定义对象格式的侦听器
username:{
//用handler属性定义该侦听器的功能
handler:function(newVal,oldVal){
console.log(newVal,oldVal)
},
immediate:ture
//immediate属性为布尔值
//immediate选项的默认值是flase,ture表示立即执行
}
},
methods:{
}
})
</script>
</body>
3.深度监听deep
通过deep选项,让侦听器深度监听对象中的每个属性
<body>
<div id="app">
<input type="text" v-model="info.username">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
const vm = new Vue({
el:'#app',
data:{
info:{
username:'admin'
}
},
watch:{
info:{
handler(newVal){
console.log(newVal)
},
//开启深度监听,只要对象中任何一个属性变化了,都会触发"对象的侦听器"
deep:true
}
},
methods:{
}
})
</script>
</body>
页面如下:
4.补充:
为了方便,可以直接侦听对象中的子属性
如果要监听的对象是子属性的变化,则必须包裹一层单引号
'info.username'(newVal){
console.log(newVal)
}
That's all
第六十六篇：Vue的watch侦听器的更多相关文章
- Vue框架之侦听器与生命周期
一.计算属性computed和侦听器(watch) 侦听的是单个属性 watch:{ 数据属性的名字:function(value){ }, 数据属性的名字2:function(value){ } } ...
- 《手把手教你》系列技巧篇（六十六）-java+ selenium自动化测试 - 读写excel文件 - 上篇（详细教程）
1.简介 在自动化测试,有些我们的测试数据是放到excel文件中,尤其是在做数据驱动测试的时候,所以需要懂得如何操作获取excel内的内容.由于java不像python那样有直接操作Excle文件的类 ...
- 第三百六十六节，Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的bool组合查询
第三百六十六节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)的bool组合查询 bool查询说明 filter:[],字段的过滤,不参与打分must:[] ...
- “全栈2019”Java第六十六章：抽象类与接口详细对比
难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...
- Vue.js 源码分析(七) 基础篇 侦听器 watch属性详解
先来看看官网的介绍: 官网介绍的很好理解了,也就是监听一个数据的变化,当该数据变化时执行我们的watch方法,watch选项是一个对象,键为需要观察的数据名,值为一个表达式(函数),还可以是一个对象, ...
- Vue.js之Vue计算属性、侦听器、样式绑定
前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...
- vue从入门到进阶：计算属性computed与侦听器watch（三）
计算属性computed 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example" ...
- vue计算属性和侦听器
一.计算属性: main.js: var app = new Vue({ el: '#app', data: { math: 80, physics: 90, english: 30 }, compu ...
- vue 自学笔记(三) 计算属性与侦听器
一:计算属性 虽然在模板内使用表达式对属性进行处理十分便利,例如在小胡子语法里写number + 1实现对数据的简单处理,但若我们在其中加入大量的代码,使得逻辑变重,导致难以维护.例如下面的代码,并不 ...
随机推荐
- make 随笔
# --with--cc-opt flag导致./configure时找不到对应库文件? checking for --with-ld-opt="-Wl,-z,relro -Wl,-z,no ...
- 论文解读（LG2AR）《Learning Graph Augmentations to Learn Graph Representations》
论文信息 论文标题:Learning Graph Augmentations to Learn Graph Representations论文作者:Kaveh Hassani, Amir Hosein ...
- 再测云原生数据库性能：PolarDB依旧最强，TDSQL-C、GaussDB变化不大
1.摘要 近期,腾讯云数据库在文章「腾讯云TDSQL-C重磅升级,性能全面领跑云原生数据库市场」中提到,某些场景下性能有非常大的提升,且超过国内某橙色云厂商.恰好,在5月份,我们对各个厂商的云原生数据 ...
- 《ASP.NET Core 6框架揭秘》样章发布[200页/5章]
作为<ASP.NET Core 3 框架揭秘>的升级版,<ASP.NET Core 6框架揭秘>不仅针对ASP.NET Core 6的新特性进行了修订,并添加了若干原来没有的内 ...
- 2019 CSP-S 初赛解析
因为我不会设置用博客园显示Markdown语法,所以在洛谷也写了一份:传送门 一起讨论的这套卷.题干 然后还有一些可以借鉴一下的解析 选择: T1. 注意运算顺序: a%3=1 --> (int ...
- 记一次 Druid 超时配置的问题 → 引发对 Druid 时间配置项的探究
开心一刻 一天在路边看到一个街头采访 记者:请问,假如你儿子娶媳妇,给多少彩礼合适呢 大爷:一百万吧,再给一套房,一辆车 大爷沉思一下,继续说到:如果有能力的话再给老丈人配一辆车,毕竟他把女儿养这么大 ...
- 抢先体验! 在浏览器里写 Flutter 是一种什么体验？
Invertase 是一间位于英国的开源软件制作公司.主要构建关于开发者工具.SDK 等应用程序,早在 Flutter 2.2 的时候,Invertase 团队就开始帮助构建和贡献 Firebase ...
- HtmlAgilityPack中使用xpath获取属性值
HtmlAgilityPack介绍 HtmlAgilityPack是一个专门用来解析Html的库,它可以使用xml的方式来解析html. 有人说了,html本身不就是xml?是的,html就是xml, ...
- 5.1SpringBoot整合Kafka（工具安装Kafka+Tools）
1.工具安装Kafka 上一期我分享了安装zk,下一次我们把Kafka和可视化工具一起搞起来. 注意:这个时候ZK一定要启动成功. zk安装地址:https://www.cnblogs.com/dao ...
- PHP操作路由器
用PHP操作路由器 我们经常会碰到需要自动换IP的需求,比方模拟点击投票,数据采集被封IP,Alexa作弊等等,也就是需要经常换IP的,我们都可以通过PHP控制路由器来换IP,这样就不需要用按键精灵搞 ...