Vue 的模板语法

[nfssuzukaze]

Vue 的模板语法

插值

1. 插值到元素中

1. 插值表达式

   <span>{{message}}</span>

   • 该插值表达式会被替代为对应 Vue 实例上 data 的 message 的值(一般情况下), 而且一旦 实例 中的 message 发生了变化, 插值处的内容都会更新
   • 若想要一次性插值的话, 可以使用 v-once 指令. 经过一次插值后, 改变实例中的 message 不会导致插值出的内容更新

     <span v-once>{{message}}</span>

2. 原始 HTML

   <span v-text="message"></span>
   <span v-html="message"></span>

   

   • 使用 v-text 指令的效果与使用 插值表达式 的效果是等价的, 会将 message 的数据当作普通的数据渲染到页面
   • 而使用 v-html 指令, 则会将 message 的数据当作 html 类型的数据进行渲染

2. 插值到 HTML attribute 上

1. html attribute 插值

   <div v-bind:id="dynamicId"></div>
   <button v-bind:disabled="isButtonDisabled"></button>
   <div v-bind:id="dynamicId + ''"></div>

   • 对于前两个标签, 当 dynamicId 或 isButtonDisabled 的值为 null, false, undefined 三者之一时, Vue 并不会进行插值
   • 对于第三个标签, 即使其值为这三个值之一, 由于其在 attribute 处会变成字符串形式, 所以可以进行插值

3. 插值处都可使用 JavaScript 表达式

<div>{{message + 'hello world'}}</div>
<div v-bind:id="'text-' + message"></div>

指令

参数

一些指令能够接收一个 "参数" , 在指令名称之后以冒号表示.

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

在这里, href 是参数, url 是 JavaScript 表达式, 其值来自 Vue 实例中, 一旦该 url 发生了变化, 那么 href 属性的值也会相应地发生变化

动态参数

<a v-bind:[attributeName]="url"></a>
<div v-bind:[theEventName]="func"></div>

如果 Vue 实例有一个 data 属性为 attributeName , 其对应的值为 "href" , 那么这个绑定等价于 v-bind:href 如果 Vue 实例有一个 data 属性为 theEventName , 其对应的值为 "click" , 那么这个绑定等价与 v-on:click