【Vue.js】Vue官方文档学习-模板语法

一、插值

文本

mustache语法

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

v-once指令

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

<span v-once>这里的值永远不会改变:{{ msg }}span>

原始HTML(Raw HTML)

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

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

【Vue.js】Vue官方文档学习-模板语法_第1张图片

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

属性

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

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

使用JavaScript表达式

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

{{ number + 1 }}

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

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

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

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


{{ var a = 1 }}


{{ if (ok) { return message } }}

二、指令

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

参数

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

"url"> ... 

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

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

"doSomething"> ... 

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

修饰符

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

"onSubmit"> ...

简写

为什么要使用简写?

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


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


<a :href="url"> ... a>

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


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

你可能感兴趣的:(学习笔记)