【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视频-模板语法-插值