跳至主要內容

模板语法

Guitar大约 2 分钟

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

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

如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。

模板语法: 是 Vue 特定的，能在模板中使用的语法。

文本插值

最常见的是使用胡子语法（“Mustache”语法）完成文本插值。

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

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

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

为表述方便，把data的选项值称为变量。

{{}}允许的内容：

  1. 在data中声明的变量、函数等都可以。

  2. 常量。

  3. 合法的javascript表达式。（运算、函数调用是允许的，声明、流控制是无效的。

    {{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

模板表达式都被放在沙盒中，只能访问全局变量的一个白名单。在模板表达式中试图访问用户定义的全局变量是不被允许的。

白名单如下：

Infinity,undefined,NaN,

isFinite,isNaN,

parseFloat,parseInt,
decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,

Math,Number,Date,Array,Object,Boolean,String,RegExp,
Map,Set,JSON,Intl,

require（Node.js的一个内置函数）

使用白名单的变量：

<h1>{{Date}}</h1>
<h1>{{Date.now()}}</h1>
<h1>{{Math}}</h1>
<h1>{{Math.ceil(3.14)}}</h1>
  • 为表述方便，将{{}}允许的内容统称为vue表达式，或表达式。即{{vue表达式}}。

HTML插值

胡子语法将数据解释为普通文本，渲染HTML文本文本需要使用 v-html 指令：

<p>Using v-html directive: <span v-html="rawHtml"></span></p>
  • 在站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

属性Attribute绑定

为一个标签（element）绑定属性，需要使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>
Copyright ©2024-present Guitar