Vue的模板语法

一、插值

1.文本

data中定义属性，结构中通过插值表达式可以直接使用该属性

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

双括号标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。

2.v-html(原始HTML)

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html

3.v-bind(属性绑定)

<button v-bind:disabled="isButtonDisabled">Button</button>

另一种写法：

<button :disabled="isButtonDisabled">Button</button>

如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 <button> 元素中。

4.javaScript表达式

Vue.js 都提供了完全的 JavaScript 表达式支持

{{ number + 1 }}

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

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

<div v-bind:id="'list-' + id"></div>
复制代码

二、指令

v-bind 指令可以用于响应式地更新 HTML attribute：

另一个例子是 v-on 指令，它用于监听 DOM 事件：

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

另一个写法：

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

methods中定义doSomething这个方法

修饰符

.prevent 阻止默认事件

.stop 阻止冒泡

.self 阻止自身事件

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。