模板语法
插值
文本——{{ }}
“mustache语法”:{{ msg }}
mustache标签将会被替代为对应数据对象上的 msg 属性的值
当绑定的数据对象msg发生改变时,插值处的内容也会响应式的改变
//HTML代码
<div id="app">
{{ message }}
</div>
//js代码
new Vue({
el: '#app',
data: {
message: 'hello vue.js'
}
})
原始HTML——v-html
mustache语法会将数据解释为普通文本信息,在需要输出html代码是,我们需要使用v-html
<div v-html="rawhtml"></div>
这个div中的内容将会被替换成属性值rawhtml。
//html
<div id="app">
<div v-html="rawhtml"></div>
</div>
//js
new Vue({
el: '#app',
data: {
rawhtml: '<h2>我是2号标题<h2>'
}
})
特性——v-bind
mustache语法不能直接作用在HTML特性上,此时我们需要使用v-bind指令
<div v-bind:id="dynamicId"><div>
//css
.color{
color: red;
}
//html
<div id="app">
<div v-bind:class="{'color': color}">
使用v-bind指令绑定css样式
</div>
</div>
//js
new Vue({
el: '#app',
data: {
color: true
}
});
使用JavaScript表达式
提供了完全的JavaScript表达式支持,每个绑定都只包含一个表达式
//符合要求的语法
{{ num++ }}
{{ ok ? "YES" : "NO" }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + i"></div>
//不符合要求的语法
{{ var x = 1 }} //这是语句
{{ if(ok) { return true } }} //控制流也不支持
//只能支持单个表达式
指令
指令(directive)是带有v-前缀的特殊属性,指令的值是单个JavaScript表达式,(v-for除外)。
指令的职责,当表达式的值发送改变时,将其产生的连带影响,响应式地作用于DOM。
参数
一些指令能够接收一个‘参数’,在指令名称之后以冒号表示。
<a v-bind:href="url"></a>
<a v-on:click="doSomething"></a>
修饰符
修饰符(modifiers)是以.指明特殊后缀,用于指出一个指令应该以特殊方式绑定。
<form v-on:submit.prevent="onSubmit"></form>
缩写
//v-bind缩写
<a :href="url"></a>
//v-on缩写
<a @click="doSomething"></a>