VUE模板语法

最新推荐文章于 2021-08-12 08:57:54 发布

bLaCk2333

最新推荐文章于 2021-08-12 08:57:54 发布

阅读量243

点赞数

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/qq_34400242/article/details/105518141

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

Vue.js使用HTML模板语法，将模板编译成虚拟DOM渲染函数。文本插值通过{{ }}实现，v-once用于一次性插值。v-html用于插入编译后的HTML，但要注意防止XSS攻击。v-bind用于动态绑定属性，支持布尔属性和JS表达式。指令如v-if、v-for和v-bind有参数、动态参数和修饰符，允许更灵活的DOM操作。v-on的缩写@和v-bind的缩写:简化了代码。

摘要由CSDN通过智能技术生成

由于Vue.js 使用了基于 HTML 的模板语法，所以能被遵循规范的浏览器和 HTML 解析器解析。
并且在底层实现上，vue将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

插值

文本插值

使用双大括号{{ }}实现文本插值，即文本数据绑定
通过使用 v-once 指令，也能执行一次性地插值，当数据改变时，插值处的内容不会更新。

原始html

如果需要插入编译后的html而不是纯文本，需要在html文件所需要插入html的标签上使用v-html指令，表示此处将插入html。例如：

<p v-html="rawHtml"</p>

p标签中将会被插入属性值为rawHtml的html元素。

注意：不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位。

因为v-html是直接更新元素的innerHTML，vue当中的模板基于render机制，而v-html当中的是字符串，所以模板和v-html不能混用。

为了防止XSS 攻击。尽量只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

标签属性

使用v-bind指令为标签绑定属性：v-bind:属性=" "
对于布尔属性(只要存在就意味着值为 true)例如;

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

小坑：只有isButtonDisabled为false、null、undefined时，按钮点击才有效，如果为：“false”、""(空字符串)也是有效的。

使用js表达式

简单算数运算：±*/
多元运算：？：
函数运算：message.split(’’).reverse().join(’’)

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

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

指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

<p v-if="seen">现在你看到我了</p>

这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除

元素。

参数

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

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

动态参数

从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数。例如：

<a v-bind:[attributeName]="url"> ... </a>

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data 属性 attributeName，其值为 “href”，那么这个绑定将等价于 v-bind:href

同样地，可以使用动态参数为一个动态的事件名绑定处理函数：

<a v-on:[eventName]="doSomething"> ... </a>

当 eventName 的值为 “focus” 时，v-on:[eventName] 将等价于 v-on:focus

动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。

在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写：

修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

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

缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。当在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时，v- 前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

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>