day1、Vue Learing

一. 文本插值

css 复制代码
<span>Message: {{ msg }}</span>

二. 原始 HTML

双大括号会将数据解释为纯文本,而不是 HTML。若想插入 HTML,你需要使用 v-html 指令

js 复制代码
<p>Using text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
js 复制代码
Using text interpolation: <span style="color: red">This should be red.</span>

Using v-html directive: This should be red.

span 的内容将会被替换为 rawHtml 属性的值,插值为纯 HTML------数据绑定将会被忽略。 注意,你不能使用 v-html 来拼接组合模板,因为 Vue 不是一个基于字符串的模板引擎。在使用 Vue 时,应当使用组件作为 UI 重用和组合的基本单元。

三. Attribute 绑定

响应式地绑定一个 attribute,应该使用 v-bind 指令

js 复制代码
<div v-bind:id="dynamicId"></div>
简写
<div :id="dynamicId"></div>

v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined,那么该 attribute 将会从渲染的元素上移除。

布尔型 Attribute

布尔型 attribute 依据 true / false 值来决定 attribute 是否应该存在于该元素上。disabled 就是最常见的例子之一。

js 复制代码
<button :disabled="isButtonDisabled">Button</button>

动态绑定多个值

一个包含多个 attribute 的 JavaScript 对象,通过不带参数的 v-bind,你可以将它们绑定到单个元素上:

js 复制代码
const objectOfAttrs = { id: 'container', class: 'wrapper' }

<div v-bind="objectOfAttrs"></div>

这种写法可以优化代码。

三. 使用 JavaScript 表达式

vue 实际上在所有的数据绑定中都支持完整的 JavaScript 表达式.

在 Vue 模板内,JavaScript 表达式可以被使用在如下场景上:

  • 在文本插值中 (双大括号)
  • 在任何 Vue 指令 (以 v- 开头的特殊 attribute) attribute 的值中

这些表达式都会被作为 JavaScript ,以当前组件实例为作用域解析执行。

js 复制代码
{{ number + 1 }}

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

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

<div :id="`list-${id}`"></div>

小扩展: 计算属性的诞生可以解决在模版中表达式写入,从而避免模版上代码臃肿

仅支持表达式

每个绑定仅支持单一表达式 ,也就是一段能够被求值的 JavaScript 代码。一个简单的判断方法是是否可以合法地写在 return 后面。

下面的例子都是无效的:

js 复制代码
<!-- 这是一个语句,而非表达式 -->
{{ var a = 1 }}

<!-- 条件控制也不支持,请使用三元表达式 -->
{{ if (ok) { return message } }}

调用函数

可以在绑定的表达式中使用一个组件暴露的方法:

js 复制代码
<time :title="toTitleDate(date)" :datetime="date"> 
{{ formatDate(date) }} 
</time>

受限的全局访问

模板中的表达式将被沙盒化,仅能够访问到有限的全局对象列表

没有显式包含在列表中的全局对象将不能在模板内表达式中访问,例如用户附加在 window 上的属性。 列如:window.alert(1)

然而,你也可以自行在 app.config.globalProperties 上显式地添加它们,供所有的 Vue 表达式使用。

app.config.globalProperties 替代了 vue2中 Vue.prototype

四. 指令 Directives

指令是带有 v- 前缀的特殊 attribute。 一个指令的任务是在其表达式的值变化时响应式地更新 DOM。 v-if、v-on、v-for

参数 Arguments

某些指令会需要一个"参数",在指令名后通过一个冒号隔开做标识。

js 复制代码
<a v-bind:href="url"> ... </a> 
<!-- 简写 --> <a :href="url"> ... </a>

动态参数

同样在指令参数上也可以使用一个 JavaScript 表达式,需要包含在一对方括号内:

js 复制代码
<a v-bind:[attributeName]="url"> ... </a>
<!-- 简写 --> 
<a :[attributeName]="url"> ... </a>

这里的 attributeName 会作为一个 JavaScript 表达式被动态执行,计算得到的值会被用作最终的参数。举例来说,如果你的组件实例有一个数据属性 attributeName,其值为 "href",那么这个绑定就等价于 v-bind:href

相似地,你还可以将一个函数绑定到动态的事件名称上:

js 复制代码
<a v-on:[eventName]="doSomething"> ... </a>

<!-- 简写 -->
<a @[eventName]="doSomething">

eventName 的值是 "focus" 时,v-on:[eventName] 就等价于 v-on:focus

动态参数值的限制

动态参数中表达式的值应当是一个字符串,或者是 null。特殊值 null 意为显式移除该绑定。其他非字符串的值会触发警告。

动态参数语法的限制

动态参数表达式因为某些字符的缘故有一些语法限制,比如空格和引号,在 HTML attribute 名称中都是不合法的。例如下面的示例:

js 复制代码
<!-- 这会触发一个编译器警告 -->
<a :['foo' + bar]="value"> ... </a>

如果你需要传入一个复杂的动态参数,我们推荐使用计算属性替换复杂的表达式

当使用 DOM 内嵌模板 (直接写在 HTML 文件里的模板) 时,我们需要避免在名称中使用大写字母,因为浏览器会强制将其转换为小写:

js 复制代码
<a :[someAttr]="value"> ... </a>

上面的例子将会在 DOM 内嵌模板中被转换为 :[someattr]。如果你的组件拥有 "someAttr" 属性而非 "someattr",这段代码将不会工作。单文件组件内的模板受此限制。

修饰符 Modifiers

修饰符是以点开头的特殊后缀,表明指令需要以一些特殊的方式被绑定。例如 .prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault()

ini 复制代码
<form @submit.prevent="onSubmit">...</form>
相关推荐
22x艾克斯1 分钟前
Web Notifications API-让网页也能像QQ一样实现消息通知
前端
想你的风吹到了瑞士9 分钟前
变量提升&函数提升
前端·javascript·vue.js
生椰拿铁You21 分钟前
12 —— Webpack中向前端注入环境变量
前端
Huazzi.1 小时前
免费好用的静态网页托管平台全面对比介绍
前端·网络·github·web
吃土少女古拉拉1 小时前
前端和后端
前端·学习笔记
寒雒2 小时前
【Python】实战:实现GUI登录界面
开发语言·前端·python
独上归州2 小时前
Vue与React的Suspense组件对比
前端·vue.js·react.js·suspense
Komorebi⁼2 小时前
Vue核心特性解析(内含实践项目:设置购物车)
前端·javascript·vue.js·html·html5
明月清风徐徐2 小时前
Vue实训---0-完成Vue开发环境的搭建
前端·javascript·vue.js
SameX2 小时前
HarmonyOS Next 企业数据备份与恢复策略
前端·harmonyos