当前位置：首页 > news >正文

Vue2 基础

news 2025/6/17 8:59:12

Vue 2 是 Vue.js 的第二个主要版本，于 2016 年发布。它是一个渐进式的 JavaScript 框架，以其简单、灵活、易用性高而广受欢迎。Vue 2 主要专注于构建用户界面（UI），并且非常适合用于构建单页应用（SPA）以及开发高度交互的 Web 应用。以下是对 Vue 2 的详细介绍：

学习 Day01

一、创建Vue实例
- vue2 使用方式
- - 核心步骤：
  - 示例代码：
  - 总结：
二、开始使用
- 2.1 插值表达式 - Mustache语法 (双大括号)
- - 基本语法
  - 插值表达式的特点
  - 示例
  - - 1. 基本数据绑定
    - 2. 表达式计算
    - 3. 条件渲染
    - 4. 对象属性访问
  - 总结
- 2.2 指令
- - 2.2.1 `v-bind` 数据
  - - 基本语法
    - 常见用法
    - 常见的绑定场景
    - 总结
  - 2.2.2 `v-model`
  - - 基本用法
    - 支持的表单元素类型
    - `.lazy` 修饰符
    - `.number` 修饰符
    - `.trim` 修饰符
    - 自定义组件中的 `v-model`
    - 总结
  - 2.2.3 `v-for`
  - - 基本语法
    - 数组遍历
    - - 示例 1：遍历数组
    - 对象遍历
    - - 示例 2：遍历对象
    - 列表渲染的优化（`key` 属性）
    - - 示例 3：使用 `key`
    - 与组件结合使用
    - - 示例 4：在组件中使用 `v-for`
    - 反向遍历（`v-for` 中使用 `reverse`）
    - - 示例 5：反向遍历
    - 范围和条件渲染结合使用
    - - 示例 6：结合 `v-for` 和 `v-if`
    - `v-for` 的其他用法
    - 总结
  - 2.2.4 `v-on`
  - - 基本语法
    - 示例 1：绑定 `click` 事件
    - 简写语法
    - - 示例 2：简写形式
    - 事件修饰符
    - - 1. `.stop`
      - 2. `.prevent`
      - 3. `.capture`
      - 4. `.once`
      - 5. `.self`
    - 参数传递
    - - 示例 3：通过 `$event` 传递原生事件对象
      - 示例 4：显式传递参数
    - 修饰符的组合使用
    - - 示例 5：修饰符组合使用
    - 事件监听器的绑定条件
    - - 示例 6：条件绑定事件
    - `.native` 修饰符（针对组件事件）
    - - 示例 7：监听原生 DOM 事件
    - `v-on` 与 `v-model` 的结合
    - - 示例 8：`v-model` 与 `v-on` 结合
    - 总结
  - 2.2.5 `v-once`
  - - 使用场景
    - 基本用法
    - 示例：
    - 注意事项：
    - 适用场景
    - 总结
  - 2.2.6 小小了解即可
  - - 1. `v-pre`
    - 2. `v-cloak`
    - 3. `v-slot`
- 2.3 `v-if`和`v-show` 频繁切换时的选择
- - - 1. `v-if` 的工作原理
    - 2. `v-show` 的工作原理
    - 3. 频繁切换时的选择
    - 4. 性能比较
    - 总结：

学习Vue需存在Node.js，我是选择的是以nvm为主导的版本控制node版本工具的方式。
在这里插入图片描述

一、创建Vue实例

vue2 使用方式

先行在浏览器中安装 Vue Devtools，进行代码审查和调试Vue应用
在这里插入图片描述

在 Vue 2 中，创建 Vue 实例的核心步骤可以总结为以下几个部分：

核心步骤：

引入 Vue 库
- 首先需要引入 Vue 库，无论是通过 CDN 链接，还是通过模块化的方式导入。
```
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
```
或者：
```
import Vue from 'vue';
```
创建 Vue 实例
- 使用 new Vue() 创建 Vue 实例，并传入一个配置对象来指定实例的属性和行为。
```
new Vue({// 配置项
});
```
指定挂载元素（el）
- el 是 Vue 实例的挂载点，指定 Vue 实例需要管理的 DOM 元素。它通常是一个包含 Vue 控制的部分的元素。
```
el: '#app'
```
定义数据（data）
- data 是 Vue 实例的核心部分，定义了实例的数据模型。所有在 data 中的属性都可以在模板中绑定和渲染。
```
data: {message: 'Hello, Vue!'
}
```
定义方法（methods）
- methods 用于定义实例的方法，这些方法可以在模板中通过事件绑定进行调用。
```
methods: {greet() {alert(this.message);}
}
```
渲染数据和事件
- 在 HTML 模板中，通过插值语法（{{ }}）和事件绑定（@event）来渲染和操作数据。
```
<div id="app"><p>{{ message }}</p><button @click="greet">Click me</button>
</div>
```

示例代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue Example</title>
</head>
<body><div id="app"><p>{{ message }}</p><button @click="greet">Click me</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>new Vue({el: '#app',data: {message: 'Hello, Vue!'},methods: {greet() {alert(this.message);}}});</script>
</body>
</html>

在这里插入图片描述

总结：

引入 Vue 库：将 Vue 库加载到项目中。
创建 Vue 实例：使用 new Vue() 创建 Vue 实例并配置挂载点。
指定挂载点 (el)：告诉 Vue 实例它将控制哪个 DOM 元素。
定义数据 (data)：声明实例的响应式数据。
定义方法 (methods)：定义 Vue 实例的方法，并通过事件绑定触发。

二、开始使用

2.1 插值表达式 - Mustache语法 (双大括号)

在 Vue 2 中，插值表达式 用于将数据绑定到模板中的元素内容。它的语法是通过双大括号 {{}} 包裹表达式，将 JavaScript 表达式的值动态渲染到视图中。

基本语法

<div>{{ message }}</div>

message 是一个 Vue 实例中的数据，插值表达式会被 Vue 渲染成 message 的值，显示在 <div> 标签内。

插值表达式的特点

支持 JavaScript 表达式：
- 基本变量：{{ message }}
- 运算：{{ number1 + number2 }}
- 调用方法：{{ getMessage() }}
- 三元运算符：{{ isActive ? 'Active' : 'Inactive' }}
- 数组和对象的访问：{{ user.name }} 或 {{ items.length }}
限制：
插值表达式不能包含赋值操作（例如 a = b），也不能包含 控制流语句（如 if 或 for），因为它们会影响模板的渲染性能。
HTML 输出：

<div id="app"><p>{{ message }}</p><p v-html="htmlContent"></p>
</div><script>new Vue({el: '#app',data: {message: '<strong>这将被转义</strong>',htmlContent: '<strong>这将被插入为HTML</strong>'}});
</script>

在这里插入图片描述

绑定对象和数组：
支持对象属性的访问和数组元素的动态变化：

<div>{{ user.name }}</div>
<ul><li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>

示例

1. 基本数据绑定

<div id="app"><p>{{ message }}</p>
</div><script>new Vue({el: '#app',data: {message: 'Hello Vue!'}})
</script>

在这个例子中，{{ message }} 会被 Vue 渲染成 Hello Vue!。

2. 表达式计算

<div id="app"><p>{{ number1 + number2 }}</p>
</div><script>new Vue({el: '#app',data: {number1: 10,number2: 20}})
</script>

这里的插值表达式 {{ number1 + number2 }} 会显示 30。

3. 条件渲染

<div id="app"><p>{{ isActive ? 'Active' : 'Inactive' }}</p>
</div><script>new Vue({el: '#app',data: {isActive: true}})
</script>

{{ isActive ? 'Active' : 'Inactive' }} 会根据 isActive 的值显示不同的内容。

4. 对象属性访问

<div id="app"><p>{{ user.name }}</p>
</div><script>new Vue({el: '#app',data: {user: { name: 'John Doe', age: 30 }}})
</script>

此处的插值表达式 {{ user.name }} 会显示 John Doe。

总结

插值表达式是 Vue 中数据绑定的基础，提供了一种直观的方式来将数据从 Vue 实例中传递到模板视图中。它支持基本数据绑定、表达式计算、条件判断等功能，简化了开发者的工作。

2.2 指令

2.2.1 `v-bind` 数据

在 Vue 中，v-bind 是一个用于将数据从 Vue 实例绑定到 HTML 元素属性或组件 props 的指令。它的作用是让视图能够动态地反映数据的变化。

然而，v-bind 只负责单向的数据流动：从数据到视图。也就是说，当数据发生变化时，视图会自动更新，但视图的变化不会反过来影响数据。

基本语法

v-bind:属性="表达式"

属性：要绑定的 HTML 属性或组件的 prop 名称。
表达式：Vue 实例中的数据、计算属性或者方法返回的值。

常见用法

动态绑定 HTML 元素属性

v-bind 可以用来动态绑定 HTML 元素的属性值。最常用的就是绑定 href、src、class、style 等属性。

示例 1：绑定 href 属性
```
<a v-bind:href="url">Click here</a>
```
解释：url 是 Vue 实例中的数据，v-bind:href 会把 url 的值绑定到 href 属性上，当 url 的值变化时，href 会自动更新。

示例 2：绑定 src 属性
```
<img v-bind:src="imageSrc" alt="Image">
```
解释：imageSrc 是 Vue 实例中的一个变量，v-bind:src 会将 imageSrc 的值动态绑定到 src 属性上。
动态绑定 class 和 style

v-bind 也可以动态地绑定元素的 class 和 style 属性，支持对象和数组语法。

示例 3：动态绑定 class
```
<div v-bind:class="classObject">Hello</div>
```
```
data() {return {classObject: {'active': isActive,'text-bold': isBold}};
}
```
解释：classObject 是一个对象，属性名是 class 的名称，值是一个布尔值。如果值为 true，对应的 class 会被添加，否则会被移除。

示例 4：动态绑定 style
```
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">Styled text</div>
```
```
data() {return {activeColor: 'red',fontSize: 16};
}
```
解释：v-bind:style 使用一个对象来动态绑定多个内联样式，其中属性是 CSS 属性名，值是样式的值。当 activeColor 或 fontSize 改变时，style 会自动更新。

简写语法

v-bind 还可以使用简写形式 : 来提高代码的简洁性，功能与 v-bind 完全相同。

示例 5：简写形式

<a :href="url">Click here</a>
<img :src="imageSrc" alt="Image">
<div :class="classObject">Hello</div>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">Styled text</div>

动态绑定组件的 props

v-bind 不仅可以绑定 HTML 元素的属性，也可以用来绑定组件的 props，这对于组件的动态数据传递非常有用。

示例 6：动态绑定组件的 props
```
<child-component :some-prop="parentData"></child-component>
```
解释：parentData 是父组件中的数据，v-bind 会把 parentData 的值动态传递给 child-component 组件的 some-prop。

常见的绑定场景

绑定动态数据
- 动态改变图片的路径、按钮的文本、链接的地址等。
绑定多个 class 或 style
- 动态控制元素的样式或类名，例如动态根据条件改变颜色、字体大小等。
传递动态参数给子组件
- 使用 v-bind 将父组件的数据传递给子组件，确保数据的一致性和动态更新。

总结

v-bind 是 Vue 中一个非常重要的指令，主要用于动态地绑定元素的属性或组件的 props。它使得在模板中处理动态数据变得简单和灵活，能够将 Vue 实例中的数据自动同步到视图中。通过 v-bind，你可以高效地控制 HTML 元素和组件的属性，提供响应式的数据绑定。

2.2.2 `v-model`

v-model 是 Vue 中用于双向绑定表单元素数据的指令。它实现了表单输入控件与 Vue 实例中的数据之间的自动同步：当表单控件的值发生变化时，相关的数据会自动更新；反之，当数据变化时，表单控件的值也会同步更新。v-model 使得表单数据的处理变得更加简单和直观。

基本用法

v-model 常用于绑定 input、textarea、select 等表单控件。默认情况下，v-model 会根据控件的类型，自动选择适合的事件和属性来进行数据的双向绑定。

示例 1：基本用法

<input v-model="message">

new Vue({el: '#app',data() {return {message: ''};}
});

解释：

当用户在输入框中输入内容时，message 会自动更新为输入框的内容。
如果你直接修改 message 的值，输入框中的内容也会随之更新。

支持的表单元素类型

v-model 支持多种类型的表单元素，并且它根据不同的表单元素自动选择合适的属性和事件：

input（文本框、复选框、单选框等）
- 对于文本框（如 <input type="text"> 或 <textarea>），v-model 会绑定 value 属性，并监听 input 事件。
- 对于复选框（<input type="checkbox">）和单选框（<input type="radio">），v-model 会绑定 checked 属性，并监听 change 事件。
示例 2：文本框
```
<input v-model="message">
```
示例 3：复选框
```
<input type="checkbox" v-model="isChecked">
```
```
data() {return {isChecked: false};
}
```
示例 4：单选框
```
<input type="radio" v-model="picked" value="A"> A
<input type="radio" v-model="picked" value="B"> B
```
```
data() {return {picked: 'A'};
}
```

select

对于 select 元素，v-model 会绑定 value 属性，并监听 change 事件。当 select 的选中项发生变化时，v-model 会将选中的值同步到数据中。

示例 5：select 选项

<select v-model="selected"><option disabled value="">Please select one</option><option>Option 1</option><option>Option 2</option><option>Option 3</option>
</select>

data() {return {selected: ''};
}

textarea

对于 textarea 元素，v-model 会绑定 value 属性，并监听 input 事件。

示例 6：textarea
```
<textarea v-model="message"></textarea>
```
```
data() {return {message: ''};
}
```

`.lazy` 修饰符

v-model 默认会在输入框内容发生变化时立即更新绑定的数据。这对于大多数场景是非常方便的，但有时你可能希望在用户完成输入后才更新数据。

通过使用 .lazy 修饰符，v-model 会在 change 事件上更新数据，而不是在 input 事件上。

示例 7：使用 .lazy 修饰符

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script><div id="app"><input v-model.lazy="message" placeholder="输入后点击外部更新"><p>当前消息: {{ message }}</p>
</div><script>new Vue({el: '#app',data: {message: ''}});
</script>

解释：

使用 .lazy 后，message 只会在用户输入完并触发 change 事件后才更新，而不是每次键盘输入时都更新。

`.number` 修饰符

v-model 默认会将用户输入的值作为字符串绑定到数据上。如果你希望将输入值自动转换为数字，可以使用 .number 修饰符。

示例 8：使用 .number 修饰符

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

解释：

这将确保输入框中的值会被自动转换为数字类型，而不是字符串。

`.trim` 修饰符

v-model 默认会去除文本框中的首尾空白字符，但如果你希望每次输入时都自动去除空白字符，可以使用 .trim 修饰符。

示例 9：使用 .trim 修饰符

<input v-model.trim="message">

解释：

使用 .trim 后，输入框中的值会在绑定到 message 时自动去除两端的空格。

自定义组件中的 `v-model`

Vue 允许在自定义组件中使用 v-model 来实现双向数据绑定。在自定义组件中，v-model 会将绑定的数据传递给组件的 props，并监听组件发出的事件来更新父组件中的数据。

默认情况下，v-model 会绑定到组件的 value prop 并监听 input 事件。

示例 10：自定义组件中的 v-model

<custom-input v-model="message"></custom-input>

Vue.component('custom-input', {props: ['value'],template: '<input :value="value" @input="$emit(\'input\', $event.target.value)">'
});

解释：

在父组件中使用 v-model，它会将 message 传递给子组件的 value prop。
在子组件中，当输入框的值发生变化时，组件会触发 input 事件并将新的值传递回父组件，更新 message。

总结

v-model 是 Vue 中非常常用的指令，提供了双向绑定的能力，简化了表单元素和 Vue 数据之间的交互。
默认情况下，v-model 会根据表单元素的类型（如 input、textarea、select 等）自动绑定适当的属性和事件。
v-model 支持修饰符（如 .lazy、.number、.trim）来定制行为，适应不同的需求。
在自定义组件中，v-model 会绑定到组件的 value prop，并监听 input 事件来实现双向绑定。

通过 v-model，你可以轻松实现表单控件的双向绑定，减少手动更新数据的代码，提高开发效率。

2.2.3 `v-for`

v-for 是 Vue 中的一个指令，用于根据数组或对象的内容渲染列表。它允许你在模板中遍历数据，并为每一项数据生成一个 DOM 元素。v-for 是 Vue 用于渲染动态列表的重要工具，通常与数组或对象结合使用。

基本语法

v-for="(item, index) in items"

items 是一个数组或对象，它提供了要遍历的数据。
item 是当前遍历的单个元素，它会在每次循环中被赋值为 items 数组中的一个值。
index 是当前元素在数组中的索引（可选）。

数组遍历

示例 1：遍历数组

假设我们有一个简单的数组 fruits，我们想根据这个数组动态渲染一个列表。

<ul><li v-for="(fruit, index) in fruits" :key="index">{{ fruit }}</li>
</ul>

new Vue({el: '#app',data() {return {fruits: ['Apple', 'Banana', 'Cherry']};}
});

在这里插入图片描述

解释：

v-for="(fruit, index) in fruits"：表示我们要遍历 fruits 数组，每次遍历时会将数组中的一个值赋给 fruit，同时获取当前元素的索引（index）。
:key="index"：key 是 Vue 在渲染列表时用来标识每个元素的唯一标识符。它帮助 Vue 优化虚拟 DOM 的重渲染过程，确保元素被正确更新。
使用 {{ fruit }} 输出当前遍历的 fruit。

对象遍历

除了数组，v-for 还可以用于遍历对象。在遍历对象时，每个属性的键和值都会被提取出来。

示例 2：遍历对象

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

new Vue({el: '#app',data() {return {person: {name: 'John',age: 30,profession: 'Developer'}};}
});

解释：

v-for="(value, key) in person"：表示我们要遍历 person 对象。在每次遍历时，key 会是对象的属性名，而 value 是属性对应的值。
使用 {{ key }} 和 {{ value }} 输出每一项的键和值。

列表渲染的优化（`key` 属性）

在使用 v-for 渲染列表时，Vue 强烈建议你为每个列表项提供一个 key 属性。key 是一个独一无二的标识符，Vue 通过它来识别每一项的变化，从而高效地更新 DOM。

示例 3：使用 `key`

<ul><li v-for="(fruit, index) in fruits" :key="fruit">{{ fruit }}</li>
</ul>

解释：

在 v-for 中，我们使用 :key="fruit" 来确保每个 li 元素都有一个唯一的标识符（即水果的名称）。
如果不提供 key，Vue 会使用默认的算法来更新 DOM，但效率较低，特别是在列表较大时。提供 key 可以显著提升性能，尤其是当列表项顺序发生变化或删除时。

与组件结合使用

v-for 也可以用于渲染组件列表，每次循环时会渲染一个新的组件实例。

示例 4：在组件中使用 `v-for`

<child-component v-for="(fruit, index) in fruits" :key="index" :name="fruit"></child-component>

Vue.component('child-component', {props: ['name'],template: '<div>{{ name }}</div>'
});new Vue({el: '#app',data() {return {fruits: ['Apple', 'Banana', 'Cherry']};}
});

解释：

v-for 用于渲染多个 child-component 组件实例，每个组件通过 :name 传递不同的水果名称。
:key="index" 仍然是必需的，用于优化渲染过程。

反向遍历（`v-for` 中使用 `reverse`）

在 Vue 中，v-for 本身并不直接支持反向遍历。如果需要倒序遍历，可以通过反转数组来实现。

示例 5：反向遍历

<ul><li v-for="(fruit, index) in fruits.slice().reverse()" :key="index">{{ fruit }}</li>
</ul>

在这里插入图片描述

解释：

使用 slice() 创建数组的副本，以避免直接修改原数组。
使用 reverse() 方法反转数组，然后再遍历。

注意：直接对原数组使用 reverse() 会修改原数据，可能导致不必要的副作用，因此我们通常使用 slice() 来避免对原数组的修改。

范围和条件渲染结合使用

你可以在 v-for 循环中使用 v-if 或 v-show 来进行条件渲染。

示例 6：结合 `v-for` 和 `v-if`

<ul><li v-for="(fruit, index) in fruits" :key="index" v-if="fruit !== 'Banana'">{{ fruit }}</li>
</ul>

解释：

在 v-for 中使用 v-if 来过滤出不等于 “Banana” 的水果项。
在此情况下，只有不是 “Banana” 的水果会被渲染。

`v-for` 的其他用法

嵌套 v-for：你可以在一个 v-for 循环中嵌套另一个 v-for，实现多层级的数据渲染。

示例 7：嵌套循环

<div v-for="(category, index) in categories" :key="index"><h3>{{ category.name }}</h3><ul><li v-for="(item, index) in category.items" :key="index">{{ item }}</li></ul>
</div>

new Vue({el: '#app',data() {return {categories: [{ name: 'Fruits', items: ['Apple', 'Banana', 'Cherry'] },{ name: 'Vegetables', items: ['Carrot', 'Lettuce', 'Tomato'] }]};}
});

总结

v-for 是 Vue 中强大的列表渲染指令，可以用于遍历数组、对象等数据结构，并动态渲染 DOM 元素。
使用 v-for 时要为每一项提供 key 属性，以便 Vue 能有效地管理和更新虚拟 DOM。
v-for 支持与 v-if、组件等结合使用，可以构建复杂的动态列表。
使用 v-for 时，确保数据结构适当，以避免不必要的性能开销。

v-for 是 Vue 中非常常用的指令，能帮助我们轻松处理复杂的列表和动态数据展示。

2.2.4 `v-on`

v-on 是 Vue 中用于绑定事件监听器的指令。通过 v-on，你可以将 DOM 事件（如 click、mouseover、keydown 等）与 Vue 实例中的方法或逻辑绑定，从而在事件触发时执行相应的操作。

基本语法

v-on:event="method"

event 是 DOM 事件的名称，例如 click、submit、mouseenter 等。
method 是 Vue 实例中的方法，或者是要执行的 JavaScript 代码。

示例 1：绑定 `click` 事件

<button v-on:click="clickHandler">Click Me</button>

new Vue({el: '#app',methods: {clickHandler() {alert('Button clicked!');}}
});

解释：

当按钮被点击时，clickHandler 方法会被调用，弹出一个提示框。

简写语法

v-on 可以使用简写形式 @，使得代码更简洁。功能和原始语法完全一样。

示例 2：简写形式

<button @click="clickHandler">Click Me</button>

事件修饰符

Vue 提供了事件修饰符，可以用来更精细地控制事件的行为。这些修饰符包括 .stop、.prevent、.capture、.once 等。

1. `.stop`

阻止事件的冒泡。

<button @click.stop="clickHandler">Click Me</button>

解释：

.stop 修饰符会调用 event.stopPropagation() 来阻止事件的冒泡，防止事件传递给父元素。

2. `.prevent`

阻止事件的默认行为。

<form @submit.prevent="submitHandler">Submit</form>

解释：

.prevent 修饰符会调用 event.preventDefault() 来阻止表单的默认提交行为。

3. `.capture`

使用事件捕获模式，而不是默认的冒泡模式。

<button @click.capture="clickHandler">Click Me</button>

解释：

.capture 修饰符将事件的处理顺序从冒泡模式改为捕获模式，事件会先从最外层的元素开始捕获，逐层传递到目标元素。

4. `.once`

事件只会触发一次，之后会被移除。

<button @click.once="clickHandler">Click Me</button>

解释：

.once 修饰符确保事件只会触发一次，即使用户点击多次，后续的点击事件也不会再触发 clickHandler 方法。

5. `.self`

只在事件由当前元素触发时才处理，而不是冒泡到父元素。

<button @click.self="clickHandler">Click Me</button>

解释：

.self 修饰符意味着事件只有在点击该元素本身时才会触发事件处理器，而事件如果在该元素的子元素上触发，则不会执行。

参数传递

你可以在事件处理方法中传递参数，Vue 提供了两种方式来实现：通过 $event 或通过显式传递参数。

示例 3：通过 `$event` 传递原生事件对象

<button @click="clickHandler($event)">Click Me</button>

methods: {clickHandler(event) {console.log(event); // 这里可以访问到原生的 DOM 事件对象}
}

解释：

$event 是 Vue 提供的一个特殊变量，指向原生 DOM 事件对象，允许你在方法中访问事件的详细信息。

示例 4：显式传递参数

<button @click="clickHandler('Hello')">Click Me</button>

methods: {clickHandler(message) {console.log(message); // 输出 'Hello'}
}

解释：

通过 @click="clickHandler('Hello')" 直接传递参数给方法，而不是使用 $event。

修饰符的组合使用

你可以组合多个事件修饰符来实现更加复杂的事件处理需求。

示例 5：修饰符组合使用

<button @click.prevent.stop="clickHandler">Click Me</button>

解释：

@click.prevent.stop 表示在点击按钮时同时阻止事件的默认行为和冒泡。

事件监听器的绑定条件

在某些情况下，可能需要根据条件动态绑定事件监听器。你可以使用 v-on 的绑定语法实现这一需求。

示例 6：条件绑定事件

<button v-on:click="isClicked ? 'doSomething' : ''">Click Me</button>

data() {return {isClicked: true};
}

解释：

你可以通过动态绑定事件处理方法来控制是否执行某个函数。例如，isClicked 为 true 时绑定 click 事件，false 时不绑定事件。

`.native` 修饰符（针对组件事件）

在自定义组件中，v-on 默认绑定的是组件的自定义事件，而非原生 DOM 事件。如果你希望监听原生 DOM 事件，可以使用 .native 修饰符。

示例 7：监听原生 DOM 事件

<custom-button @click.native="clickHandler"></custom-button>

Vue.component('custom-button', {template: '<button>Click</button>'
});

解释：

@click.native 修饰符确保监听的是 <button> 元素的原生 click 事件，而不是 custom-button 组件发出的自定义事件。

`v-on` 与 `v-model` 的结合

v-on 常常与 v-model 结合使用来处理表单控件的用户输入，v-on 监听 input 或 change 事件，v-model 用于数据绑定。

示例 8：`v-model` 与 `v-on` 结合

<input v-model="message" @input="handleInput">

methods: {handleInput() {console.log('Input event triggered');}
}

解释：

v-model 绑定数据 message，@input 事件触发时调用 handleInput 方法。

总结

v-on 用于绑定事件监听器，可以监听各种 DOM 事件，响应用户的交互。
支持简写形式 @，使代码更加简洁。
事件修饰符（如 .stop、.prevent、.once、.capture 等）用于控制事件的行为，提升事件处理的灵活性。
可以通过 $event 访问原生事件对象，或者直接传递参数给事件处理方法。
与 v-model 结合使用，可以监听表单控件的输入事件并进行处理。
.native 修饰符用于监听自定义组件的原生 DOM 事件。

通过 v-on，你可以轻松地处理用户交互，优化事件的管理和响应。

2.2.5 `v-once`

v-once 是 Vue 提供的一个指令，用于对元素和组件进行一次性的渲染优化。当你使用 v-once 时，Vue 会在初次渲染后将该元素或组件标记为静态元素，并且不再对其进行重新渲染，即使它所绑定的数据发生了变化。

使用场景

当某些元素或组件的内容一旦渲染之后就不再变化，使用 v-once 可以提高渲染性能，避免 Vue 的虚拟 DOM 重新渲染这些静态内容。
对于一些不需要响应式更新的内容，比如固定的广告位、首页的某些固定元素，使用 v-once 可以减少不必要的计算和渲染，从而提高性能。

基本用法

<div v-once><p>This is static content</p><p>{{ message }}</p>
</div>

解释：

当 Vue 首次渲染这个模板时，<div> 内的内容会根据 v-once 指令静态渲染。
在后续的视图更新中，即使 message 的值发生变化，<div> 内的内容也不会重新渲染。

示例：

<div id="app"><p v-once>This content will never change after initial render</p><p>{{ message }}</p><button @click="message = 'Hello Vue!'">Change Message</button>
</div><script>new Vue({el: '#app',data() {return {message: 'Hello World!'};}});
</script>

解释：

初次渲染时，<p v-once> 中的内容会被渲染为 "This content will never change after initial render"。
点击按钮后，message 的值会变化，但由于 v-once 指令的作用，<p v-once> 中的内容不会重新渲染，仍然保持原样。

注意事项：

仅在初次渲染有效：v-once 只影响元素或组件的第一次渲染。之后，无论数据如何变化，v-once 包裹的内容都不会再重新渲染。
不能响应式更新：如果某些内容需要在数据更新时改变，那么使用 v-once 就不合适，因为它会使得这些内容无法响应式更新。
性能优化：v-once 可以提高性能，特别是当页面中包含很多固定不变的元素时，它能够减少 Vue 的渲染和更新过程。

适用场景

静态页面内容：如一个静态的页脚或广告位。
不可变的UI组件：如果某些组件的渲染只依赖于初始数据，并且永远不会改变，可以使用 v-once 来避免它们的重新渲染。

总结

v-once 用于标记元素或组件为静态内容，Vue 只会在第一次渲染时渲染它们，并且不会随着数据变化重新渲染这些内容。它对于提升性能，尤其是渲染大量静态内容时，十分有效，但它也意味着这些内容不再响应式地更新。

2.2.6 小小了解即可

1. `v-pre`

v-pre用于跳过编译，直接渲染该元素及其子元素。这对一些不需要解析的静态内容很有用。

<span v-pre>{{ rawHtml }}</span>

解释：这个指令会跳过{{ rawHtml }}的编译，直接渲染出文字{{ rawHtml }}。

2. `v-cloak`

v-cloak指令用于在Vue实例完全初始化之前，保持元素及其子元素的“隐藏”状态，通常用来避免页面在Vue实例挂载前闪现未编译的模板内容。

<div v-cloak>{{ message }}
</div>

解释：v-cloak会保持该元素隐藏，直到Vue实例完全启动并渲染完成。

3. `v-slot`

v-slot是一个用于插槽的指令，它允许你在组件中指定内容的插入位置，通常用于具名插槽。

<template v-slot:header><h1>Header content</h1>
</template>

解释：v-slot:header指令将header插槽的内容替换为<h1>Header content</h1>。

这些指令使得Vue模板具有很强的灵活性和可扩展性，能够高效地进行数据绑定、事件处理、条件渲染等操作。在实际开发中，合理使用这些指令能大大提高代码的简洁性和可维护性。

2.3 `v-if`和`v-show` 频繁切换时的选择

在Vue中，v-if和v-show都可以用于条件渲染，但它们的工作原理不同，适用于不同的场景。特别是当涉及到频繁切换显示和隐藏时，选择哪个指令非常关键。

1. `v-if` 的工作原理

v-if是惰性渲染，即当条件为真时，Vue会在DOM中插入元素，当条件为假时，Vue会将元素从DOM中移除。每次条件变更时，Vue会重新渲染该元素。

优点：适用于条件变化较少，或者需要动态渲染复杂内容的场景，因为它会在条件变化时销毁并重新创建元素。
缺点：每次条件切换时，都会重新创建和销毁元素，可能会引起性能开销，特别是对于频繁切换的场景。

<p v-if="isVisible">This is visible</p>

当isVisible从false切换到true时，<p>元素会被插入DOM。
当isVisible从true切换到false时，<p>元素会被销毁。

2. `v-show` 的工作原理

v-show是基于CSS的切换，当条件为假时，它不会从DOM中删除元素，而是通过控制元素的display样式来显示或隐藏它。元素始终存在于DOM中，只是通过display: none来隐藏。

优点：适用于频繁切换显示和隐藏的场景，因为它不会销毁元素，只是简单地切换元素的显示和隐藏，性能开销较小。
缺点：始终会在DOM中保留元素，即使它是隐藏的，这可能导致不必要的内存占用，尤其是当元素非常复杂时。

<p v-show="isVisible">This is visible</p>

当isVisible为true时，<p>元素显示在页面上。
当isVisible为false时，<p>元素隐藏，但它仍然存在于DOM中，display样式变为none。

3. 频繁切换时的选择

如果条件发生变化非常频繁（例如在动画、交互中需要频繁切换显示/隐藏），**v-show**通常是更好的选择。由于它通过修改display样式来控制显示和隐藏，而不需要重新创建或销毁元素，所以其性能开销较小，适合频繁切换的场景。

场景分析：

v-if：适用于不需要频繁切换的场景，如只需显示一次的内容或条件渲染不常变更的元素。由于每次切换都会销毁和重建元素，它更适合静态渲染的场景。
v-show：适用于需要频繁切换的场景，尤其是性能要求较高时。例如，分页组件、切换标签页等场景中，v-show能够避免重复渲染和销毁带来的性能开销。

4. 性能比较

v-if：适合初次渲染较复杂的元素，但频繁切换时会造成较高的性能消耗。
v-show：由于不会重新渲染元素，适合频繁切换的情况，性能开销较低。

在本GIF图中，我们可以观看到使用v-show指令，改变了display属性；而v-if的是直接销毁了存在

总结：

频繁切换使用：**v-show**更适合，因为它通过切换CSS display属性来显示/隐藏元素，不会销毁DOM，性能开销较小。
条件变化不频繁使用：**v-if**更合适，因为它会完全销毁和重新创建DOM元素，适用于那些只在特定情况下需要渲染的内容。

学习 Day01

一、创建Vue实例

vue2 使用方式

核心步骤：

示例代码：

总结：

二、 开始使用

2.1 插值表达式 - Mustache语法 (双大括号)

基本语法

插值表达式的特点

示例

1. 基本数据绑定

2. 表达式计算

3. 条件渲染

4. 对象属性访问

总结

2.2 指令

2.2.1 v-bind 数据

基本语法

常见用法

常见的绑定场景

总结

2.2.2 v-model

基本用法

支持的表单元素类型

.lazy 修饰符

.number 修饰符

.trim 修饰符

自定义组件中的 v-model

总结

2.2.3 v-for

基本语法

数组遍历

示例 1：遍历数组

对象遍历

示例 2：遍历对象

列表渲染的优化（key 属性）

示例 3：使用 key

与组件结合使用

示例 4：在组件中使用 v-for

反向遍历（v-for 中使用 reverse）

示例 5：反向遍历

范围和条件渲染结合使用

示例 6：结合 v-for 和 v-if

v-for 的其他用法

总结

2.2.4 v-on

基本语法

示例 1：绑定 click 事件

简写语法

示例 2：简写形式

事件修饰符

1. .stop

2. .prevent

3. .capture

4. .once

5. .self

参数传递

示例 3：通过 $event 传递原生事件对象

示例 4：显式传递参数

修饰符的组合使用

示例 5：修饰符组合使用

事件监听器的绑定条件

示例 6：条件绑定事件

.native 修饰符（针对组件事件）

示例 7：监听原生 DOM 事件

v-on 与 v-model 的结合

示例 8：v-model 与 v-on 结合

总结

2.2.5 v-once

使用场景

基本用法

示例：

注意事项：

适用场景

总结

2.2.6 小小了解即可

1. v-pre

2. v-cloak

3. v-slot

二、开始使用

2.2.1 `v-bind` 数据

2.2.2 `v-model`

`.lazy` 修饰符

`.number` 修饰符

`.trim` 修饰符

自定义组件中的 `v-model`

2.2.3 `v-for`

列表渲染的优化（`key` 属性）

示例 3：使用 `key`

示例 4：在组件中使用 `v-for`

反向遍历（`v-for` 中使用 `reverse`）

示例 6：结合 `v-for` 和 `v-if`

`v-for` 的其他用法

2.2.4 `v-on`

示例 1：绑定 `click` 事件

1. `.stop`

2. `.prevent`

3. `.capture`

4. `.once`

5. `.self`

示例 3：通过 `$event` 传递原生事件对象

`.native` 修饰符（针对组件事件）

`v-on` 与 `v-model` 的结合

示例 8：`v-model` 与 `v-on` 结合

2.2.5 `v-once`

1. `v-pre`

2. `v-cloak`

3. `v-slot`

2.3 `v-if`和`v-show` 频繁切换时的选择

1. `v-if` 的工作原理

2. `v-show` 的工作原理