Vue学习笔记（三）：模板语法

Vue使用了基于HTML的模板语法，允许开发者声明式的将DOM绑定至底层Vue实例的数据。在底层实现上，Vue将模板编译成虚拟DOM渲染函数，能够智能的计算出最少需要重新渲染多少组件，并把DOM操作次数减到最少。

一、插值

（一）文本

1、Mustache语法（双大括号），{{message}}只要绑定的数据对象上的message属性发生改变，插值处会同步更新

2、在element上使用v-once指令，可以实现一次性插值，即数据改变时，插值处的内容不会发生改变。

<div id='app'>
	<span v-once>{{message}}</span>
</div>
var app = new Vue({
	el:'#app',
	data:{
	message:'wangxuan'
	}
})

（二）原始HTML

双大括号会将内容解析成文本，如果希望能够以HTML的形式输出，需要使用v-html指令

<div id="app2">
	<span>{{myHtml}}</span>
	<span v-html='myHtml'></span>
</div>
var app2 = new Vue({
	el:"#app2",
	data:{
		myHtml:'<span style="color: red">我是HTML</span>'
	}
})

代码结果：

绝对不要对用户提供的内容使用插值，容易导致XSS攻击。

（三）特性attr

Mustache语法不能作用在HTML特性上，应使用v-bind指令：

<span v-bind:id='myId'></span>

在布尔特性的情况下，存在即暗示为true，如果值为null、undefined、false时，特性可能不会被渲染出来。

（四）使用JavaScript表达式

Mustache可以接受单个JavaScript表达式

<div id='app3'>
	<span>{{number+1}}</span>
	<span>{{ok?'Yes':'No'}}</span>
	<span>{{message.split("").reverse().join("")}}</span>
</div>
var app3 = new Vue({
	el:"#app3",
	data:{
		number:1,
		ok:true,
		message:'hello'
	}
})

结果：

二、指令

指令是带有v-前缀的特殊特性，指令的值预期是单个JavaScript表达式（除v-for），指令的职责是当表达式的值改变时，将其产生连带影响作用于DOM

（一）参数

一些指令接收一个参数，在指令后面以冒号表示。

例如：v-bind指令用于响应式的更新HTML特性，v-on指令用于监听DOM事件。

<span v-bind:class='classname'></span>
<span v-on:click='doSomething'></span>

（二）修饰符(没有很懂，以后深入学习会理解？再回来补充)

修饰符是以半角句号指明的特殊后缀，用于指出一个指令应该以特殊的方式绑定。

例如.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault()

<form v-on:submit.prevent='onSubmit'>...</form>

三、缩写

（一）v-bind

<!-- 完整 -->
<a v-bind:href='url'></a>
<!-- 缩写 -->
<a :href='url'></a>

（二）v-on

<!-- 完整 -->
<a v-on:click='onClick'></a>
<!-- 缩写 -->
<a @clcik='onClick'></a>