引言
原文: http://blog.duhbb.com/2022/02/11/translation-of-template-syntax-in-vue-3-offiicial-doc/
欢迎访问我的博客: http://blog.duhbb.com/
主要介绍了Vue3中的模板的相关语句, 组件实例中的数据属性以及事件触发如何能在模板中响应式的更新以及体现, 另外还介绍了很多以v-开头的特殊的属性, 也就是Vue3中的指令, 以后再看到那些奇奇怪怪的语法就不会感到陌生了.
Vue3官方文档翻译之模板语法
文本插入?
interpolation: 插话；添加内容；<数>插值
在文本插入中最基本的方式是使用"Mustache"语法(也就是双花括号, 其实就是用来占位滴):
<span>Message: {{ msg }}</span>
这个mustache标签将会被msg的属性所替代, 也就是只要msg的值有所改变, mustache标签中的内容也会跟着变.
P.S. 我是不是记得{{}}好像被废弃了?
原始HTML
{{}} 会将数据解释为纯文本, 而不是HTML. 为了输出真实的HTML, 需要使用v-html指令:
<p>Using text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
嘿, 伙计们, 我们遇到了新的知识了.
这里的 v-html 属性被称之为指令. 指令以v-开头来表名她们是Vue提供的特殊的属性. 正如你所想的那样(谁知道你怎么想的呢), 这些指令在DOM渲染的时候会有特殊的作用.
这里 v-html的作用是让元素的innerHTML随实例的rawHtml的属性而更新.
span标签中的内容会被rawHtml属性所替换, 并且会被解释为HTML.
注意, 不要用v-html来组建模板, 因为Vue不是一个字符串模板引擎, 组件是构成UI复用和组成的基本单元.
P.S. 没太搞明白这句话, 就是让我们少用v-html?
少用
v-html, 尤其是不要随意渲染用户的内容, 只渲染我们信得过的东西, 否则等着被xss公鸡吧!
属性绑定
mustache 不能用在 HTML 的属性中, 这时你应该使用 v-bind 指令:
<div v-bind:id="dynamicId"></div>
v-bind 指令让元素的 id 和组件的 dynamicId 属性保持同步. 如果待绑定的值是 null 或者 undefined 的话, 属性将会从被渲染的元素中移除.
缩写
因为 v-bind 使用得太多了, 因此我们提供了缩写语法形式:
<div :id="dynamicId"></div>
虽然这看上去有点奇怪, 但是实际上只要字符有效, Vue支持的浏览器都可以解析正确的解析她.
另外, 她并不会出现在最后渲染的标记中, 这种缩写的形式是可选的.
在后面的文档中, 我们将都会使用缩写形式.
布尔属性
v-bind 在这种情况下有点特别:
<button :disabled="isButtonDisabled">Button</button>
如果 isButtonDisable 的值为真的话, disable 将会被包含进来属性中.
如果是空字符串也会被包含进来, 而其他的false值则不会让标签包含此属性.
动态绑定多个属性
如果你有多个属性需要绑定, 比如:
const objectOfAttrs = {
id: 'container',
class: 'wrapper'
}
你可以使用一个元素就可以绑定:
<div v-bind="objectOfAttrs"></div>
使用JavaScript表达式
至今为止, 哎, 我们只是绑定了简单的属性值.
But, 实际上我们支持强大的JavaScript表达式:
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div :id="`list-${id}`"></div>
这个表达式将在当前组件的作用域内作为JavaScript的表达式求值.
在Vue模板中, JavaScript表达式可以用在如下的位置中:
- 文本插值(mustaches)
- 任何Vue指令的属性值(特别是以
v-开头的属性值)
仅用表达式
每个绑定只能绑定单一的表达式, 所以下面的是无效的:
<!-- 这是一个语句, 而不是一个表达式 -->
{{ var a = 1 }}
<!-- 流程控制也不生效, 你得使用三元表达式 -->
{{ if (ok) { return message } }}
调用函数
在绑定表达式中是可以使用组件暴露的方法的哟!
<span :title="toTitleDate(date)">
{{ formatDate(date) }}
</span>
绑定表达式中使用的函数在每次组件更新的时候都会被调用, 因此这些函数不应该有任何的副作用, 否则你懂的, 就炸了, 比如修改数据或者触发异步的操作.
限制全局访问
模板中的表达式是在沙箱中执行的, 她只能访问有限的全局变量. 这个list通常暴露内置的全局对象, 比如 Math 和 Date.
全局对象并没有显式得包含在list中, 例如用户在window中附加的属性, 但是你可以显式地将为所有的Vue表达式定义全局对象, 并将其添加到 app.config.globalProperties中.
指令
指令是以 v- 开头的特殊属性. Vue提供了很多的内置属性, 包括 v-html 和 v-bind.
指令属性的值应当是单个JavaScript表达式(v-for, v-on和v-slot例外, 后面将会单独讨论).
指令的任务是在表达式的值改变后, 将组件的数据响应地更新到DOM中.
以 v-if 为例:
<p v-if="seen">Now you see me</p>
这里 v-if 会根据表达式 seen 的值来决定是移除还是插入<p>.
参数
有些指令可以接受一个参数, 通过在指令名后面加一个冒号.
例如, v-bind 指令用于响应式地更新HTML属性:
<a v-bind:href="url"> ... </a>
<!-- shorthand -->
<a :href="url"> ... </a>
这里 href 是参数, 告诉 v-bind将元素的href属性绑定在表达式url上.
另一个例子是 v-on 指令, 她用于监听 DOM 事件:
<a v-on:click="doSomething"> ... </a>
<!-- shorthand -->
<a @click="doSomething"> ... </a>
v-on 是为数不多的拥有缩写的指令, 可以缩写为@.
动态参数
也可以使用中括号包裹起来的JavaScript表达式:
<!--
Note that there are some constraints to the argument expression,
as explained in the "Dynamic Argument Expression Constraints" section below.
-->
<a v-bind:[attributeName]="url"> ... </a>
<!-- shorthand -->
<a :[attributeName]="url"> ... </a>
这里的 attributeName 将会被当作JavaScript表达式动态的求值, 而她的最终值将会被作为参数的值.
比如, 你的组件中有个数据属性, attributeName, 她的值是 "href", 那么这个绑定会被当作 v-bind:href.
类似的, 你可以使用动态参数将handler绑定到动态时间名上:
<a v-on:[eventName]="doSomething"> ... </a>
<!-- shorthand -->
<a @[eventName]="doSomething">
在这个例子中, 如果 eventName 的值是 "focus", 那么 v-on:[eventName] 就等价于 v-on:focus.
动态参数值的限制
动态参数最后的求值应当是一个字符串, 如果有异常的话就是 null.
这个特殊的 null 值表示会显式得移除这个绑定.
任何其他得非字符串得值都将会触发警告.
动态参数得语法限制
动态参数表达式有一些语法限制, 因为会包含某些字符, 比如空格和引号, 作为HTML得属性名都是不合法得.
比如, 如下的绑定就是不合法的:
<!-- This will trigger a compiler warning. -->
<a :['foo' + bar]="value"> ... </a>
如果你需要传入一个复杂的动态参数, 最好是使用computed property.
当使用DOM模板(也就是直接用HTML文件写的模板), 你应该避免key中出现大写字符, 因为浏览器会coerce属性变成小写的.
<a :[someAttr]="value"> ... </a>
在DOM template中, 上面的将会被转变成为 :[someattr].
如果你的组件有一个 "someAttr" 属性, 而不是"someattr", 你的代码就会出错了.
修饰器
修饰器是一种特殊的用点号表示的后缀, 表名指令应该以一种特殊的方式绑定.
例如, .prevent 修饰器告诉 v-on 指令在触发事件的时候, 先调用event.preventDefault().
<form @submit.prevent="onSubmit">...</form>
你将会在 v-on 和 v-model中看到修饰器的例子.
最后我们来看一下指令的完整语法格式:
图片来自: https://vuejs.org/guide/essentials/template-syntax.html#directives
结束语
原文: http://blog.duhbb.com/2022/02/11/translation-of-template-syntax-in-vue-3-offiicial-doc/
欢迎访问我的博客: http://blog.duhbb.com/
主要介绍了Vue3中的模板的相关语句, 组件实例中的数据属性以及事件触发如何能在模板中响应式的更新以及体现, 另外还介绍了很多以v-开头的特殊的属性, 也就是Vue3中的指令, 以后再看到那些奇奇怪怪的语法就不会感到陌生了.