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>