VUE——模范语法

模板语法

插值

文本——{{ }}

“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>

vue.js官网