09_监视属性

最新推荐文章于 2022-05-25 21:07:15 发布
最新推荐文章于 2022-05-25 21:07:15 发布
阅读量49 收藏
点赞数
分类专栏： vue 文章标签： javascript vue.js html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41246557/article/details/120859191
版权
  1. 通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性
  2. 当属性变化时, 回调函数自动调用, 在函数内部进行计算

示例1：天气案列

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>天气案例</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>今天天气很{{info}}</h2>
			<!-- 绑定事件的时候：@xxx="yyy" yyy可以写一些简单的语句 -->
			<!-- <button @click="isHot = !isHot">切换天气</button> -->
			<button @click="changeWeather">切换天气</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
		})
	</script>
</html>

示例二：天气案例_监视属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>天气案例_监视属性</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				监视属性watch：
					1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作
					2.监视的属性必须存在，才能进行监视！！
					3.监视的两种写法：
							(1).new Vue时传入watch配置
							(2).通过vm.$watch监视
		 -->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>今天天气很{{info}}</h2>
			<button @click="changeWeather">切换天气</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			/* watch:{
				isHot:{
					immediate:true, //初始化时让handler调用一下
					//handler什么时候调用？当isHot发生改变时。
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				}
			} */
		})

		vm.$watch('isHot',{
			immediate:true, //初始化时让handler调用一下
			//handler什么时候调用？当isHot发生改变时。
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		})
	</script>
</html>

示例三:天气案例_深度监视

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>天气案例_深度监视</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				深度监视：
						(1).Vue中的watch默认不监测对象内部值的改变（一层）。
						(2).配置deep:true可以监测对象内部值改变（多层）。
				备注：
						(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
						(2).使用watch时根据数据的具体结构，决定是否采用深度监视。
		 -->
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>今天天气很{{info}}</h2>
			<button @click="changeWeather">切换天气</button>
			<hr/>
			<h3>a的值是:{{numbers.a}}</h3>
			<button @click="numbers.a++">点我让a+1</button>
			<h3>b的值是:{{numbers.b}}</h3>
			<button @click="numbers.b++">点我让b+1</button>
			<button @click="numbers = {a:666,b:888}">彻底替换掉numbers</button>
			{{numbers.c.d.e}}
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
				numbers:{
					a:1,
					b:1,
					c:{
						d:{
							e:100
						}
					}
				}
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			watch:{
				isHot:{
					// immediate:true, //初始化时让handler调用一下
					//handler什么时候调用？当isHot发生改变时。
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				},
				//监视多级结构中某个属性的变化
				/* 'numbers.a':{
					handler(){
						console.log('a被改变了')
					}
				} */
				//监视多级结构中所有属性的变化
				numbers:{
					deep:true,
					handler(){
						console.log('numbers改变了')
					}
				}
			}
		})

	</script>
</html>

示例四:天气案例_监视属性_简写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>天气案例_监视属性_简写</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>今天天气很{{info}}</h2>
			<button @click="changeWeather">切换天气</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		const vm = new Vue({
			el:'#root',
			data:{
				isHot:true,
			},
			computed:{
				info(){
					return this.isHot ? '炎热' : '凉爽'
				}
			},
			methods: {
				changeWeather(){
					this.isHot = !this.isHot
				}
			},
			watch:{
				//正常写法
				/* isHot:{
					// immediate:true, //初始化时让handler调用一下
					// deep:true,//深度监视
					handler(newValue,oldValue){
						console.log('isHot被修改了',newValue,oldValue)
					}
				}, */
				//简写
				/* isHot(newValue,oldValue){
					console.log('isHot被修改了',newValue,oldValue,this)
				} */
			}
		})

		//正常写法
		/* vm.$watch('isHot',{
			immediate:true, //初始化时让handler调用一下
			deep:true,//深度监视
			handler(newValue,oldValue){
				console.log('isHot被修改了',newValue,oldValue)
			}
		}) */

		//简写
		/* vm.$watch('isHot',(newValue,oldValue)=>{
			console.log('isHot被修改了',newValue,oldValue,this)
		}) */

	</script>
</html>

示例五：姓名案例_watch实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>姓名案例_watch实现</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				computed和watch之间的区别：
						1.computed能完成的功能，watch都可以完成。
						2.watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。
				两个重要的小原则：
							1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象。
							2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，
								这样this的指向才是vm 或 组件实例对象。
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			姓：<input type="text" v-model="firstName"> <br/><br/>
			名：<input type="text" v-model="lastName"> <br/><br/>
			全名：<span>{{fullName}}</span> <br/><br/>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const vm = new Vue({
			el:'#root',
			data:{
				firstName:'张',
				lastName:'三',
				fullName:'张-三'
			},
			watch:{
				firstName(val){
					setTimeout(()=>{
						console.log(this)
						this.fullName = val + '-' + this.lastName
					},1000);
				},
				lastName(val){
					this.fullName = this.firstName + '-' + val
				}
			}
		})
	</script>
</html>
  • vue.js资源链接链接：https://pan.baidu.com/s/1ee8AsHqOFlHHULn3PBxvuw
    提取码：1icf
韩顺平的小迷弟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue handler ()的参数是什么_你应该知道的Vue高级特性
weixin_36128925的博客
02-02 1万+
本文使用的Vue版本：2.6.10Vue为我们提供了很多高级特性，学习和掌握它们有助于提高你的代码水平。一、watch进阶从我们刚开始学习Vue的时候，对于侦听属性，都是简单地如下面一般使用：watch:{ a(){ //doSomething } } 实际上，Vue对watch提供了很多进阶用法。handler函数以对象和handler函数的方式来定义一个监听属性，h...
ExtAspNet_v2.3.2_dll
09-29
-从Region控件中删除SplitColor属性，增加CollapseMode, EnableSplitTip, SplitTip, CollapsibleSplitTip属性(feedback:bmck)。 -BorderPanel更名为RegionPanel。 -DropDownList拥有MarkInvalid方法(feedback:sun...
09 监视属性
baidu_41922918的博客
07-31 129
1. 天气案例计算属性实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>VUE复习</title> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> </head> <body
路由复习
aiyx16521的博客
03-21 207
spa:single page application 单页面应用 提供一个舞台。舞台当中呈现的是组件，具体呈现的组件由地址决定。 react路由:根据路径决定要使用哪一个组件 组件： 路由组件：由路由控制 普通组件：页面当中使用的组件 1，下载路由模块 cnpm install react-router-dom -S 2，引入 import { BrowserRouter as Router,//路由器 Route//路由，必须被Router包裹 NavLink, Link, Switch, Hash
Vue-侦听属性watch(handler方法,immediate和deep属性)
陈坚泓的博客
11-07 5427
Vue-侦听属性watchwatch选项handler方法和immediate属性deep属性字符串形式监听注销watchwatch监听路由 watch选项 当我们输入firstName后，wacth监听每次修改变化的新值，然后计算输出fullName。 <div id="app"> <p>FullName: {{ fullName }}</p> &lt...
vue.js监听属性watch(handler方法immediate属性deep属性)
Amanda_wmy的博客
11-05 2万+
vue.js监听属性watch(handler方法immediate属性deep属性) &lt;div&gt; &lt;p&gt;FullName: {{fullName}}&lt;/p&gt; &lt;p&gt;FirstName: &lt;input type="text" v-model="firstName"&gt;&lt;/p&gt;
2021-2022收藏资料多媒体技术基础期末复习指导(专科).doc
09-25
这些指令用来描述图中线条的形状、位置、颜色等各种属性和参数。矢量图与位图比较，主要看空间和性能两方面，一般说来，要看图像的复杂程度，简单的图使用矢量图描述好一些，复杂的图使用位图好一些。 监视器分辨率...
计算机日常应用与维护09
08-31
- 打印设置：学习如何配置打印机，设置打印属性，解决打印问题。 - 网络连接：掌握建立和管理网络连接，包括Wi-Fi和有线连接，以及处理网络故障。 2. **软件安装与卸载**： - 安装程序：了解不同类型的安装包...
超详细 - 学习vue3.0的基础代码.zip
最新发布
06-07
07_src_vue3的计算属性 08_src_watch监视函数 09_src_watch监测ref数据的说明 10_src_watchEffect函数 11_src_vue3生命周期 12_src_自定义hook函数 13_src toReffltoRefs 14 src shallowRef和shallowReactive 15 src...
云南大学数据库原理与实用技术期末试卷09-10年((张璇、薛刚、蔡丽、代飞)
07-08
《云南大学数据库原理与实用技术期末试卷09-10年》是一份涵盖了数据库理论与实践的考试资料，由张璇、薛刚、蔡丽、代飞四位教师编纂。这份资料是针对2009-2010学年的期末考核，旨在检验学生对数据库系统基础理论的...
vue watch handler
weixin_34383618的博客
01-10 2651
普通监听 缺点：不能深度监听（对象属性的改变），刷新或首次加载不能执行。 watch: { carts: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) } } 复制代码高级监听 handle：watch中需...
vue watch handler
H-L的博客
12-18 4309
普通监听 缺点：不能深度监听（对象属性的改变），刷新或首次加载不能执行。 watch: { carts: function (val, oldVal) { console.log('new: %s, old: %s', val, oldVal) } } 高级监听 handle：wat...
vue中watch的详解
热门推荐
关注最新技术问题并持续维护更新
04-23 9万+
Watch概述     一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。 简单的监听 <body> <div id="app"> <input type="text" v-model="num"> </div> &lt...
vue中计算属性和观察属性
丢失的Litte_志伟的博客
12-07 388
vue中计算属性和观察属性 计算属性： computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理 computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化 computed:{ //默认属性为一个getters属性 fullname: function (){ //被用来计算的数据，发生变化后，当前计算值会同步进行更
vue中watch的用法
刘泽海的博客
12-12 2万+
一、首先确认watch是一个对象，一定要当做对象来用 1 2 3 watch:{ } 　　对象：有键，有值。 　1、键：就是你要监控的那个家伙，比如说$route，这个就是要监控路由的变化。或者是data中的某个变量。 　2、值： 　　① 可以是【函数】：就是当你监控的家伙变化时，需要执行的函数，这个函数有两个形...
VUE2.0 学习（五）一篇文章读懂监听属性watch，他的两种写法，以及深度监视和简写方式
一天不写代码难受的博客
10-12 636
目录监听属性前提使用监视属性的代码（第一种方法监视）handlerimmediatedeep第二种方法监视监视的范围总结监听多级结构中某个属性的变化监视属性的简写方式计算属性和 监听属性的区别总结为什么vue项目里面的定时器，一般写成箭头函数，其他的写成普通函数 监听属性 前提 我们根据前面学过的知识，今天点击一个按钮，页面上面的数据进行变化，直接给按钮一个点击事件，写法是 <!DOCTYPE html> <html lang="en"> <head> <
监视属性的两种写法
qq_48233231的博客
02-18 206
1:直接在vue的实例对象中写 2:vue的实例创建以后，用一个变量接收
9. 监视属性
s12345672的博客
08-17 237
监视属性 1. 天气案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>天气案例</title> <!-- 引入V
Vue监视属性详解
热爱编程的你我
05-25 1398
监视属性详解
python 监控变量变化_监视python中的变量变化
06-02
要监视Python中的变量变化，可以使用Python的property和装饰器来实现。下面是一个示例代码，用于监视变量值的变化： ``` class MyClass: def __init__(self): self._my_var = None @property def my_var(self)...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值