【Vue.js】Vue官方文档学习-模板语法_vue花括号里写html

一、插值

文本

mustache语法

数据绑定最基本的形式。
mustache”语法：双花括号的文本插值，将数据中的 HTML 转为纯文本后再进行插值。
< span >Message: {{ msg }}< /span >
mustache 标签将会被替换为 data 对象上对应的 msg 属性的值。
只要绑定的数据对象上的 msg 属性发生改变，插值内容也会随之更新。

v-once指令

执行一次性插值。
当数据改变时，插值内容不会随之更新，也将影响到该节点上的其他所有绑定。

<span v-once>这里的值永远不会改变：{{ msg }}</span>
1
2

原始HTML（Raw HTML）

v-html指令：输出真正的 HTML。

<p>使用双花括号语法：{{ rawHtml }}</p>
<p>使用 v-html 指令：<span v-html="rawHtml"></span></p>
1
2

span 中的内容，将会被替换为 rawHtml 属性的值，并且作为原始 HTML 插入 ，会忽略解析属性值中的数据绑定。
无法使用 v-html 来组合局部模板，这是因为 Vue 不是基于字符串的模板引擎。
动态渲染任意的 HTML 是非常危险的，这很容易导致网站受到 XSS 攻击。
请只对可信内容使用 HTML 插值，绝对不要对用户提供的内容使用 HTML 插值。

属性

使用 v-bind 指令。
不能在 Vue 模板中的 HTML 属性上使用双花括号语法。

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

使用JavaScript表达式

Vue.js 能够支持通过完整的 JavaScript 表达式，将模板与任意的数据绑定在一起。

{{ number + 1 }}

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

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

<div v-bind:id="'list-' + id"></div>
1
2
3
4
5
6
7

这些表达式将在所属的 Vue 实例的数据作用域下，作为 JavaScript 取值。
有个限制是每个绑定都只能包含单个表达式，所以以下示例都无法运行：

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

<!-- 流控制也无法运行，请使用三元表达式 -->
{{ if (ok) { return message } }}
1
2
3
4
5

二、指令

指令是带有 v- 前缀的特殊属性。
指令属性的值期望接收的是单个 JavaScript 表达式（v-for 是例外情况）。
当表达式的值改变时，将其产生的影响效果响应式地作用于 DOM。

参数

一些指令能够接收一个“参数”，在指令名称之后以 : 表示。
例如，v-bind 指令可以用于响应式地更新 HTML 属性：

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

这里 href 是参数，告知 v-bind 指令将元素的 href 属性与表达式 url 的值绑定在一起。

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

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

这里，参数是要监听事件的名称。

修饰符

修饰符是以 . 表示的特殊后缀，表明应当以某种特殊方式绑定指令。
例如，.prevent 修饰符告诉 v-on 指令，在触发事件后调用 event.preventDefault()：

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

简写

为什么要使用简写？

对于一些频繁用到的指令来说，v-会感到使用繁琐。
在构建由 Vue.js 管理所有模板的单页面应用程序时，v- 前缀也变得没那么重要了。
因此，Vue.js 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

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

<!-- 简写 -->
<a :href="url"> ... </a>
1
2
3
4
5

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

<!-- 简写 -->
<a @click="doSomething"> ... </a>
1
2
3
4
5