vue 模板语法

1. 要点

Vue.js 使用了基于 HTML 的模板语法

也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法

2. 细节点

2.1 插值

2.1.1 文本     

“Mustache”语法 (双大括号)           {{ msg }}

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

2.1.2 html      

v-html 指令        v-html="rawHtml"                     不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎

<span v-html="rawHtml"></span>

扩展：

v-text 与 v-html 相比，前者输出转义后字符，即未渲染的dom

 2.1.3 特性（属性）

v-bind 指令    v-bind:id="dynamicId"     

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

2.1.4 js 表达式

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

2.2 指令   指令 (Directives) 是带有 v- 前缀的特殊特性

2.2.1 普通指令   

显示隐藏

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

一次绑定

<span id="span" v-once >Message: {{ msg+1 }}</span>

...

2.2.2 带参数指令

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

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

2.2.3 动态参数       使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式                  浏览器会把特性名全部强制转为小写

<a v-bind:[attributeName]="url"> ... </a>

<a v-on:[eventName]="doSomething"> ... </a>

2.2.4 修饰符           以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

<form v-on:submit.prevent="onSubmit">...</form>

2.3 缩写

2.3.1  v-bind 缩写      

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

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

2.3.2  v-on 缩写

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

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

3. 代码

 

4. 参考网址