水墨风格的网站,长春网站建设方案,关键词竞价广告,百度平台推广模板语法
Vue 使用一种基于 HTML 的模板语法#xff0c;使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML#xff0c;可以被符合规范的浏览器和 HTML 解析器解析。
在底层机制中#xff0c;Vue 会将模板编译成高度优化…模板语法
Vue 使用一种基于 HTML 的模板语法使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML可以被符合规范的浏览器和 HTML 解析器解析。
在底层机制中Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统当应用状态变更时Vue 能够智能地推导出需要重新渲染的组件的最少数量并应用最少的 DOM 操作。
如果你对虚拟 DOM 的概念比较熟悉并且偏好直接使用 JavaScript你也可以结合可选的 JSX 支持直接手写渲染函数而不采用模板。但请注意这将不会享受到和模板同等级别的编译时优化。
如下图 在vue单文件中红线框出的 template标签以及内部的子标签,会被vue编译成高度优化的JavaScript代码,模板语法不仅限于此,在下面将详细的介绍
文本插值
最基本的数据绑定形式是文本插值它使用的是“Mustache”语法 (即双大括号) 双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。
原始 HTML
双大括号会将数据解释为纯文本而不是 HTML。若想插入 HTML需要使用 v-html 指令 如下示例 rawHtml是一段html文本,直接使用文本插值的rawHtml被直接当作文本处理了 只有用v-html指令才正确渲染
这里我们遇到了一个新的概念。这里看到的 v-html attribute 被称为一个指令。指令由 v- 作为前缀表明它们是一些由 Vue 提供的特殊 attribute你可能已经猜到了它们将为渲染的 DOM 应用特殊的响应式行为。这里我们做的事情简单来说就是在当前组件实例上将此元素的 innerHTML 与 rawHtml 属性保持同步。
tips:你不能在同一个标签上,同时使用v-html指令与文本插值语法
div的内容将会被替换为 rawHtml 属性的值插值为纯 HTML——数据绑定将会被忽略。注意你不能使用 v-html 来拼接组合模板因为 Vue 不是一个基于字符串的模板引擎。在使用 Vue 时应当使用组件作为 UI 重用和组合的基本单元。
如下示例 v-html 将覆盖元素子项。
在网站上动态渲染任意 HTML 是非常危险的因为这非常容易造成 XSS 漏洞。请仅在内容安全可信时再使用 v-html并且永远不要使用用户提供的 HTML 内容。
Attribute 绑定
双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute应该使用 v-bind 指令
v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined那么该 attribute 将会从渲染的元素上移除。
渲染如下: 值为null的dynamicId2 属性被移除了
Attribute 简写
因为 v-bind 非常常用我们提供了特定的简写语法 渲染结果如下 开头为 : 的 attribute 可能和一般的 HTML attribute 看起来不太一样但它的确是合法的 attribute 名称字符并且所有支持 Vue 的浏览器都能正确解析它。此外他们不会出现在最终渲染的 DOM 中。,注意治理说的不会出现在最终渲染的 DOM 中的意思是v-bind
同名简写
如果 attribute 的名称与绑定的 JavaScript 值的名称相同那么可以进一步简化语法省略 attribute 值
templatediv :id/div
/templatescript setup
import { ref } from vue;
const id ref(id);
/scriptstyle
/style这与在 JavaScript 中声明对象时使用的属性简写语法类似。请注意这是一个只在 Vue 3.4 及以上版本中可用的特性。
布尔型 Attribute
布尔型 attribute 依据 true / false 值来决定 attribute 是否应该存在于该元素上。disabled 就是最常见的例子之一。 v-bind 在这种场景下的行为略有不同 渲染结果为 当 isButtonDisabled 为真值或一个空字符串 (即 ) 时元素会包含这个 disabled attribute。而当其为其他假值时 attribute 将被忽略。
在JavaScript的逻辑评估中空字符串“”确实是一个假值falsy value。但是在HTML的disabled属性上下文中当你通过JavaScript或Vue.js绑定一个值为空字符串的属性时浏览器通常会将该属性视为存在即使它的值是一个空字符串。这意味着在HTML中实际上会呈现为一个禁用的按钮因为disabled属性存在不论它的值是什么。
动态绑定多个值
如果你有像这样的一个包含多个 attribute 的 JavaScript 对象 通过不带参数的 v-bind你可以将它们绑定到单个元素上
渲染结果是符合预期的
使用 JavaScript 表达式
至此我们仅在模板中绑定了一些简单的属性名。但是 Vue 实际上在所有的数据绑定中都支持完整的 JavaScript 表达式
{{ number 1 }}{{ ok ? YES : NO }}{{ message.split().reverse().join() }}div :idlist-${id}/div这些表达式都会被作为 JavaScript 以当前组件实例为作用域解析执行。
在 Vue 模板内JavaScript 表达式可以被使用在如下场景上
在文本插值中 (双大括号)在任何 Vue 指令 (以 v- 开头的特殊 attribute) attribute 的值中
仅支持表达式
每个绑定仅支持单一表达式也就是一段能够被求值的 JavaScript 代码。一个简单的判断方法是是否可以合法地写在 return 后面。
因此下面的例子都是无效的
!-- 这是一个语句而非表达式 --
{{ var a 1 }}!-- 条件控制也不支持请使用三元表达式 --
{{ if (ok) { return message } }}调用函数
可以在绑定的表达式中使用一个组件暴露的方法
time :titletoTitleDate(date) :datetimedate{{ formatDate(date) }}
/timetips:绑定在表达式中的方法在组件每次更新时都会被重新调用因此不应该产生任何副作用比如改变数据或触发异步操作。
受限的全局访问
模板中的表达式将被沙盒化仅能够访问到有限的全局对象列表。该列表中会暴露常用的内置全局对象比如 Math 和 Date。
没有显式包含在列表中的全局对象将不能在模板内表达式中访问例如用户附加在 window 上的属性。然而你也可以自行在 app.config.globalProperties 上显式地添加它们供所有的 Vue 表达式使用。
指令 Directives
指令是带有 v- 前缀的特殊 attribute。Vue 提供了许多内置指令包括上面我们所介绍的 v-bind 和 v-html。
指令 attribute 的期望值为一个 JavaScript 表达式 (除了少数几个例外即之后要讨论到的 v-for、v-on 和 v-slot)。一个指令的任务是在其表达式的值变化时响应式地更新 DOM。以 v-if 为例 这里v-if 指令会基于表达式 seen 的值的真假来移除/插入该 元素。
参数 Arguments
某些指令会需要一个“参数”在指令名后通过一个冒号隔开做标识。例如用 v-bind 指令来响应式地更新一个 HTML attribute 这里 href 就是一个参数它告诉 v-bind 指令将表达式 url 的值绑定到元素的 href attribute 上。在简写中参数前的一切 (例如 v-bind:) 都会被缩略为一个 : 字符。
另一个例子是 v-on 指令它将监听 DOM 事件 这里的参数是要监听的事件名称click。v-on 有一个相应的缩写即 字符。我们之后也会讨论关于事件处理的更多细节。
动态参数
同样在指令参数上也可以使用一个 JavaScript 表达式需要包含在一对方括号内
!--
注意参数表达式有一些约束
参见下面“动态参数值的限制”与“动态参数语法的限制”章节的解释
--
a v-bind:[attributeName]url ... /a!-- 简写 --
a :[attributeName]url ... /a这里的 attributeName 会作为一个 JavaScript 表达式被动态执行计算得到的值会被用作最终的参数。举例来说如果你的组件实例有一个数据属性 attributeName其值为 “href”那么这个绑定就等价于 v-bind:href。
相似地你还可以将一个函数绑定到动态的事件名称上
a v-on:[eventName]doSomething ... /a!-- 简写 --
a [eventName]doSomething ... /a在此示例中当 eventName 的值是 “focus” 时v-on:[eventName] 就等价于 v-on:focus。
动态参数值的限制
动态参数中表达式的值应当是一个字符串或者是 null。特殊值 null 意为显式移除该绑定。其他非字符串的值会触发警告。
动态参数语法的限制
动态参数表达式因为某些字符的缘故有一些语法限制比如空格和引号在 HTML attribute 名称中都是不合法的。例如下面的示例
!-- 这会触发一个编译器警告 --
a :[foo bar]value ... /a如果你需要传入一个复杂的动态参数我们推荐使用计算属性替换复杂的表达式也是 Vue 最基础的概念之一我们很快就会讲到。
当使用 DOM 内嵌模板 (直接写在 HTML 文件里的模板) 时我们需要避免在名称中使用大写字母因为浏览器会强制将其转换为小写
a :[someAttr]value ... /a如果你需要传入一个复杂的动态参数我们推荐使用计算属性替换复杂的表达式也是 Vue 最基础的概念之一我们很快就会讲到。
当使用 DOM 内嵌模板 (直接写在 HTML 文件里的模板) 时我们需要避免在名称中使用大写字母因为浏览器会强制将其转换为小写
a :[someAttr]value ... /a上面的例子将会在 DOM 内嵌模板中被转换为 :[someattr]。如果你的组件拥有 “someAttr” 属性而非 “someattr”这段代码将不会工作。单文件组件内的模板不受此限制。
修饰符 Modifiers
修饰符是以点开头的特殊后缀表明指令需要以一些特殊的方式被绑定。例如 .prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault()
form submit.preventonSubmit.../form之后在讲到 v-on 和 v-model 的功能时你将会看到其他修饰符的例子。
最后在这里你可以直观地看到完整的指令语法
