Vue基础入门到项目实战教程(4) —— 模板语法

Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。结合响应式系统，在应用状态发生改变时，Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。

1、文本

数据绑定最常见的形式就是使用 {{...}} （双大括号）的文本插值：

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

上面代码中 {{ msg }} 模板处的内容会被Vue实例的数据对象上 msg 属性的值，当数据对象上 msg 属性发生改变时，插值处的内容都会被更新。

如果不想让模板处的内容随着数据对象的属性改变，可以使用 v-once 指令，例如：

<span v-once>这个将不会改变: {{ msg }}</span>

在使用了 v-once 的标签中，插值处的内容不会更新，但是这样会影响该节点上的其他数据绑定，所以要谨慎使用。

2、原始HTML

双大括号可以把数据解释为普通的文本，但是如果文本中的内容是HTML源码，也会被作为普通的文本输出。但是对于一些特殊的情况下，需要对HTML的文本进行解析，渲染为HTML代码并将HTML代码的执行结果展示在页面中，比如富文本编辑器中的内容。为了输出真正的HTML，可以使用 v-html 指令，示例如下：

<div id="app" v-html="msg"></div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			msg: '<h1 style="color:red">Hello</h1>'
		}
	})
</script>

在页面中的输出结果：

3、属性

双大括号的模板语法不适用于HTML属性上，如果要把数据绑定到HTML的属性上可以使用 v-bind 指令：

<div v-bind:id="idVal"></div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			idVal: 'app'
		}
	})
</script>

上面代码中，渲染后的HTML代码中，div的id属性值为app。

对于布尔类型的属性（该属性只要存在其值即为true），v-bind 的使用会与普通的属性略有不同，例如：

<div v-bind:disabled="isDisabled"></div>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			isDisabled: true
		}
	})
</script>

如果 isDisabled 的值是 null 、undefined 、或 false，则 disabled 属性不会被包含在渲染出来的元素中。

4、JS表达式

模板中除了可以绑定简单的属性键值，还可以对其他数据进行绑定，Vue提供了完全的JavaScript表达式支持。

例如：

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析。但是每个绑定都只能包含单个表达式，如果出现多表达式的话，是不会生效的。例如：

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}