第六十六篇：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实现对数据的简单处理,但若我们在其中加入大量的代码,使得逻辑变重,导致难以维护.例如下面的代码,并不 ...
随机推荐
- supervisor的安装与使用
Ubuntu安装使用supervisor 进程管理工具 安装 apt-get install supervisor 查看是否安装成功 pgrep supervisord # 返回进程号则成功 改配置文 ...
- Error: $controller:ctrlreg A controller with this name is not registered.
The controller with the name 'SomeController' is not registered.名称为'SomeController'的控制器没注册 : Descrip ...
- dubbox、zookeeper BUG记录
主要错误信息: dubbo:com.alibaba.dubbo.rpc.RpcException: Failed to invoke the method... Caused by: com.alib ...
- UiPath文本操作Get Text的介绍和使用
一.Get Text操作的介绍 从指定的UI元素提取文本值 二.Get Text在UiPath中的使用 1. 打开设计器,在设计库中新建一个Sequence,为序列命名及设置Sequence存放的路径 ...
- 图文带你看懂JavaScritpt引擎V8与JS执行过程
浏览器原理 浏览器内核与js引擎 浏览器内核又称"排版引擎","渲染引擎","浏览器引擎",叫法很多,简单来说干的活就是将代码(HTML,X ...
- 换根 DP 学习笔记
前言 没脑子选手什么都不会. 正文 先来写一下换根 DP 的特点或应用方面: 不同的点作为树的根节点,答案不一样. 求解答案时要求出每一个节点的信息. 无法通过一次搜索完成答案的求解,因为一次搜索只能 ...
- STM32单片机最小系统
1.单片机最小系统的组成部分 STM32单片机最小系统由①主芯片,②上电复位电路,③时钟电路,④电源供电电路组成.同时一个基本完整的单片机功能还应包括下载电路和LED指示电路. 2.单片机主芯片 单片 ...
- CSS进阶内容——布局技巧和细节修饰
CSS进阶内容--布局技巧和细节修饰 我们在之前的文章中已经掌握了CSS的大部分内容,但仍有一些内容我们没有涉略,这篇文章就是为了补充前面没有涉及的内容,为我们的知识做出补充并且介绍一些布局技巧 当然 ...
- Java通过反射注解赋值
前段时间,领导分配一个统计销售区域汇总的数据,解决方案使用到了反射获取注解,通过注解获取属性或者设置字段属性. 问题描述 查询公司列表,分别是公司id.区域id.区域名称: 公司id 区域id 区域名 ...
- 非root用户安装科学计算包blas、lapack和FFTW
一.安装FFTW 1.下载安装包 下载地址:http://www.fftw.org/download.html 2.编译安装 tar -zxvf fftw-3.3.10.tar.gz cd fftw ...