VUE官方文档学习---模板语法

最新推荐文章于 2023-07-10 18:20:38 发布

再敲一行就睡觉

最新推荐文章于 2023-07-10 18:20:38 发布

阅读量160

点赞数 3

分类专栏： Vue官方文档学习文章标签： vue javascript 前端

本文链接：https://blog.csdn.net/One_punchman_zxl/article/details/117448285

版权

Vue官方文档学习专栏收录该内容

14 篇文章 2 订阅

订阅专栏

title: VUE官方文档学习—模板语法
date: 2021-6-2 15:09:45
author: Xilong88
tags: Vue

模板语法

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

虚拟DOM上一节的末尾记录了。

这里Vue也提供了JSX语法可以直接写渲染函数，也就是不用Vue的模板

点这里查看 JSX

插值

文本

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

这种双大括号叫做**“Mustache”语法**

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

这就是响应式

也可以通过v-once指令来一次性插值，也就是插值处内容不跟随数据改变。

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

原始 HTML

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

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

在这里插入图片描述
用了v-html之后，该标签的内部会被插入html代码，为data里面的rawHtml转换成的html代码。

用户提供的内容，不能用插值:

在这里插入图片描述
Attribute

Html的attribute要用v-bind来绑定data值：

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

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

使用 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 } }}

在这里插入图片描述
这里能访问Math，Date对象，但是访问不到window

指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
比如：

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

就是v-if能根据seen的值来插入和移除<p>元素

动态参数

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

<!--
注意，参数表达式的写法存在一些约束，如之后的“对动态参数表达式的约束”章节所述。
-->
<a v-bind:[attributeName]="url"> ... </a>

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

这里又有一个问题，attributeName中的大写会被自动转化为小写，所以在data中属性名称要全小写才行。
比如上面就应该在data里面写：attributename:‘href’

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

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

这里也一样，eventName在data里面要写成全小写，但是方法名称doSomething不用。

对动态参数的值的约束

动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

在这里插入图片描述
为null属性不会显示：

在这里插入图片描述
对动态参数表达式的约束

动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。

<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

这会触发一个编译警告

变通的办法是使用没有空格或引号的表达式，或用计算属性替代这种复杂表达式。

修饰符
修饰符 (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>