侦听器-了解侦听器的基本语法格式

发布时间 2023-06-09 00:33:45作者: Young_Yang_Yang

什么是watch侦听器

watch侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作
语法格式如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="username" />
		</div>
		<script src="lib/vue-2.6.12.js"></script>
		<script>
			const vm = new Vue({
				el: '#app',
				data: {
					username: ''
				},
				// 所有的侦听器,都应该被定义到watch节点下
				watch: {
					// 侦听器本质上是一个函数,要监视哪个数据的变化,就把数据名作为方法名即可
					// 新值在前,旧值在后
					username(newVal, oldVal) {
						console.log('监听到了username值的变化', newVal, oldVal)
					}
				}
			})
		</script>
	</body>
</html>