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的缩写是一个冒号(