第六十六篇：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实现对数据的简单处理,但若我们在其中加入大量的代码,使得逻辑变重,导致难以维护.例如下面的代码,并不 ...
随机推荐
- ABP Framework 5.3.0 版本新增功能和变更说明
ABP Framework 5.3.0 稳定版已在2022年6月14日正式发布. 以下是本版本的新增功能: "开始"页面提供创建单层项目选项 启动模板提供 PWA 支持 Volo. ...
- 聊聊C#中的composite模式
写在前面 Composite组合模式属于设计模式中比较热门的一个,相信大家对它一定不像对访问者模式那么陌生,毕竟谁又没有遇到过树形结构呢.不过所谓温故而知新,我们还是从一个例子出发,起底一下这个模式吧 ...
- SAP JSON 格式化及解析。
一.首选:/ui2/cl_json {'key':'value'} /ui2/cl_json=>deserialize( EXPORTING json = json CHANGING d ...
- UiPath存在文本Text Exists的介绍和使用
一.Text Exists的介绍 检查是否在给定的UI元素中找到了文本,输出的是一个布尔值 二.Text Exists在UiPath中的使用 1. 打开设计器,在设计库中新建一个Sequence,为序 ...
- windows如何结束某个端口的进程
netstat -ano | findstr 端口号 (查询端口号被哪个进程占用) tasklist | findstr 进程PID (根据PID找到进程名称) taskkill -PID 进程PID ...
- 发评测赢好礼 | Serverless 函数计算征集令
随着云计算发展,云原生热度攀升,Serverless 架构崭露头角且发展势头迅猛.不仅被更多开发者所关注,市场占有率也逐年提高.阿里云函数计算(Function Compute)是一个事件驱动的全托管 ...
- Docker安装canal、mysql进行简单测试与实现redis和mysql缓存一致性
一.简介 canal [kə'næl],译意为水道/管道/沟渠,主要用途是基于 MySQL 数据库增量日志解析,提供增量数据订阅和消费. 早期阿里巴巴因为杭州和美国双机房部署,存在跨机房同步的业务需求 ...
- Map接口总结（如何使用默认方法）
Map接口总结(如何使用默认方法) Map的基本使用 默认方法的问题,有什么坑 常用的默认方法应用场景 基本操作 get put(区别:Collection接口中添加为set) putAll remo ...
- labview入门到出家11(补充)——基于单片机和labview开发的虚拟示波器
之前有小伙伴提到需要虚拟示波器的资料,有些库还有文件丢失了,直接给的工程跑不起来,这里我把关键的地方讲解一下,大家可以自行开发.其实开发不难,只是有些点会耗点时间.虚拟示波器,顾名思义就是非实物的 ...
- 一文吃透如何部署kubernetes之Dashboard
kubernetes Dashboard是什么? Dashboard是kubernetes的Web GUI,可用于在kubernetes集群上部署容器化应用,应用排错,管理集群本身及其附加的资源等,它 ...