vue模板语法及操作

vue使用了基于html的模板语法，所有的vue.js的模板语法是合法的html。

1、文本

    使用了{{}}双大括号的形式

<span>Message: {{ msg }}span>

    {{msg}}会被替代为对应数据对象上的msg属性的值，并在绑定数据对象的msg发生改变，内容也会随之变化。

    使用v-once指令，执行一次插值，之后不会变化。

    

<span v-once>这个将不会改变: {{ msg }}span>

2、原始HTML

    双大括号会将数据解释为普通文本(即连带标签一并显示)，而非html代码，为输出真正的html，需要使用v-html

<p>Using mustaches: {{ rawHtml }}p>
<p>Using v-html directive: <span v-html="rawHtml">span>p>

3、特性

    Mustache 语法不能直接作用在html特性上，此处可以使用v-bind

<div v-bind:id="dynamicId">div>

    

3、vue数据绑定可支持javascript

可以试下下列简单实例

{{number+1}}


{{ok? 'YES' : 'NO'}}


{{message.split('').reverse().join('')}}

表达式会在所属vue实例的数据作用域下作为js被解析，但是只能包含单个表达式，下面的例子就不会生效：

{{ var a = 1 }}


{{ if (ok) { return message } }}

4、指令

指令是带有v-前缀的特殊特性，指令特性预期值是单个js表达式（v-for除外）

指令职责：当表达式的值改变时，将其产生的连带影响作用域dom。

参数：一个指令能够接受一个参数，在指令名称之后以冒号表示。v-bind:href v-bind:class

v-on可用于监听事件

   

<a v-on:click="doSomething">...a>

v-bind与v-on缩写

    

<a v-bind:href="url">...a>


<a :href="url">...a>

<a v-on:click="doSomething">...a>


<a @click="doSomething">...a>