台风“杜苏芮”，北京连续多雨。
前两节
- 演练场
- 创建本地工程
npm init vue@latest
- 创建一个 Vue 应用
- 模板语法
创建一个 Vue 应用
import { createApp } from 'vue'
const app = createApp({
/* 根组件选项 */
})
这段代码是一个使用 Vue 3 Composition API 创建新的 Vue.js 应用程序的示例。
模板语法
- 文本插值
- 原始 HTML
- Attribute 绑定
<script setup>
import { ref } from 'vue'
const msg = ref('Hello World!')
const rawHtml = ref('<span style="color: red">This should be red.</span>');
</script>
<template>
<h1>{{ msg }}</h1>
<input v-model="msg">
<!-- v-html 指令，在网站上动态渲染任意 HTML 是非常危险的，因为这非常容易造成 XSS 漏洞。请仅在内容安全可信时再使用 v-html，并且永远不要使用用户提供的 HTML 内容。 -->
<p>Using text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
</template>
Attribute 绑定，如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。
<div v-bind:id="dynamicId"></div>
简写
<div :id="dynamicId"></div>
动态绑定多个值
const objectOfAttrs = {
id: 'container',
class: 'wrapper'
}
<div v-bind="objectOfAttrs"></div>
模板中可以绑定什么？
绑定仅支持单一表达式，也就是一段能够被求值的 JavaScript 代码。一个简单的判断方法是是否可以合法地写在 return 后面。
在 Vue 模板中，你可以使用指令和表达式来绑定各种属性和事件，以实现动态数据绑定和交互功能。以下是在 Vue 模板中可以绑定的内容：
- 文本插值（Text Interpolation）：使用双大括号语法
{{ }}可以在模板中插入 Vue 实例的数据，实现文本内容的动态展示。
<div>
<p>{{ message }}</p>
</div>
- 属性绑定（Attribute Binding）：通过
v-bind指令可以绑定 HTML 元素的属性，并将其值设置为 Vue 实例的数据。
<div>
<img v-bind:src="imageUrl" alt="Vue Logo">
</div>
<a v-bind:href="url"> ... </a>
<a :href="url"> ... </a>
- 条件渲染（Conditional Rendering）：使用
v-if和v-else指令可以根据 Vue 实例的条件表达式来控制元素是否渲染到 DOM 中。
<div>
<p v-if="showMessage">This message will be shown if showMessage is true.</p>
<p v-else>This message will be shown if showMessage is false.</p>
</div>
- 循环渲染（List Rendering）：使用
v-for指令可以遍历 Vue 实例的数组或对象，并渲染多个元素。
<div>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</div>
- 事件绑定（Event Handling）：使用
v-on或简写符号@可以绑定 DOM 事件到 Vue 实例的方法。
<div>
<button v-on:click="incrementCounter">Click Me</button>
</div>
<a v-on:click="doSomething"> ... </a>
<a @click="doSomething"> ... </a>
调用函数，绑定在表达式中的方法在组件每次更新时都会被重新调用，因此不应该产生任何副作用，比如改变数据或触发异步操作。
<time :title="toTitleDate(date)" :datetime="date">
{{ formatDate(date) }}
</time>
- 样式绑定（Style Binding）：通过
v-bind:style可以绑定元素的内联样式，并将样式属性的值设置为 Vue 实例的数据。
<div v-bind:style="{ color: textColor, fontSize: fontSize + 'px' }">
This text has a custom color and font size.
</div>
- 类名绑定（Class Binding）：使用
v-bind:class可以绑定元素的类名，并将类名设置为 Vue 实例的数据。
<div v-bind:class="{ 'active': isActive, 'error': hasError }">
This element may have the 'active' and 'error' classes based on Vue data.
</div>
- 表单输入绑定（Form Input Binding）：使用
v-model指令可以实现表单元素与 Vue 实例数据的双向绑定。
<div>
<input v-model="username" type="text" placeholder="Enter your username">
<p>Your username is: {{ username }}</p>
</div>
- 计算属性（Computed Properties）：使用
computed属性可以定义计算属性，这些属性的值会根据 Vue 实例的其他数据属性计算得出。
<div>
<p>Total: {{ totalPrice }}</p>
</div>
new Vue({
data: {
price: 10,
quantity: 2,
},
computed: {
totalPrice() {
return this.price * this.quantity;
},
},
});
- 监听器（Watchers）：使用
watch属性可以监听 Vue 实例数据的变化，并在数据发生变化时执行相应的操作。
<div>
<p>Message: {{ message }}</p>
</div>
new Vue({
data: {
message: '',
},
watch: {
message(newValue, oldValue) {
console.log('Message changed:', oldValue, '=>', newValue);
},
},
});
- 过滤器（Filters）：使用
filters属性可以定义过滤器，用于格式化模板中的数据。
<div>
<p>{{ date | formatDate }}</p>
</div>
new Vue({
data: {
date: '2023-08-01',
},
filters: {
formatDate(value) {
return new Date(value).toLocaleDateString();
},
},
});
- 动态组件（Dynamic Components）：使用
<component>元素结合v-bind:is可以实现动态渲染不同的组件。
<div>
<component v-bind:is="currentComponent"></component>
</div>
new Vue({
data: {
currentComponent: 'componentA',
},
});
动态参数
概念
在 Vue.js 中，你还可以使用动态参数（Dynamic Arguments）来动态地绑定指令和事件。动态参数允许你在模板中使用 JavaScript 表达式作为指令参数的一部分，从而根据实际情况动态地生成指令或事件的名称。
在指令或事件中使用动态参数时，你需要使用方括号 [] 来包裹表达式，并使用 : 表示这是一个动态参数。在 Vue.js 2.x 中，你也可以省略 : 直接使用表达式。
以下是一些示例说明使用动态参数的情况：
- v-bind 指令的动态参数：
v-bind 指令用于绑定 Vue 实例的数据到 HTML 元素的属性上。使用动态参数时，你可以根据表达式的值动态绑定不同的属性。
<div>
<img :[attributeName]="imagePath" alt="Image">
</div>
new Vue({
data: {
attributeName: 'src',
imagePath: 'path/to/image.jpg',
},
});
在这个例子中，[attributeName] 是动态参数，其值根据 attributeName 变量的值来确定。如果 attributeName 的值为 'src'，则等效于 v-bind:src 指令；如果 attributeName 的值为 'data-src'，则等效于 v-bind:data-src 指令。
- v-on 指令的动态参数：
v-on 指令用于将 DOM 事件绑定到 Vue 实例的方法上。使用动态参数时，你可以根据表达式的值动态绑定不同的事件。
<div>
<button @[eventName]="eventMethod">{{ buttonText }}</button>
</div>
new Vue({
data: {
eventName: 'click',
buttonText: 'Click Me',
},
methods: {
eventMethod() {
// 事件处理逻辑
},
},
});
在这个例子中，@[eventName] 是动态参数，其值根据 eventName 变量的值来确定。如果 eventName 的值为 'click'，则等效于 v-on:click 指令；如果 eventName 的值为 'mouseover'，则等效于 v-on:mouseover 指令。
动态参数是 Vue.js 提供的一个非常强大的特性，它允许你根据实际情况动态生成指令或事件的名称，从而实现更加灵活和动态的绑定。在处理复杂的交互逻辑时，动态参数可以派上用场。
动态参数解决什么问题
动态参数在 Vue.js 中解决了一些在静态参数下可能遇到的限制和问题，特别是在处理复杂的交互逻辑和动态数据绑定时。
以下是动态参数可以解决的一些常见问题：
-
动态绑定属性和事件：动态参数允许你在模板中根据表达式的值动态地绑定属性和事件。这使得你可以根据不同的条件或状态来绑定不同的属性和事件，而无需写重复的模板代码。
-
根据条件选择不同的指令或事件：使用动态参数，你可以根据不同的条件来选择要绑定的指令或事件。这在处理条件渲染或动态组件时特别有用，可以根据条件动态地绑定不同的行为。
-
更灵活的数据绑定：动态参数允许你根据表达式的值动态绑定数据。这使得你可以在模板中动态地选择要绑定的数据和属性，从而实现更灵活的数据绑定。
-
减少重复的代码：使用动态参数，你可以根据表达式的值来生成不同的指令或事件名称，从而避免编写重复的模板代码。这样可以使模板更加简洁和可维护。
-
处理复杂交互逻辑：在复杂的交互场景中，你可能需要根据用户的操作或应用程序的状态来动态地绑定不同的属性和事件。动态参数可以帮助你在这些情况下更好地组织代码。
总的来说，动态参数为 Vue.js 应用程序提供了更大的灵活性和动态性。它使得你可以根据实际需求来动态地选择要绑定的属性和事件，从而更好地满足复杂的交互需求，减少代码冗余，并使代码更加清晰和易于维护。
修饰符 Modifiers
修饰符是以点开头的特殊后缀，表明指令需要以一些特殊的方式被绑定。例如 .prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault()：
<form @submit.prevent="onSubmit">...</form>
Modifiers 还有哪些
在 Vue.js 中，事件修饰符（Event Modifiers）是用于在绑定事件时提供特殊控制的一种方式。它们可以在绑定事件时使用点号 . 后跟特定的修饰符，来修改事件的行为。以下是一些常用的事件修饰符：
.stop：阻止事件冒泡。使用.stop修饰符可以阻止事件在当前元素上触发后冒泡到父元素。
<button @click.stop="handleButtonClick">Click Me</button>
.prevent：阻止事件的默认行为。使用.prevent修饰符可以阻止事件的默认行为，比如阻止表单提交和超链接跳转。
<form @submit.prevent="handleSubmit">
<button type="submit">Submit</button>
</form>
<a href="https://www.example.com" @click.prevent>Go to Example</a>
.capture：使用事件捕获模式。通常事件是在冒泡阶段触发的，使用.capture修饰符可以将事件绑定在捕获阶段触发。
<div @click.capture="handleDivClick">Click Me</div>
.self：只在事件目标是当前元素自身时触发事件。使用.self修饰符可以限制事件只在当前元素自身触发，而不会在其子元素触发时触发。
<div @click.self="handleDivClick">
<button>Click Me</button>
</div>
.once：只触发一次事件。使用.once修饰符可以让事件只触发一次，即使事件绑定在多个地方，也只会执行一次事件处理函数。
<button @click.once="handleButtonClick">Click Me</button>
.passive：告知浏览器事件处理函数不会调用event.preventDefault()。使用.passive修饰符可以优化滚动性能，提供更流畅的滚动体验。
<div @scroll.passive="handleScroll">Scroll Me</div>
这些事件修饰符可以组合使用，例如同时使用 .stop 和 .prevent 来阻止事件冒泡和默认行为：
<button @click.stop.prevent="handleButtonClick">Click Me</button>
这样，在点击按钮时不仅会阻止冒泡，还会阻止按钮的默认提交行为。事件修饰符为事件处理提供了更多的控制选项，使你能够更方便地处理复杂的事件交互和逻辑。
