【vue】插值 賦值 數據綁定

Vue.js 使用了基於 HTML 的模板語法，允許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循規範的瀏覽器和 HTML 解析器解析。

在底層的實現上，Vue 將模板編譯成虛擬 DOM 渲染函數。結合響應系統，Vue 能夠智能地計算出最少需要重新渲染多少組件，並把 DOM 操作次數減到最少。大致可以通過以下幾個方式來插值。

文本

這是一種最常見的方式，使用“Mustache”語法（雙大括號）的方法文本插值。

<span>Message: {{ msg }}</span>

Mustache 標籤將會被替代爲對應數據對象上 msg property 的值。無論何時，綁定的數據對象上 msg property 發生了改變，插值處的內容都會更新。

Note:如果你希望僅僅給他賦值，在後續數據發生改變時，插值出的內容也不需要更新，可以用過我們後面學習到的指定v-once。但是請留意，如果在一個節點上指定了v-once，那麼也會影響到該節點上的其他數據綁定。

<span v-once>{{ msg }}</span>

原始 HTML

雙大括號會將數據解釋爲普通文本，而非 HTML 代碼。例如：

<div id="app">
	<p>原始文本: {{ html }}</p>
</div>
<script type="text/javascript">
	var data = {
		html : '<span style="color:red;">xxxx</span>',
	};
	var vm = new Vue({
		el : '#app',
		data : data
	})
</script>

會輸入如下結果：

如果需要輸出HTML代碼，真正的HTML，需要使用v-html指令來實現這個效果，例如:

<div id="app">
	<p>原始文本: {{ html }}</p>
	<p>真正的HTML：<span v-html="html"></span></p>
</div>
<script type="text/javascript">
	var data = {
		html : '<span style="color:red;">xxxx</span>',
	};
	var vm = new Vue({
		el : '#app',
		data : data
	})
</script>

會輸入如下結果：

這個 span 的內容將會被替換成爲 property 值 html，直接作爲 HTML會忽略解析 property 值中的數據綁定。注意，你不能使用 v-html 來複合局部模板，因爲 Vue 不是基於字符串的模板引擎。反之，對於用戶界面 (UI)，組件更適合作爲可重用和可組合的基本單位。不要用用戶提供的內容來使用插值， 很容易導致 XSS 攻擊。

屬性

雙大括號的語法不能直接作用於HTML的屬性上面，遇到這種情況應該使用v-bind來綁定。例如：

<div id="app">
	<div v-bind:id="dynamicId"></div>
</div>
<script type="text/javascript">
	var data = {
		dynamicId : 'test',
	};
	var vm = new Vue({
		el : '#app',
		data : data
	})
</script>

會看到如下結果:

如果布爾型的屬性，他們只要存在就意味着是true，v-bind工作起來略有不同。有些屬性如果他綁定的是false的時候，甚至後不會顯示出來，例如disabled

<div id="app">
	<button v-bind:disabled="button1">Button1</button>
	<button v-bind:disabled="button2">Button2</button>
	<button v-bind:disabled="button3">Button3</button>
	<button v-bind:disabled="button4">Button4</button>
	<button v-bind:disabled="button5">Button5</button>
	<hr/>
	<input type="checkbox" name="test1" v-bind:checked="button1">checkbox1<br/>
	<input type="checkbox" name="test2" v-bind:checked="button2">checkbox2<br/>
	<input type="checkbox" name="test3" v-bind:checked="button3">checkbox3<br/>
	<input type="checkbox" name="test4" v-bind:checked="button4">checkbox4<br/>
	<input type="checkbox" name="test5" v-bind:checked="button5">checkbox5<br/>
	<hr/>
	<input type="text" name="test1" v-bind:disabled="button1">text1<br/>
	<input type="text" name="test2" v-bind:disabled="button2">text2<br/>
	<input type="text" name="test3" v-bind:disabled="button3">text3<br/>
	<input type="text" name="test4" v-bind:disabled="button4">text4<br/>
	<input type="text" name="test5" v-bind:disabled="button5">text5<br/>
</div>
<script type="text/javascript">
	var data = {
		button1 : '',
		button2 : null,
		button3 : undefined,
		button4 : false,
		button5 : 1,
	};
	var vm = new Vue({
		el : '#app',
		data : data
	})
</script>

結果如下：

如果將這些變量全部用引號引起來的話，除了空值將全部變爲false。

js表達式

Vue.js 提供了完全的 JavaScript 表達式支持,這些表達式會在所屬 Vue 實例的數據作用域下作爲 JavaScript 被解析。但是每個綁定都只能包含單個表達式，不能使用例如賦值語句，if&else之類的操作。

<div id="app">
	{{ number + 1 }}
	<hr/>

	{{ ok ? 'YES' : 'NO' }}
	<hr/>

	{{ message.split('').reverse().join('') }}
	<hr/>

	{{ var a = 1 }}
	<hr/>

	{{ if (ok) { return message } }}
	<hr/>

	{{ ok ? message : 'no message' }}

<div v-bind:id="'list-' + id"></div>
</div>
<script type="text/javascript">
	var data = {
		number : 2,
		ok : 1e3,
		message:'bai',
	};
	var vm = new Vue({
		el : '#app',
		data : data
	})
</script>

輸出結果如下：

在上面的例子中我們有一條賦值語句，一個流程的if空值語句，這些js表達式都不會生效，並且會拋出一個錯誤。另外需要注意的是：js表達式都被放在沙盒中，只能訪問全局變量的一個白名單，如 Math 和 Date 。你不應該在js表達式中試圖訪問用戶定義的全局變量。

參考資料:

Vue官網-模板語法

Vue視頻-模板語法-插值