Vue学习记录02-优快云博客

本文链接：https://blog.youkuaiyun.com/cwtlw/article/details/143630025

声明式渲染

我们将用到一个Vue单文件组件（Single-FileComponent,缩写为SFC)。单文件组件是一种可复用的代码组织形式，它将从属于同一个组件的 HTML、CSS 和 JavaScript 封装在使用 .vue 后缀的文件中。

Vue 的核心功能是声明式渲染：通过扩展于标准 HTML 的模板语法，我们可以根据 JavaScript 的状态来描述 HTML 应该是什么样子的。当状态改变时，HTML 会自动更新。

能在改变时触发更新的状态被称为是响应式的。可以通过Vue的reactive()API来声明响应式状态，由reactive()创建的对象其行为与普通对象一样。

import { reactive } from 'vue'

const counter = reactive({
  count: 0
})

console.log(counter.count) // 0

reactive()只适用于对象（包括数组和内置类型，例如Map和Set)。而ref()可以接受任何值类型。ref会返回一个对象，通过.value属性暴露其内部值。

import { ref } from 'vue'

const message = ref('Hello World!')

console.log(message.value) // "Hello World!"

目前声明的对象值只能在控制台中打印，如果想让其值显示在页面上，需要为<script>添加setup变为<script setup>，并借助双花括号语法，渲染动态文本。

<h1>{{ message }}</h1>
<p>Count is: {{ counter.count }}</p>

注意：在页面中访问message的ref时不需要使用.value:它会被自动解包，让使用更简单。

在双花括号中的内容并不只限于标识符或路径——我们可以使用任何有效的 JavaScript 表达式。

<h1>{{ message.split('').reverse().join('') }}</h1>

文本插值

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：

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

双大括号标签会被替换为相应组件实例中 msg 属性的值。同时每次 msg 属性更改时它也会同步更新。

原始 HTML

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

v-html作用是在当前组件实例上，将此元素的 innerHTML 与 rawHtml 属性保持同步。

这里我们遇到了一个新的概念。这里看到的v-html attribute 被称为一个指令。指令由 v- 作为前缀，表明它们是一些由 Vue 提供的特殊 attribute。它们将为渲染的 DOM 应用特殊的响应式行为。span 的内容将会被替换为 rawHtml 属性的值，插值为纯 HTML——数据绑定将会被忽略。

(建议：在网站上动态渲染任意 HTML 是非常危险的，因为这非常容易造成 XSSl漏洞。请仅在内容安全可信时再使用 v-html，并且永远不要使用用户提供的 HTML 内容。）

Attribute 绑定

双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind命令：

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

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

（小建议：这里推荐用谷歌浏览器进行前端开发学习，因为我的电脑换新了，还没来的及装，所以暂时用Edge展示）

简写：

因为v-bind非常常用，所以Vue提供了特定的简写语法：

<div :id="dynamicId"></div>

开头为 : 的 attribute 可能和一般的 HTML attribute 看起来不太一样，但它的确是合法的 attribute 名称字符，并且所有支持 Vue 的浏览器都能正确解析它。此外，他们不会出现在最终渲染的 DOM 中。

同名简写：

仅支持 3.4 版本及以上
如果 attribute 的名称与绑定的 JavaScript 值的名称相同，那么可以进一步简化语法，省略 attribute 值：

<!-- 与 :id="id" 相同 -->
<div :id></div>

<!-- 这也同样有效 -->
<div v-bind:id></div>

布尔值Attribute

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

v-bind在这种场景下的行为略有不同：

<button :disabled="isButtonDisabled">Button</button>

如果为true，则表示这个按钮不可用。

如果为false，则表示按钮可用。

当isButtonDisabled为真值或一个空字符串 (即 <button disabled="">) 时，元素会包含这个disabled attribute。而当其为其他假值时 attribute 将被忽略。

动态绑定多个值

如果你有像这样的一个包含多个 attribute 的 JavaScript 对象：

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green'
}

通过不带参数的v-bind，你可以将它们绑定到单个元素上：

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

使用JavaScript表达式

至此，我们仅在模板中绑定了一些简单的属性名。但是 Vue 实际上在所有的数据绑定中都支持完整的 JavaScript 表达式：

{{ number + 1 }}

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

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

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

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

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

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

仅支持表达式

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

因此，下面的例子都是无效的：

<!-- 这是一个语句，而非表达式 -->
{{ var a = 1 }}

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

调用函数

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

<time :title="toTitleDate(date)" :datetime="date">
  {{ formatDate(date) }}
</time>

受限的全局访问

模板中的表达式将被沙盒化，仅能够访问到有限的全局对象列表。该列表中会暴露常用的内置全局对象，比如Math和Date。

没有显式包含在列表中的全局对象将不能在模板内表达式中访问，例如用户附加在 window 上的属性。然而，你也可以自行在 app.config.globalProperties 上显式地添加它们，供所有的 Vue 表达式使用。

指令Directives

指令是带有v-前缀的特殊attribute。Vue提供了许多内置指令。指令 attribute 的期望值为一个 JavaScript 表达式一个指令的任务是在其表达式的值变化时响应式地更新 DOM。以v-if为例：

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

这里，v-if指令会基于表达式seen的值的真假来移除/插入该<p>元素。

参数Arguments

某些指定会需要一个“参数”，在指令名后通过一个冒号隔开做标识。例如用v-bind指令来响应式地更新一个HTML attribute:

这里的href就是一个参数，它告诉v-bind指令将表达式url的值绑定到元素的href attribute上。在简写中，参数前的一切（例如v-bind:)都会被缩进为一个 : 字符。

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

这里的参数是要监听的事件名称：click。v-on有一个相应的缩写，即@字符。