模板语法

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

• 允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据

• Vue 将模板编译成虚拟 DOM 渲染函数

插值

文本

数据绑定——“Mustache”语法 (双大括号) 的文本插值

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

• 使用 v-once 指令,执行一次性地插值: 数据改变不更新

  <span>Message: {{ msg }}</span>
  <span v-once>值不会改变: {{ msg }}</span>
  

  created() {
    setInterval( () => {
        this.msg++
    }, 1000) 
  }
  

原始HTML

使用 v-html 指令，输出真正的 HTML

<p>Using v-html directive: 
    <span v-html="rawHtml">span标签将被替换</span>
</p>

data: {
    rawhtml: "<h1> this is vue.js </h1>"
}

• v-html 指令，忽略解析属性值中的数据绑定

特性

Mustache 语法不能作用在 HTML 特性上,应该使用 v-bind指令

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

data: {
    dynamicId: "myID"
}

使用 JavaScript 表达式

对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持

{{ number + 1 }}

{{ count == 0 ? 'YES' : 'NO' }}

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

<div v-bind:id="'list-' + id"></div>

每个绑定都只能包含单个表达式，不支持语句

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

指令

1. 指令 (Directives) 是带有 v- 前缀的特殊特性
2. 指令特性的值预期是单个 JavaScript 表达式
3. 当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

<p v-if="seen">隐身术</p>

created() {
    setInterval( () => {
        this.seen = !this.seen
    }, 1000) 
}

参数

某些指令能够接收一个“参数”，在指令名称之后以冒号表示

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

• href参数告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定

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

• 参数是监听的事件名click

动态参数

2.6.0 新增

使用方括号括起来的 JavaScript 表达式作为一个指令的参数

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

• attributeName 会被作为一个 JavaScript 表达式进行动态求值

修饰符

1. 修饰符 (modifier) 是以半角句号 . 指明的特殊后缀
2. 用于指出一个指令应该以某种特殊方式绑定

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

• 对于触发的事件调用 event.preventDefault()

缩写

1. 在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀不太重要
2. v- 前缀频繁使用的指令感到繁琐

v-bind 缩写

:

<!-- 缩写 -->
<a :href="url">...</a>

v-on 缩写

@

<!-- 缩写 -->
<a @click="doSomething">...</a>