Vue模板语法总结

文本

数据绑定最常见的方式就是使用“Mustache”语法(两个大括号{{ }})的文本插值

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

Mustache标签将会被替代为对应数据对象msg的值，无论何时，绑定的数据对象上msg属性发生变化，插入处的内容都会更新。
通过v-once指令，执行一次性的插入，当数据改变时，插入处的值不会更新。但他会影响其他标签元素的数据绑定：

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

使用javascript表达式

对于所有的数据绑定，vue都提供了完全的javascript表达式的支持。

{{ number + 1 }}

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

{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

这些表达式会在Vue实例数据作用域下作为javascript被解析。
有个限制就是每个绑定都只能包含单个表达式。所以下面的例子都不会生效

<div id="app">
    <!-- 支持三目运算符 -->
    {{ 1 > 2 ?'真':'假' }}

    <!-- 
        不支持变量声明
        {{ var a = 10}}

        不支持if{{ if(ok) { return "哈哈" }}}
     -->
     <!-- 
        但是三目运算可以访问用户的全局变量
      -->
     {{ ok ? '哈哈' : "呵呵s"}}



</div>

const app = new Vue({
    el:"#app",
    data:{
        ok:true,
    }
})

由于模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如Math和Date。

指令

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式的作用于DOM

<p v-if="seen">现在你看到我了</p>

这里v-if指令将根据seen的值真假来插入/移除元素。

参数

一些指令能够接受一个参数，在指令名称之后以冒号表示，例如，v-bind指令可以用于响应式地更新HTML特性。

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

在这里 href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定。
另一个例子是v-on，它用于监听DOM事件

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

在这里参数是监听的事件名.

缩写

v-bind的缩写是一个冒号(:)
v-on的缩写是一个@