Vue基础之插值表达式的另一种用法！附加变量的监听！

Vue基础之插值表达式的另一种用法！附加变量的监听！

讲这个之前我们先回顾一下原来的用法！

<body>
	<!-- Vue.js的应用可以分为两个重要的组成部分
	一个是视图!
	另一个是脚本!！ -->
	<!-- 下面的就是视图！ -->
	<div id="app">
		<h1>{{message}}</h1>
	</div>
	<!-- 下面的就是脚本！ -->
	<script type="text/javascript">
	// 
		
	var app = new Vue({
		
		el:'#app', // 这个就是你要操作的元素！
		data: {
			message: 'lvhang'
		} // data用于保存数据！插值表达式！我们在视图中声明了那些变量， 就需要在data中注册同名的变量，并且对变量进行赋值！
		
	}) 
	</script>

</body>

原来的插值对象表达式是写在一个大的对象里面的！就是在app 下面的data属性里面的！

新的方式是在外面创建一个对象， 然后把新创建的对象放在data 属性的后面！

<body>
		<div id="app">
			{{name}}
		</div>
		<script type="text/javascript">
			// 每个Vue的应用都是通过Vue函数创建一个新的Vue实例开始的!

			// 通常我们都会创建一个变量来接受Vue返回的一个对象！
			// 当一个Vue实例被创建时，它将data对象中的所有的属性加入到Vue的响应式系统中，当这些属性的值发生改时，视图将会产生响应，及匹配为更新的值!
			var data = {
				name: 'lvchengxin'
			}
			var app = new Vue({
				el: '#app',
				data: data
			})
			// data.name = 'daxia'
			// data.$name = 'lvhang!'; // lvchengxin
			// app.name = 'chengdu'


			// 上面的就是 数据属性！
			// 除了数据属性，Vue实例还暴露了一些有用的实例属性与方法，它们都有前缀$.以便与用户定义的属性区分开来，例：
			// $watch 是一个实例方法! 方法要放在你监听的变量名或属性名之前!
						// 第一个参数就是你要观察那个变量的变化！
						// 第二个参数就是回调函数！回调函数有两个参数，第一个是最新的值， 第二个是原来的值！
			app.$watch('name', function(newVal, oldVal) {
				console.log(newVal) // xiaoxia
				console.log(oldVal) // lvchengxin
			} )	
						app.$data.name = 'xiaoxia'; // xiaoxia
		</script>



	</body>

最后还附加一个监听变量的一个方法， 上面已经给出来了！最重要的就是这个方法使用的时候要放在变量的前面!

posted @ 2020-12-07 20:53  lvhanghmm  阅读(274)  评论(0)    收藏  举报