vue脚手架

• @vue/cil是vue官方提供的一个全局模块包(得到vue命令)，此包用来创建vue脚手架项目
• 脚手架目录和代码分析
  • 

vue安装全局包

全局安装@vue/cil模块包

1

yarn global add @vue/cli

查看是否安装成功

@vue/cli创建项目

1.创建项目

1
2

# 创建项目
vue create vuecli-demo

注意：项目名字中不能有大写字母。中文和特殊符号

2.开始创建，成功如下

3.进入项目文件输入yarn serve启动项目，浏览器输出如下代表成功

项目结构

创建一个 Vue3应用

API——setup函数

setup是Vue3中的一个新的配置项，值是一个函数，他是组合式API”表演的舞台”，组件中所用到所有数据，方法、计算属性、监视….等等，均配置在setup中

基本使用

setup() 钩子是在组件中使用组合式 API 的入口，通常只在以下情况下使用：

1. 需要在非单文件组件中使用组合式 API 时。
2. 需要在基于选项式 API 的组件中集成基于组合式 API 的代码时。

注意

对于结合单文件组件使用的组合式 API，推荐通过 `` 以获得更加简洁及符合人体工程学的语法。

我们可以使用响应式 API 来声明响应式的状态，在 setup() 函数中返回的对象会暴露给模板和组件实例。其他的选项也可以通过组件实例来获取 setup() 暴露的属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<script>
import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)

    // 返回值会暴露给模板和其他的选项式 API 钩子
    return {
      count
    }
  },

  mounted() {
    console.log(this.count) // 0
  }
}
</script>

<template>
  <button @click="count++">{{ count }}</button>
</template>

setup() 自身并不含对组件实例的访问权，即在 setup() 中访问 this 会是 undefined。你可以在选项式 API 中访问组合式 API 暴露的值，但反过来则不行。

setup语法糖

对于setup函数，我们最基本的用法是

1
2
3
4
5
6
7
8

setup(){
    //定义变量
    let a =ref(10)
    //返回(暴露变量)
return {
    a
    }
}

现在我引入setup语法糖，写法变得很简洁简单

1
2
3
4
5

<script setup>
	let a = ref(10)
    //写入一些函数...等等内容
    .....
</script>

那么上面这种写法，就相当于最基本使用的写法，可以看到简洁了不少

应用实例

每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例：

1
2
3
4
5

import { createApp } from 'vue'

const app = createApp({
  /* 根组件选项 */
})

根组件

我们传入 createApp 的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。

如果你使用的是单文件组件，我们可以直接从另一个文件中导入根组件。

1
2
3
4
5

import { createApp } from 'vue'
// 从一个单文件组件中导入根组件
import App from './App.vue'

const app = createApp(App)

挂载应用

应用实例必须在调用了 .mount() 方法后才会渲染出来。该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串：

1

<div id="app"></div>

1

app.mount('#app')

应用根组件的内容将会被渲染在容器元素里面。容器元素自己将不会被视为应用的一部分

.mount() 方法应该始终在整个应用配置和资源注册完成后被调用。同时请注意，不同于其他资源注册方法，它的返回值是根组件实例而非应用实例。

模板语法

Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。

在底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。

如果你对虚拟 DOM 的概念比较熟悉，并且偏好直接使用 JavaScript，你也可以结合可选的 JSX 支持直接手写渲染函数而不采用模板。但请注意，这将不会享受到和模板同等级别的编译时优化。

文本插值

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

template

1

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

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

原始 HTML

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

1
2
3
4
5

<script setup>
    let rawHtml = '<span style="color: red">This should be red.</span>'
</script>
<p>Using text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

1
2
3
4

//而使用vue中的{{}}不会渲染html，所以会显示纯文本
Using text interpolation: <span style="color: red">This should be red.</span>
使用v-html会解析span标签，所以下面的会被渲染成红色
Using v-html directive: This should be red.

这里我们遇到了一个新的概念。这里看到的 v-html attribute 被称为一个指令。指令由 v- 作为前缀，表明它们是一些由 Vue 提供的特殊 attribute，你可能已经猜到了，它们将为渲染的 DOM 应用特殊的响应式行为。这里我们做的事情简单来说就是：在当前组件实例上，将此元素的 innerHTML 与 rawHtml 属性保持同步。

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

Attribute 绑定

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

1

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

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

简写

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

1

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

开头为 : 的 attribute 可能和一般的 HTML attribute 看起来不太一样，但它的确是合法的 attribute 名称字符，并且所有支持 Vue 的浏览器都能正确解析它。此外，他们不会出现在最终渲染的 DOM 中。简写语法是可选的，但相信在你了解了它更多的用处后，你应该会更喜欢它。

同名简写 (要求vue版本为3.4+)

如果 attribute 的名称与绑定的 JavaScript 值的名称相同，那么可以进一步简化语法，省略 attribute 值：

1
2
3
4
5

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

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

这与在 JavaScript 中声明对象时使用的属性简写语法类似。请注意，这是一个只在 Vue 3.4 及以上版本中可用的特性。

布尔型 Attribute

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

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

1

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

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

动态绑定多个值

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

1

const objectOfAttrs = {  id: 'container',  class: 'wrapper' }

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

1

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

使用 JavaScript 表达式

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

1
2
3
4
5
6
7

{{ number + 1 }}

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

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

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

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

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

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

仅支持表达式

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

1
2
3
4
5

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

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

调用函数

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

1
2
3

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

指令 Directives

指令是带有 v- 前缀的特殊 attribute。Vue 提供了许多内置指令，包括上面我们所介绍的 v-bind 和 v-html。

指令 attribute 的期望值为一个 JavaScript 表达式 (除了少数几个例外，即之后要讨论到的 v-for、v-on 和 v-slot)。一个指令的任务是在其表达式的值变化时响应式地更新 DOM。以 v-if 为例：

1

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

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

参数 Arguments

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

1
2
3
4

<a v-bind:href="url"> ... </a>

<!-- 简写 -->
<a :href="url"> ... </a>

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

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

1
2
3
4

<a v-on:click="doSomething"> ... </a>

<!-- 简写 -->
<a @click="doSomething"> ... </a>

这里的参数是要监听的事件名称：click。v-on 有一个相应的缩写，即 @ 字符。我们之后也会讨论关于事件处理的更多细节。

动态参数

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

1
2
3
4
5
6
7
8

<!--
注意，参数表达式有一些约束，
参见下面“动态参数值的限制”与“动态参数语法的限制”章节的解释
-->
<a v-bind:[attributeName]="url"> ... </a>

<!-- 简写 -->
<a :[attributeName]="url"> ... </a>

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

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

1
2
3
4

<a v-on:[eventName]="doSomething"> ... </a>

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

在此示例中，当 eventName 的值是 "focus" 时，v-on:[eventName] 就等价于 v-on:focus。

1
2
3
4

<a v-on:[eventName]="doSomething"> ... </a>

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

在此示例中，当 eventName 的值是 "focus" 时，v-on:[eventName] 就等价于 v-on:focus。

动态参数值的限制

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

动态参数语法的限制

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

1
2

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

如果你需要传入一个复杂的动态参数，我们推荐使用计算属性替换复杂的表达式，也是 Vue 最基础的概念之一，我们很快就会讲到。

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

1

<a :[someAttr]="value"> ... </a>

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

修饰符 Modifiers

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

1

<form @submit.prevent="onSubmit">...</form>

之后在讲到 v-on 和 v-model 的功能时，你将会看到其他修饰符的例子。

最后，在这里你可以直观地看到完整的指令语法：

响应式基础

声明响应式状态

ref()

在组合式 API 中，推荐使用 ref() 函数来声明响应式状态：

语法：let xxx = ref(初始值)

1
2
3
4

//引入ref函数
import { ref } from 'vue'

const count = ref(0)

ref() 接收参数，并将其包裹在一个带有 .value 属性的 ref 对象中返回：

1
2
3
4
5
6
7

const count = ref(0)

console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

要在组件模板中访问 ref，请从组件的 setup() 函数中声明并返回它们：

1
2
3
4
5
6
7
8
9
10
11
12
13

import { ref } from 'vue'

export default {
  // `setup` 是一个特殊的钩子，专门用于组合式 API。
  setup() {
    const count = ref(0)

    // 将 ref 暴露给模板
    return {
      count
    }
  }
}

1

<div>{{ count }}</div>

注意：

• 在模板中使用 ref 时，我们不需要附加 .value。为了方便起见，当在模板中使用时，ref 会自动解包
• 在JS中操作模板中的数据时，需要xxx.value,而模板直接使用即可
• 比如对于 let name = ref(‘张三’)来说,name 不是响应式的,name.value 是响应式的。
• ref定义的是基本类型数据，也可以定义数据类型

reactive()

特别强调：reactive()只能定义对象类型响应式数据

还有另一种声明响应式状态的方式，即使用 reactive() API。与将内部值包装在特殊对象中的 ref 不同，reactive() 将使对象本身具有响应性：

1
2
3
4
5
6
7
8
9
10
11

<script setup>
  //定义对象类型响应式数据
  let car = reactive({
    brand:'奔驰',
    price:100
  })

  function changePrice(){
    car.price+=10
  }
</script>

在模板中使用：

1
2
3
4

<div class="test">
 车的型号是：{{ car.brand }},车的价格是:{{ car.price }}万
  <button @click="changePrice">改变车的价格</button>
</div>

ref()对比reactive()

reactive() 的局限性

reactive() API 有一些局限性：

1. 有限的值类型：它只能用于对象类型 (对象、数组和如 Map、Set 这样的集合类型)。它不能持有如 string、number 或 boolean 这样的原始类型。
2. 不能替换整个对象：由于 Vue 的响应式跟踪是通过属性访问实现的，因此我们必须始终保持对响应式对象的相同引用。这意味着我们不能轻易地“替换”响应式对象，因为这样的话与第一个引用的响应性连接将丢失
3. 对解构操作不友好：当我们将响应式对象的原始类型属性解构为本地变量时，或者将该属性传递给函数时，我们将丢失响应性连接

由于这些限制，我们建议使用 ref() 作为声明响应式状态的主要 API。

toRefs和toRef

toRefs可以把一个由reactive代理的响应式对象里面的每一个Key-value变成由ref代理的响应式数据

图解：

声明方法

要为组件添加方法，我们需要用到 methods 选项。它应该是一个包含所有方法的对象：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    // 在其他方法或是生命周期中也可以调用方法
    this.increment()
  }
}

Vue 自动为 methods 中的方法绑定了永远指向组件实例的 this。这确保了方法在作为事件监听器或回调函数时始终保持正确的 this。你不应该在定义 methods 时使用箭头函数，因为箭头函数没有自己的 this 上下文。

1
2
3
4
5
6
7

export default {
  methods: {
    increment: () => {
      // 反例：无法访问此处的 `this`!
    }
  }
}

和组件实例上的其他属性一样，方法也可以在模板上被访问。在模板中它们常常被用作事件监听器：

1

<button @click="increment">{{ count }}</button>

在上面的例子中，increment 方法会在 <button> 被点击时调用。

深层响应性

在 Vue 中，默认情况下，状态是深度响应的。这意味着当改变嵌套对象或数组时，这些变化也会被检测到：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

export default {
  data() {
    return {
      obj: {
        nested: { count: 0 },
        arr: ['foo', 'bar']
      }
    }
  },
  methods: {
    mutateDeeply() {
      // 以下都会按照期望工作
      this.obj.nested.count++
      this.obj.arr.push('baz')
    }
  }
}

DOM 更新时机

当你修改了响应式状态时，DOM 会被自动更新。但是需要注意的是，DOM 更新不是同步的。Vue 会在“next tick”更新周期中缓冲所有状态的修改，以确保不管你进行了多少次状态修改，每个组件都只会被更新一次。

要等待 DOM 更新完成后再执行额外的代码，可以使用 nextTick() 全局 API：

1
2
3
4
5
6
7
8
9
10
11

import { nextTick } from 'vue'

export default {
  methods: {
    async increment() {
      this.count++
      await nextTick()
      // 现在 DOM 已经更新了
    }
  }
}

有状态方法

在某些情况下，我们可能需要动态地创建一个方法函数，比如创建一个预置防抖的事件处理器：

1
2
3
4
5
6
7
8
9
10

import { debounce } from 'lodash-es'

export default {
  methods: {
    // 使用 Lodash 的防抖函数
    click: debounce(function () {
      // ... 对点击的响应 ...
    }, 500)
  }
}

不过这种方法对于被重用的组件来说是有问题的，因为这个预置防抖的函数是有状态的：它在运行时维护着一个内部状态。如果多个组件实例都共享这同一个预置防抖的函数，那么它们之间将会互相影响。

要保持每个组件实例的防抖函数都彼此独立，我们可以改为在 created 生命周期钩子中创建这个预置防抖的函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

export default {
  created() {
    // 每个实例都有了自己的预置防抖的处理函数
    this.debouncedClick = _.debounce(this.click, 500)
  },
  unmounted() {
    // 最好是在组件卸载时
    // 清除掉防抖计时器
    this.debouncedClick.cancel()
  },
  methods: {
    click() {
      // ... 对点击的响应 ...
    }
  }
}

计算属性

基础示例

模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。比如说，我们有这样一个包含嵌套数组的对象：

1
2
3
4
5
6
7
8

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

我们想根据 author 是否已有一些书籍来展示不同的信息：

1
2

<p>Has published books:</p>
<span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>

这里的模板看起来有些复杂。我们必须认真看好一会儿才能明白它的计算依赖于 author.books。更重要的是，如果在模板中需要不止一次这样的计算，我们可不想将这样的代码在模板里重复好多遍。

因此我们推荐使用计算属性来描述依赖响应式状态的复杂逻辑。这是重构后的示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<script setup>
import { reactive, computed } from 'vue'

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

// 一个计算属性 ref
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script>

<template>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>

1
2
3

<p>Has published books:</p>
<!--我们的计算属性publishedBooksMessage()返回了臃肿的表达式，而我们在使用时直接使用计算属性的名称即可-->
<span>{{ publishedBooksMessage }}</span>

我们在这里定义了一个计算属性 publishedBooksMessage。

更改此应用的 data 中 books 数组的值后，可以看到 publishedBooksMessage 也会随之改变。

在模板中使用计算属性的方式和一般的属性并无二致。Vue 会检测到 this.publishedBooksMessage 依赖于 this.author.books，所以当 this.author.books 改变时，任何依赖于 this.publishedBooksMessage 的绑定都将同时更新。

计算属性缓存 vs 方法

你可能注意到我们在表达式中像这样调用一个函数也会获得和计算属性相同的结果：

1

<p>{{ calculateBooksMessage() }}</p>

1
2
3
4

// 组件中
function calculateBooksMessage() {
  return author.books.length > 0 ? 'Yes' : 'No'
}

若我们将同样的函数定义为一个方法而不是计算属性，两种方式在结果上确实是完全相同的，然而，不同之处在于计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。这意味着只要 author.books 不改变，无论多少次访问 publishedBooksMessage 都会立即返回先前的计算结果，而不用重复执行 getter 函数。

这也解释了为什么下面的计算属性永远不会更新，因为 Date.now() 并不是一个响应式依赖：

js

1

const now = computed(() => Date.now())

Class 与 Style 绑定

数据绑定的一个常见需求场景是操纵元素的 CSS class 列表和内联样式。因为 class 和 style 都是 attribute，我们可以和其他 attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 class 和 style 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组。

绑定 HTML class

绑定对象

我们可以给 :class (v-bind:class 的缩写) 传递一个对象来动态切换 class：

1

<div :class="{ active: isActive }"></div>

上面的语法表示 active 是否存在取决于数据属性 isActive 的真假值。

你可以在对象中写多个字段来操作多个 class。此外，:class 指令也可以和一般的 class attribute 共存。举例来说，下面这样的状态：

1
2

const isActive = ref(true)
const hasError = ref(false)

1
2
3
4

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

这将渲染：

1

<div class="static active"></div>

当 isActive 或者 hasError 改变时，class 列表会随之更新。举例来说，如果 hasError 变为 true，class 列表也会变成 "static active text-danger"。

还可以写成下面这样

1
2
3
4
5
6

const classObject = reactive({
  active: true,
  'text-danger': false
})
//模板中写
<div :class="classObject"></div>

这将渲染：

1

<div class="active"></div>

我们也可以绑定一个返回对象的计算属性。这是一个常见且很有用的技巧：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

data() {
  return {
    isActive: true,
    error: null
  }
},
computed: {
  classObject() {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

1

<div :class="classObject"></div>

绑定数组

我们可以给 :class 绑定一个数组来渲染多个 CSS class：

1
2
3
4
5
6

data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

1

<div :class="[activeClass, errorClass]"></div>

渲染的结果是：

1

<div class="active text-danger"></div>

如果你也想在数组中有条件地渲染某个 class，你可以使用三元表达式：

1

<div :class="[isActive ? activeClass : '', errorClass]"></div>

errorClass 会一直存在，但 activeClass 只会在 isActive 为真时才存在。

然而，这可能在有多个依赖条件的 class 时会有些冗长。因此也可以在数组中嵌套对象：

1

<div :class="[{ activeClass: isActive }, errorClass]"></div>

在组件上使用

对于只有一个根元素的组件，当你使用了 class attribute 时，这些 class 会被添加到根元素上并与该元素上已有的 class 合并。

举例来说，如果你声明了一个组件名叫 MyComponent，模板如下：

1
2

<!-- 子组件模板 -->
<p class="foo bar">Hi!</p>

在使用时添加一些 class：

1
2

<!-- 在使用组件时 -->
<MyComponent class="baz boo" />

渲染出的 HTML 为：

1

<p class="foo bar baz boo">Hi!</p>

Class 的绑定也是同样的：

1

<MyComponent :class="{ active: isActive }" />

当 isActive 为真时，被渲染的 HTML 会是：

1

<p class="foo bar active">Hi!</p>

如果你的组件有多个根元素，你将需要指定哪个根元素来接收这个 class。你可以通过组件的 $attrs 属性来指定接收的元素：

1
2
3

<!-- MyComponent 模板使用 $attrs 时 -->
<p :class="$attrs.class">Hi!</p>
<span>This is a child component</span>

1

<MyComponent class="baz" />

这将被渲染为：

1
2

<p class="baz">Hi!</p>
<span>This is a child component</span>

绑定内联样式

绑定对象

:style 支持绑定 JavaScript 对象值，对应的是 HTML 元素的 style 属性：

1
2
3
4
5
6

data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}

1

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

直接绑定一个样式对象通常是一个好主意，这样可以使模板更加简洁：

1
2
3
4
5
6
7
8

data() {
  return {
    styleObject: {
      color: 'red',
      fontSize: '13px'
    }
  }
}

同样的，如果样式对象需要更复杂的逻辑，也可以使用返回样式对象的计算属性。

绑定数组

我们还可以给 :style 绑定一个包含多个样式对象的数组。这些对象会被合并后渲染到同一元素上：

1
2

<!-- 测试绑定数组 -->
<p :style="[arrStyle,arrStyle1]">测试绑定数组</p>

1
2
3
4
5
6
7
8
9
10
11
12

data(){
    return {
         //arrStyle
      arrStyle:{
        color:'blue',
        fontSize:'60px'
      },
      arrStyle1:{
        backgroundColor:'red'
      }
    }
}

自动前缀

当你在 :style 中使用了需要浏览器特殊前缀的 CSS 属性时，Vue 会自动为他们加上相应的前缀。Vue 是在运行时检查该属性是否支持在当前浏览器中使用。如果浏览器不支持某个属性，那么将尝试加上各个浏览器特殊前缀，以找到哪一个是被支持的。

样式多值

1

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

数组仅会渲染浏览器支持的最后一个值。在这个示例中，在支持不需要特别前缀的浏览器中都会渲染为 display: flex。

条件渲染

v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。

v-else

你也可以使用 v-else 为 v-if 添加一个“else 区块”。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<script>
export default {
  data() {
  	return {
	    awesome: true
  	}
	}
}
</script>

<template>
  <button @click="awesome = !awesome">切换awesome真假值</button>
	<!-- 如果真，则显示下面的内容 -->
	<h1 v-if="awesome">Vue is awesome!</h1>
	<!-- 否则，显示下面的内容 -->
	<h1 v-else>Oh no 😢</h1>
</template>

注意：一个 v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面，否则它将不会被识别。

v-else-if

顾名思义，v-else-if 提供的是相应于 v-if 的“else if 区块”。它可以连续多次重复使用：

1
2
3
4
5
6
7
8
9
10
11
12

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

和 v-else 类似，一个使用 v-else-if 的元素必须紧跟在一个 v-if 或一个 v-else-if 元素后面。

<template> 上的 v-if

1
2
3
4
5

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<script>
export default {
  data() {
  	return {
	  
			type:true
  	}
	},
	methods:{
		changeTypeValue(){
			this.type = !this.type
		
		}
	}
}

</script>

<template>
		<button @click="changeTypeValue"> 切换模板显示/隐藏</button>
<template v-if="type == true">
  <h1>Title</h1>
  <p>Paragraph 1</p
  <p>Paragraph 2</p>
</template>

v-else 和 v-else-if 也可以在 <template> 上使用。

v-show

另一个可以用来按条件显示一个元素的指令是 v-show。其用法基本一样：

1

<h1 v-show="ok">Hello!</h1>

不同之处在于 v-show 会在 DOM 渲染中保留该元素；v-show 仅切换了该元素上名为 display 的 CSS 属性。

v-show 不支持在 <template> 元素上使用，也不能和 v-else 搭配使用。

v-if 对比 v-show

v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。

v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。

相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。

总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。

v-if 和 v-for

当 v-if 和 v-for 同时存在于一个元素上的时候，v-if 会首先被执行。
提醒：不推荐同时使用v-if 和 v-for二者优先级不同

列表渲染

v-for

我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是要渲染的数组，而 item 是迭代项的别名：

1
2
3
4
5

data() {
  return {
    items: [{ message: 'Foo' }, { message: 'Bar' }]
  }
}

1
2
3

<li v-for="item in items">
  {{ item.message }}
</li>

完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script>
export default {
  data() {
  	return {
	    parentMessage: 'Parent',
    	items: [{ message: 'Foo' }, { message: 'Bar' }]
  	}
	}
}
</script>

<template>
	<li v-for="(item, index) in items">
  	{{ parentMessage }} - {{ index }} - {{ item.message }}
	</li>
</template>

v-for 变量的作用域和下面的 JavaScript 代码很类似：

1
2
3
4
5
6
7
8
9
10

const parentMessage = 'Parent'
const items = [
  /* ... */
]

items.forEach((item, index) => {
  // 可以访问外层的 `parentMessage`
  // 而 `item` 和 `index` 只在这个作用域可用
  console.log(parentMessage, item.message, index)
})

上面说明：V-for这个指令中的变量只能在该指令内使用。

注意 v-for 是如何对应 forEach 回调的函数签名的。实际上，你也可以在定义 v-for 的变量别名时使用解构，和解构函数参数类似：

1
2
3
4
5
6
7
8

<li v-for="{ message } in items">
  {{ message }}
</li>

<!-- 有 index 索引时 -->
<li v-for="({ message }, index) in items">
  {{ message }} {{ index }}
</li>

对于多层嵌套的 v-for，作用域的工作方式和函数的作用域很类似。每个 v-for 作用域都可以访问到父级作用域：

1
2
3
4
5

<li v-for="item in items">
  <span v-for="childItem in item.children">
    {{ item.message }} {{ childItem }}
  </span>
</li>

span标签的v-for是li标签v-for的儿子，所以span中可以访问到li标签中的item

你也可以使用 of 作为分隔符来替代 in，这更接近 JavaScript 的迭代器语法：

1

<div v-for="item of items"></div>

v-for 与对象

你也可以使用 v-for 来遍历一个对象的所有属性。遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定。

1
2
3
4
5
6
7
8
9

data() {
  return {
    myObject: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
}

1
2
3
4
5

<ul>
  <li v-for="value in myObject">
    {{ value }}
  </li>
</ul>

看下效果

可以通过提供第二个参数表示属性名 (例如 key)：

1
2
3

<li v-for="(value, key) in myObject">
  {{ key }}: {{ value }}
</li>

看下效果

第三个参数表示位置索引：

1
2
3

<li v-for="(value, key, index) in myObject">
  {{ index }}. {{ key }}: {{ value }}
</li>

看下效果

在 v-for 里使用范围值

v-for 可以直接接受一个整数值。在这种用例中，会将该模板基于 1...n 的取值范围重复多次。

1

<span v-for="n in 102">{{ n }}</span>

注意此处 n 的初值是从 1 开始而非 0。

<template> 上的 v-for

与模板上的 v-if 类似，你也可以在 <template> 标签上使用 v-for 来渲染一个包含多个元素的块。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<script>
export default {
  data() {
  	return {
			items:[{
				msg:'你好',
			}]
  	}
	}
}
</script>

<template>
<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>
</template>

v-for 与 v-if

当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名：

1
2
3
4
5
6
7

<!--
 这会抛出一个错误，因为属性 todo 此时
 没有在该实例上定义
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>

在外先包装一层 <template> 再在其上使用 v-for 可以解决这个问题 (这也更加明显易读)：

1
2
3
4
5

<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

通过 key 管理状态

Vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。

默认模式是高效的，但只适用于列表渲染输出的结果不依赖子组件状态或者临时 DOM 状态 (例如表单输入值) 的情况。

为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key 属性：

1
2
3

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

当你使用 <template v-for> 时，key 应该被放置在这个 <template> 容器上：

1
2
3

<template v-for="todo in todos" :key="todo.name">
  <li>{{ todo.name }}</li>
</template>

推荐在任何可行的时候为 v-for 提供一个 key attribute，除非所迭代的 DOM 内容非常简单 (例如：不包含组件或有状态的 DOM 元素)，或者你想有意采用默认行为来提高性能。

key 绑定的值期望是一个基础类型的值，例如字符串或 number 类型。不要用对象作为 v-for 的 key。

组件上使用 v-for

我们可以直接在组件上使用 v-for，和在一般的元素上使用没有区别 (别忘记提供一个 key)：

1

<MyComponent v-for="item in items" :key="item.id" />

但是，这不会自动将任何数据传递给组件，因为组件有自己独立的作用域。为了将迭代后的数据传递到组件中，我们还需要传递 props：

1
2
3
4
5
6

<todo-item
  v-for="(todo, index) in todos"
  :key="todo.id"                         
  :title="todo.title"
  @remove="todos.splice(index, 1)"
></todo-item>

在TodoItem组件中使用props来接收titile并渲染

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script>
export default {
    //接收title属性
	props: ['title'],
  emits: ['remove']
}
</script>

<template>
  <li>
      //渲染
    {{ title }}
    <button @click="$emit('remove')">Remove</button>
  </li>
</template>

数组变化侦测

操作数组的方法

Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括：

• push()：向数组的末尾添加一个或多个元素，并返回新的长度。

• pop()：删除数组中的最后一个元素，并返回该元素的值。

• shift()：删除数组中的第一个元素，并返回该元素的值。

• unshift()：在数组的开头添加一个或多个元素，并返回新的长度。

• splice()：这个方法可以用于删除、插入或替换数组中的元素。它接受至少两个参数：第一个参数是要操作的起始位置的索引，第二个参数是要删除的元素数量。可选的第三个参数及以后是你要插入到指定位置的新元素。

• sort()：对数组的元素进行排序，默认情况下按照字符串的Unicode码点顺序排序。如果你想自定义排序逻辑，可以传入一个比较函数作为参数。

  • 这里说明比较函数通常是下面这种写法

    1 2 3 4 5 6 7 8

    //升序 (a,b)=>{ return a-b } //降序 (a,b)=>{ return b-a }

• reverse()：反转数组中元素的顺序，第一个元素变成最后一个，最后一个变成第一个。

替换一个数组

变更方法，顾名思义，就是会对调用它们的原数组进行变更。相对地，也有一些不可变 (immutable) 方法，例如 filter()，concat() 和 slice()，这些都不会更改原数组，而总是返回一个新数组。当遇到的是非变更方法时，我们需要将旧的数组替换为新的：

filter() 方法创建一个新的数组，其包含通过所提供函数实现的测试的所有元素。

1
2
3

const numbers = [1, 2, 3, 4, 5, 6];
2const evenNumbers = numbers.filter(n => n % 2 === 0);
3console.log(evenNumbers); // 输出: [2, 4, 6]

concat() 方法用于合并两个或多个数组。此方法不会更改现有的数组，而是返回一个新的数组。

1
2
3
4

const array1 = ['a', 'b'];
2const array2 = ['c', 'd'];
3const combinedArray = array1.concat(array2);
4console.log(combinedArray); // 输出: ['a', 'b', 'c', 'd']

slice() 方法返回一个新的数组对象，它是原数组的一部分。你可以指定开始和结束的位置来截取数组的一部分，不会改变原数组。

1
2
3

const array = ['a', 'b', 'c', 'd', 'e'];
2const partOfArray = array.slice(1, 4);
3console.log(partOfArray); // 输出: ['b', 'c', 'd']

展示过滤或排序后的结果

有时，我们希望显示数组经过过滤或排序后的内容，而不实际变更或重置原始数据。在这种情况下，你可以创建返回已过滤或已排序数组的计算属性。

1
2
3
4
5
6
7
8
9
10

data() {
  return {
    numbers: [1, 2, 3, 4, 5]
  }
},
computed: {
  evenNumbers() {
    return this.numbers.filter(n => n % 2 === 0)
  }
}

1

<li v-for="n in evenNumbers">{{ n }}</li>

在计算属性不可行的情况下 (例如在多层嵌套的 v-for 循环中)，你可以使用以下方法：

1
2
3
4
5
6
7
8
9
10

data() {
  return {
    sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
  }
},
methods: {
  even(numbers) {
    return numbers.filter(number => number % 2 === 0)
  }
}

1
2
3

<ul v-for="numbers in sets">
  <li v-for="n in even(numbers)">{{ n }}</li>
</ul>

在计算属性中使用 reverse() 和 sort() 的时候务必小心！这两个方法将变更原始数组，计算函数中不应该这么做。请在调用这些方法之前创建一个原数组的副本：

1
2

- return numbers.reverse()
+ return [...numbers].reverse()

事件处理

监听事件

我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="handler" 或 @click="handler"。

事件处理器 (handler) 的值可以是：

1. 内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。
2. 方法事件处理器：一个指向组件上定义的方法的属性名或是路径。

内联事件处理器

把逻辑写在标签中，称为内联

内联事件处理器通常用于简单场景，例如：

1
2
3
4
5
6
7
8

<script setup>
	let counter = ref(0)
</script>

<template>
	<button @click="counter++">Add 1</button>
	<p>The button above has been clicked {{ counter }} times.</p>
</template>

方法事件处理器

随着事件处理器的逻辑变得愈发复杂，内联代码方式变得不够灵活。因此 v-on 也可以接受一个方法名或对某个方法的调用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<script setup>
	let name = ref('vue.js')
    
  	function  greet(event) {
      // `this` inside methods points to the current active instance
      alert(`Hello ${name}!`)
      // `event` is the native DOM event
      if (event) {
        alert(event.target.tagName)
      }
    }
</script>

<template>
	<button @click="greet">Greet</button>
</template>

方法事件处理器会自动接收原生 DOM 事件并触发执行。在上面的例子中，我们能够通过被触发事件的 event.target 访问到该 DOM 元素。

方法与内联事件判断

模板编译器会通过检查 v-on 的值是否是合法的 JavaScript 标识符或属性访问路径来断定是何种形式的事件处理器。举例来说，foo、foo.bar 和 foo['bar'] 会被视为方法事件处理器，而 foo() 和 count++ 会被视为内联事件处理器。

在内联处理器中调用方法

除了直接绑定方法名，你还可以在内联事件处理器中调用方法。这允许我们向方法传入自定义参数以代替原生事件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script>
export default {
  methods: {
	  say(message) {
    	alert(message)
  	}
	}
}
</script>

<template>
		<!--内联写法-->
	<button @click="say('hi')">Say hi</button>
  <button @click="say('what')">Say what</button>
</template>

在内联事件处理器中访问事件参数

1
2
3
4
5
6
7
8
9

<!-- 使用特殊的 $event 变量 -->
<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

<!-- 使用内联箭头函数 -->
<button @click="(event) => warn('Form cannot be submitted yet.', event)">
  Submit
</button>

1
2
3
4
5
6
7
8
9

methods: {
  warn(message, event) {
    // 这里可以访问 DOM 原生事件
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

事件修饰符

在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好。

为解决这一问题，Vue 为 v-on 提供了事件修饰符。修饰符是用 . 表示的指令后缀，包含以下这些：

• .stop
• .prevent
• .self
• .capture
• .once
• .passive

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>

<!-- 提交事件将不再重新加载页面 -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>

<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>

<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如：事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>

注意：

使用修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的。因此使用 @click.prevent.self 会阻止元素及其子元素的所有点击事件的默认行为，而 @click.self.prevent 则只会阻止对元素本身的点击事件的默认行为。

.capture、.once 和 .passive 修饰符与原生 addEventListener 事件相对应：

1
2
3
4
5
6
7
8
9
10

<!-- 添加事件监听器时，使用 `capture` 捕获模式 -->
<!-- 例如：指向内部元素的事件，在被内部元素处理前，先被外部处理 -->
<div @click.capture="doThis">...</div>

<!-- 点击事件最多被触发一次 -->
<a @click.once="doThis"></a>

<!-- 滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成 -->
<!-- 以防其中包含 `event.preventDefault()` -->
<div @scroll.passive="onScroll">...</div>

.passive 修饰符一般用于触摸事件的监听器，可以用来改善移动端设备的滚屏性能。

注意：

请勿同时使用 .passive 和 .prevent，因为 .passive 已经向浏览器表明了你不想阻止事件的默认行为。如果你这么做了，则 .prevent 会被忽略，并且浏览器会抛出警告。

按键修饰符

在监听键盘事件时，我们经常需要检查特定的按键。Vue 允许在 v-on 或 @ 监听按键事件时添加按键修饰符。

1
2
3

<!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->
<!--监听键盘按键抬起(keyup)的事件-->
<input @keyup.enter="submit" />

你可以直接使用 KeyboardEvent.key 暴露的按键名称作为修饰符，但需要转为 kebab-case 形式。

1
2

<!--@keyup时键盘抬起事件，"page-down"指的是键盘上的pageDown按键,意味着按下pageDown触发事件，抬起时触发事件onPageDown-->
<input @keyup.page-down="onPageDown" />

在上面的例子中，仅会在 $event.key(指按键) 为 'PageDown' 时调用事件处理。

按键别名

• .enter：回车
• .tab：Tab键
• .delete (捕获“Delete”和“Backspace”两个按键)
• .esc：ESC按键
• .space：空格
• .up：上箭头
• .down：下箭头
• .left：左箭头
• .right：右箭头

系统按键修饰符

你可以使用以下系统按键修饰符来触发鼠标或键盘事件监听器，只有当按键被按下时才会触发。

• .ctrl
• .alt
• .shift
• .meta

注意：

在 Mac 键盘上，meta 是 Command 键 (⌘)。在 Windows 键盘上，meta 键是 Windows 键 (⊞)。在 Sun 微机系统键盘上，meta 是钻石键 (◆)。在某些键盘上，特别是 MIT 和 Lisp 机器的键盘及其后代版本的键盘，如 Knight 键盘，space-cadet 键盘，meta 都被标记为“META”。在 Symbolics 键盘上，meta 也被标识为“META”或“Meta”。

举例来说：

1
2
3
4
5

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + 点击 -->
<div @click.ctrl="doSomething">Do something</div>

注意：

请注意，系统按键修饰符和常规按键不同。与 keyup 事件一起使用时，该按键必须在事件发出时处于按下状态。换句话说，keyup.ctrl 只会在你仍然按住 ctrl 但松开了另一个键时被触发。若你单独松开 ctrl 键将不会触发。

• 比如我们的ctrl c，ctrl v相信这么一说就都明白了。
• 通过@keyup.ctrl.c和@keyup.ctrl.v来绑定

.exact 修饰符

.exact 修饰符允许精确控制触发事件所需的系统修饰符的组合。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<script>
export default {
  methods: {
	  onclick() {
    
			alert('你好，你刚刚出发了ctrl事件！')
  	},
			  onclick1() {
    
			alert('你好，你刚刚出发了ctrl事件！')
  	},
			  onclick2() {
    
			alert('你好，你刚刚出发了ctrl事件！')
  	}
	}
}
</script>

<template>
	<!-- 按住ctrl，即使在按住别的按键，也可以触发该事件 -->
<button @click.ctrl="onclick">触发事件</button> <br/><br/>
<!-- 按住ctrl，但是这次如果同时按住了别的按键，该事件不会触发 -->
<button @click.ctrl.exact="onclick1">触发事件1</button><br/><br/>
<!-- 点击就会触发，意味着不需要按任何按键即可触发 -->
<button @click.exact="onclick2">触发事件2</button>
</template>

鼠标按键修饰符

• .left：默认情况下，如果不使用任何修饰符，Vue.js的鼠标事件监听器会响应所有的鼠标按钮。但是，.left修饰符确保只有在左键被按下或释放时才触发事件处理函数。
• .right：使用.right修饰符，事件处理函数仅在右键被按下或释放时触发。这对于创建上下文菜单或其他依赖右键操作的交互特别有用。
• .middle：.middle修饰符则确保只有在鼠标中键（通常是滚轮按钮）被按下或释放时才触发事件处理函数。这在需要监听滚轮点击的场景中很有用。

这些修饰符将处理程序限定为由特定鼠标按键触发的事件。

比如下面这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script>
export default {
  methods: {
    handleLeftClick(event) {
      console.log('左键点击事件:', event);
      // 在这里处理左键点击的逻辑
    }
  }
}
</script>

<template>
<div @click.left="handleLeftClick">点击我</div>
</template>

表单输入绑定

在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦：

1
2
3

<input
  :value="text"
  @input="event => text = event.target.value">

v-model 指令帮我们简化了这一步骤：

1

<input v-model="text">

另外，v-model 还可以用于各种不同类型的输入，<textarea>、<select> 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合：

• 文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件；
• <input type="checkbox">(复选框) 和 <input type="radio">(单选框) 会绑定 checked property 并侦听 change 事件；
• <select> 会绑定 value property 并侦听 change 事件。

注意：

v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。你应该在 JavaScript 中使用data 选项来声明该初始值。

也就是说，使用v-model绑定某个值时，该值必须在data函数中声明并返回给vue模板

基本用法

来看下面这段代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script>
export default {
	data(){
		return {
			//初始化message
			message: ''
		}
	}
}
</script>

<template>
<p>消息是：{{message}}</p>
<input v-model="message" placeholder="请输入你要打印的消息" type="text">
</template>

效果

多行文本

同样的道理，来看下面这段代码

1
2
3

<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message" placeholder="add multiple lines"></textarea>

效果和上面的是一样的

注意：

<textarea> 中是不支持插值表达式的。请使用 v-model 来替代：

1
2
3
4
5

<!-- 错误 -->
<textarea>{{ text }}</textarea>

<!-- 正确 -->
<textarea v-model="text"></textarea>

复选框

单一的复选框，绑定布尔类型值：

1
2
3
4
5
6
7
8

<script setup>
	let message = ref('')
</script>

<template>
<input v-model="message"  type="checkbox" id="checkbox" >
<label for="checkbox">{{message}}</label>
</template>

我们也可以将多个复选框绑定到同一个数组或集合的值：

1
2
3

<script setup>
	let checkedNames = ref([])
</script>

1
2
3
4
5
6
7
8
9
10
11
12

<template>
<div>Checked names: {{ checkedNames }}</div>

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
<label for="jack">Jack</label>

<input type="checkbox" id="john" value="John" v-model="checkedNames" />
<label for="john">John</label>

<input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
<label for="mike">Mike</label>
</template>

页面效果

在这个例子中，checkedNames 数组将始终包含所有当前被选中的框的value属性对应的值。关于value绑定，请详见值绑定小结

单选按钮

1
2
3
4
5
6
7
8
9
10
11
12
13

<script setup>
	let picked = ref([])
</script>

<template>
<div>Picked: {{ picked }}</div>

<input type="radio" id="one" value="One" v-model="picked" />
<label for="one">One</label>

<input type="radio" id="two" value="Two" v-model="picked" />
<label for="two">Two</label>
</template>

上面这段代码同样，效果也一样

选择器

单个选择器的示例如下：

1
2
3
4
5
6
7
8

<div>Selected: {{ selected }}</div>

<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

页面效果

注意

如果 v-model 表达式的初始值不匹配任何一个选择项，<select> 元素会渲染成一个“未选择”的状态。在 iOS 上，这将导致用户无法选择第一项，因为 iOS 在这种情况下不会触发一个 change 事件。因此，我们建议提供一个空值的禁用选项，如上面的例子所示。

多选 (值绑定到一个数组)：

只是比单选多个一个multiple属性

1
2
3
4
5
6
7

<div>Selected: {{ selected }}</div>

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

选择器的选项可以使用 v-for 动态渲染：

1
2
3
4
5
6
7
8
9
10
11
12

export default {
  data() {
    return {
      selected: 'A',
      options: [
        { text: 'One', value: 'A' },
        { text: 'Two', value: 'B' },
        { text: 'Three', value: 'C' }
      ]
    }
  }
}

1
2
3
4
5
6
7

<select v-model="selected">
  <option v-for="option in options" :value="option.value">
    {{ option.text }}
  </option>
</select>

<div>Selected: {{ selected }}</div>

页面效果

值绑定

对于单选按钮，复选框和选择器选项，v-model 绑定的值通常是静态的字符串 (或者对复选框是布尔值)：

1
2
3
4
5
6
7
8
9
10

<!-- `picked` 在被选择时是字符串 "a" -->
<input type="radio" v-model="picked" value="a" />

<!-- `toggle` 只会为 true 或 false -->
<input type="checkbox" v-model="toggle" />

<!-- `selected` 在第一项被选中时为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

但有时我们可能希望将该值绑定到当前组件实例上的动态数据。这可以通过使用 v-bind 来实现。此外，使用 v-bind 还使我们可以将选项值绑定为非字符串的数据类型。

复选框

1
2
3
4
5

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no" />

true-value 和 false-value 是 Vue 特有的 attributes，仅支持和 v-model 配套使用。这里 toggle 属性的值会在选中时被设为 'yes'，取消选择时设为 'no'。你同样可以通过 v-bind 将其绑定为其他动态值：

1
2
3
4
5

<input
  type="checkbox"
  v-model="toggle"
  :true-value="dynamicTrueValue"
  :false-value="dynamicFalseValue" />

注意：

true-value 和 false-value attributes 不会影响 value attribute，因为浏览器在表单提交时，并不会包含未选择的复选框。为了保证这两个值 (例如：“yes”和“no”) 的其中之一被表单提交，请使用单选按钮作为替代。

单选按钮

1
2

<input type="radio" v-model="pick" :value="first" />
<input type="radio" v-model="pick" :value="second" />

pick 会在第一个按钮选中时被设为 first，在第二个按钮选中时被设为 second。
效果

选择器选项

1
2
3
4

<select v-model="selected">
  <!-- 内联对象字面量 -->
  <option :value="{ number: 123 }">123</option>
</select>

v-model 同样也支持非字符串类型的值绑定！在上面这个例子中，当某个选项被选中，selected 会被设为该对象字面量值 { number: 123 }。

修饰符

.lazy

默认情况下，v-model 会在每次 input 事件后更新数据 (IME 拼字阶段的状态例外)。你可以添加 lazy 修饰符来改为在每次 change 事件后更新数据：

1
2

<!-- 在 "change" 事件后同步更新而不是 "input" -->
<input v-model.lazy="msg" />

.number

如果你想让用户输入自动转换为数字，你可以在 v-model 后添加 .number 修饰符来管理输入：

1

<input v-model.number="age" />

如果该值无法被 parseFloat() 处理，那么将返回原始值。

number 修饰符会在输入框有 type="number" 时自动启用。也就是说效果等同于下面这么写

1

<input v-model="age"  type="number"/>

parseFloat()，用于解析一个字符串并返回一个浮点数。如果字符串的开始部分不是一个有效的浮点数表示，则返回 NaN（Not-a-Number）。

下面是一组数据，能够更直观的感受该函数的用法

1
2
3
4
5
6

console.log(parseFloat("123.45")); // 输出：123.45
console.log(parseFloat("   67.89")); // 输出：67.89
console.log(parseFloat("100 apples")); // 输出：100
console.log(parseFloat("3.14e2")); // 输出：314
console.log(parseFloat("abc123")); // 输出：NaN
console.log(parseFloat("123abc")); // 输出：123

.trim

如果你想要默认自动去除用户输入内容中两端的空格，你可以在 v-model 后添加 .trim 修饰符：

1

<input v-model.trim="msg" />

生命周期钩子

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

注册周期钩子

举例来说，mounted 钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码：

1
2
3
4
5

export default {
  mounted() {
    console.log(`the component is now mounted.`)
  }
}

还有其他一些钩子，会在实例生命周期的不同阶段被调用，最常用的是 mounted、updated 和 unmounted。

所有生命周期钩子函数的 this 上下文都会自动指向当前调用它的组件实例。注意：避免用箭头函数来定义生命周期钩子，因为如果这样的话你将无法在函数中通过 this 获取组件实例。

生命周期图示

下面是实例生命周期的图表。你现在并不需要完全理解图中的所有内容，但以后它将是一个有用的参考。

生命周期选项

注意：使用生命周期钩子时，要手动引入对应的钩子，然后将回调函数当成参数写在钩子里面

onBeforeMount()

注册一个钩子，在组件被挂载之前被调用。

详细信息

当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。

这个钩子在服务端渲染时不会被调用。

1
2
3
4

import {onBeforeMount} from 'vue'
onBeforeMount(()=>{
    
})

onMounted

在组件被挂载之后调用。

• ​ 详细信息

  组件在以下情况下被视为已挂载：

  • 所有同步子组件都已经被挂载。(不包含异步组件或 <Suspense> 树内的组件)
  • 其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时，才可以保证组件 DOM 树也在文档中。

  这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用，或是在服务端渲染应用中用于确保 DOM 相关代码仅在客户端被调用。

  这个钩子在服务端渲染时不会被调用。

  1 2 3 4

  import {onMounted} from 'vue' onMounted(()=>{ //处理的逻辑 })

onBeforeUpdate

在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。

• 详细信息

  这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。

  这个钩子在服务端渲染时不会被调用。

  1 2 3 4

  import {onBeforeUpdate} from 'vue' onBeforeUpdate(()=>{ //逻辑 })

onUpdated

注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。

详细信息

父组件的更新钩子将在其子组件的更新钩子之后调用。

这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的。如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代。

这个钩子在服务端渲染时不会被调用。

警告：

不要在 updated 钩子中更改组件的状态，这可能会导致无限的更新循环！

1
2
3
4

import {onUpdated} from 'vue'
onUpdated(()=>{
    //逻辑
})

onBeforeUnmount

在一个组件实例被卸载之前调用。

• 详细信息

  当这个钩子被调用时，组件实例依然还保有全部的功能。

  这个钩子在服务端渲染时不会被调用。

  1 2 3 4

  import {onBeforeUnmount} from 'vue' onBeforeUnmount(()=>{ //逻辑 })

onUnmounted

在一个组件实例被卸载之后调用。

• 详细信息

  一个组件在以下情况下被视为已卸载：

  • 其所有子组件都已经被卸载。
  • 所有相关的响应式作用 (渲染作用以及 setup() 时创建的计算属性和侦听器) 都已经停止。

  可以在这个钩子中手动清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接。

  这个钩子在服务端渲染时不会被调用。

  1 2 3 4

  import {onUnmounted} from 'vue' onUnmounted(()=>{ //逻辑 })