【Vue】03_模板语法

模板语法

插值

文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值

无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。

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

一次性地插值

<span v-once>这个将不会改变: {{ msg }}</span>

原始html

双大括号会将数据解释为普通文本，而非 HTML 代码。

输出真正的 HTML，你需要使用 v-html

参考

Attribute

Mustache 语法不能作用在 HTML attribute

• 应该使用 v-bind 指令

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

<!-- 而不是 -->
<div id={{dynamicId}}></div>

使用javascript表达式

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

{{ number + 1 }}

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

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

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

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

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

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

指令

更多指令

1. 指令

指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

2. 动态参数

3. 修饰符

更多修饰符

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

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit">...</form>

更多例子

v-model本质上是个语法糖，其实现原理包含两个步骤

1. 通过v-bind绑定一个value属性
2. 通过v-on指令给当前元素绑定input事件

学习参考

缩写

v-bind

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

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

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

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

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>