Vue基礎之插值表達式的另外一種用法！附加變量的監聽！

時間 2020-12-08

標籤 javascript vue java app 函數 code 對象回調函數欄目 JavaScript 简体版

原文原文鏈接

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>