第六十六篇：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实现对数据的简单处理,但若我们在其中加入大量的代码,使得逻辑变重,导致难以维护.例如下面的代码,并不 ...
随机推荐
- SpringBoot之:SpringBoot的HATEOAS基础
目录 简介 链接Links URI templates Link relations Representation models 总结 简介 SpringBoot提供了HATEOAS的便捷使用方式,前 ...
- BUUCTF-easycap
easycap 看这个题目应该是流量包来的,wireshark打开即可.没什么特征,直接打开第一个包发现flag
- 『现学现忘』Docker基础 — 42、补充：save和load命令说明
目录 1.save命令 2.load命令 1.save命令 将指定的一个或多个镜像保存成.tar格式的文件,进行打包归档. 查看docker save帮助命令,如下: [root@192 ~]# do ...
- CMU15445 (Fall 2019) 之 Project#1 - Buffer Pool 详解
前言 这个实验有两个任务:时钟替换算法和缓冲池管理器,分别对应 ClockReplacer 和 BufferPoolManager 类,BufferPoolManager 会用 ClockReplac ...
- 10.2 如何运行Android项目到Android Studio自带模拟器
Android开发一般都可以将应用运行到模拟器查看效果,除非特殊项目要用到真机,所以我们这里先讲解如何将项目运行到模拟器,以校验我们的开发环境以及创建的项目是否有问题. 创建模拟器 点击"C ...
- NC20806 区区区间间间
NC20806 区区区间间间 题目 题目描述 给出长度为n的序列a,其中第i个元素为 \(a_i\),定义区间(l,r)的价值为 \(v_{l,r} = max(a_i - a_j | l \leqs ...
- 抓包整理外篇——————autoResponder、composer 、statistics [ 三]
前言 经过了前文的介绍的部分已经能够为自己抓包提供一个舒适的环境了,但是舒服的拿到我们的包后,可能有些需求还是难以搞定,fiddler 提供了我们一些其他模块,让我们工作轻松,请往下看. 正文 aut ...
- runc hang 导致 Kubernetes 节点 NotReady
Kubernetes 1.19.3 OS: CentOS 7.9.2009 Kernel: 5.4.94-1.el7.elrepo.x86_64 Docker: 20.10.6 先说结论,runc v ...
- 深度学习基础-基于Numpy的感知机Perception构建和训练
1. 感知机模型 感知机Perception是一个线性的分类器,其只适用于线性可分的数据. f(x) = sign(w.x + b) 其试图在所有线性可分超平面构成的假设空间中找 ...
- Eolink家族成员回归 — 开源服务Eoapi！
Eolink 开源产品又回来了!Eoapi 自 2016 年上架 Github 以来,一直备受国内外开发者的欢迎和好评 ,在2018年 Eolink 为了进一步升级该产品而进行了暂时下架.时隔四年,E ...