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>//jsnew 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>//jsnew 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官网