vue模板语法

最新推荐文章于 2022-09-02 19:59:19 发布

mysonghushu

最新推荐文章于 2022-09-02 19:59:19 发布

阅读量224

点赞数

分类专栏： vue 文章标签： vue模板语法

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

模板语法

Vue.js使用基于HTML的模板语法，允许您以声明方式将呈现的DOM绑定到基础Vue实例的数据。所有Vue.js模板都是有效的HTML，可以通过符合规范的浏览器和HTML解析器进行解析。

在引擎盖下，Vue将模板编译为Virtual DOM渲染功能。结合反应系统，Vue能够智能地计算出重新渲染的最小数量的组件，并在应用程序状态发生变化时应用最少量的DOM操作。

如果您熟悉Virtual DOM概念并且更喜欢JavaScript的原始功能，您还可以直接编写渲染函数而不是模板，并提供可选的JSX支持。

插补

文本

最基本的数据绑定形式是使用“Mustache”语法（双花括号）的文本插值：

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

mustache标记将替换msg为相应数据对象上的属性值。每当数据对象的msg属性发生更改时，它也会更新。

您还可以使用v-once指令执行不会更新数据更改的一次性插值，但请记住，这也会影响同一节点上的任何其他绑定：

<span v-once>This will never change: {{ 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
的内容span将与的值替换rawHtml属性，解释为普通的HTML -数据绑定被忽略。请注意，您不能用于v-html组合模板部分，因为Vue不是基于字符串的模板引擎。相反，组件是UI重用和组合的基本单元。

在您的网站上动态呈现任意HTML可能非常危险，因为它很容易导致XSS漏洞。只有在信任的内容，并使用HTML插值从未对用户提供的内容。

属性

Mustaches不能在HTML属性中使用。相反，使用v-bind指令：

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

对于boolean属性来说，存在值为true的情况，而v-bind工作有点不同。在这个例子中：

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

如果isButtonDisabled具有的值是 null，undefined或者false，所述disabled属性甚至不会被包括在呈现的元件。

使用JavaScript表达式

到目前为止，我们只绑定了模板中的简单属性键。但是Vue.js实际上支持所有数据绑定中JavaScript表达式的全部功能：

{{ number + 1 }}

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

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

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

这些表达式将在所有者Vue实例的数据范围内作为JavaScript进行评估。一个限制是每个绑定只能包含一个单一的表达，所以下面将不工作：

<!-- this is a statement, not an expression: -->
{{ var a = 1 }}

<!-- flow control won't work either, use ternary expressions -->
{{ if (ok) { return message } }}

模板表达式是沙箱的，只能访问全局变量的白名单，如Math和Date。您不应尝试在模板表达式中访问用户定义的全局变量。

指令

指令是带v-前缀的特殊属性。指令属性值应该是单个JavaScript表达式（除了v-for稍后将讨论）。指令的作用是在其表达式的值发生变化时，将副作用反应性地应用于DOM。让我们回顾一下我们在介绍中看到的例子：

<p v-if="seen">Now you see me</p>

这里，v-if指令将

根据表达式值的真实性删除/插入元素seen。

参数

某些指令可以采用“参数”，在指令名称后用冒号表示。例如，该v-bind指令用于反应性更新HTML属性：

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

这href是参数，它告诉v-bind指令将元素的href属性绑定到表达式的值url。

另一个例子是v-on指令，它监听DOM事件：

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

这里的参数是要监听的事件名称。我们也将更详细地讨论事件处理。

动态参数

2.6.0+中的新功能

从版本2.6.0开始，也可以通过用方括号包装它来在指令参数中使用JavaScript表达式：

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

这里attributeName将动态评估为JavaScript表达式，其评估值将用作参数的最终值。例如，如果您的Vue实例具有数据属性attributeName，其值为"href"，则此绑定将等效于v-bind:href。

同样，您可以使用动态参数将处理程序绑定到动态事件名称：

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

同样，例如，当eventName值是等于。"focus"v-on:[eventName]v-on:focus

动态参数值约束

除了null。之外，动态参数应该计算为字符串。特殊值null可用于显式删除绑定。任何其他非字符串值都将触发警告。

动态参数表达式约束

动态参数表达式具有一些语法约束，因为某些字符在HTML属性名称中是无效的，例如空格和引号。使用in-DOM模板时，还需要避免使用大写键。

例如，以下内容无效：

<!-- This will trigger a compiler warning. -->
<a v-bind:['foo' + bar]="value"> ... </a>

解决方法是使用不带空格或引号的表达式，或者使用计算属性替换复杂表达式。

此外，如果您使用的是in-DOM模板（直接用HTML文件编写的模板），您必须知道浏览器会将属性名称强制为小写：

<!-- This will be converted to v-bind:[someattr] in in-DOM templates. -->
<a v-bind:[someAttr]="value"> ... </a>

修饰符

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

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

稍后您将看到改性剂的其他例子，对于v-on和为v-model，当我们探究这些功能。

速记

该v-前缀作为在你的模板识别Vue的特定属性的视觉线索。当您使用Vue.js将动态行为应用于某些现有标记时，这很有用，但对于某些常用指令可能会感到冗长。同时，v-当您构建SPA时，对前缀的需求变得不那么重要了，其中Vue管理每个模板。因此，Vue为两个最常用的指令提供了特殊的缩写，v-bind并且v-on：

v-bind 速记

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

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

<!-- shorthand with dynamic argument (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on 速记

<!-- full syntax -->
<a v-on:click="doSomething"> ... </a>

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

<!-- shorthand with dynamic argument (2.6.0+) -->
<a @[event]="doSomething"> ... </a>