一、Vue3 模板语法
Vue 3 的模板语法允许你声明式地将数据绑定到 DOM（文档对象模型）。这意味着你可以控制哪些数据会在哪些元素中显示，以及如何根据用户交互或应用状态的变化来更新这些元素。
以下是 Vue 3 模板语法的一些基本要点和示例：
1. 插值表达式
使用双大括号 {
{ }} 来绑定数据到模板中。
<div>{
{ message }}</div>
在 Vue 实例中：
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue 3!'
};
}
});
app.mount('#app');
2. 指令
Vue 指令是以 v- 为前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式（v-for 是例外情况，稍后我们会讲到）。
v-bind
用于属性绑定。
<div v-bind:id="dynamicId"></div>
在 Vue 实例中：
const app = Vue.createApp({
data() {
return {
dynamicId: 'myDiv'
};
}
});
app.mount('#app');
v-on
用于监听 DOM 事件。
<button v-on:click="increment">Increment</button>
在 Vue 实例中：
const app = Vue.createApp({
data() {
return {
count: 0
};
},
methods: {
increment() {
this.count++;
}
}
});
app.mount('#app');
v-model
用于在表单元素上创建双向数据绑定。
<input v-model="message" placeholder="edit me">
<p>Message is: {
{ message }}</p>
在 Vue 实例中：
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue!'
};
}
});
app.mount('#app');
v-if, v-else-if, v-else
用于条件渲染。
<div v-if="type === 'A'">Type A</div>
<div v-else-if="type === 'B'">Type B</div>
<div v-else>Other Type</div>
在 Vue 实例中：
const app = Vue.createApp({
data() {
return {
type: 'A'
};
}
});
app.mount('#app');
v-for
用于列表渲染。
<div v-for="item in items" :key="item.id">
{
{ item.text }}
</div>
在 Vue 实例中：
const app = Vue.createApp({
data() {
return {
items: [
{
id: 1, text: 'Item 1' },
{
id: 2, text: 'Item 2' },
// ...
]
};
}
});
app.mount('#app');
v-html
v-html 是 Vue 3 中的一个指令，它用于更新元素的 innerHTML。这意味着你可以使用 v-html 来插入原始的 HTML 到 Vue 模板中。然而，出于安全考虑，你应该避免使用 v-html 来插入用户生成的内容，因为这可能会导致跨站脚本攻击（XSS）。
当你需要动态地插入 HTML 内容时，可以使用 v-html 指令，但是你需要确保插入的内容是可信的。
下面是一个使用 v-html 的示例：
<template>
<div>
<div v-html="rawHtml"></div>
</div>
</template>
<script>
export default {
data() {
return {
rawHtml: '<p>这是一段原始的 HTML 内容</p>'
};
}
};
</script>
在这个例子中，<div> 元素的 innerHTML 将会被设置为 rawHtml 变量的值，即 <p>这是一段原始的 HTML 内容</p>。
注意：
- 当你使用
v-html时，Vue 不会解析或处理这个 HTML 内容中的 Vue 指令。这是因为v-html是直接将内容插入到 DOM 中，而不是作为 Vue 模板进行解析。 - 由于
v-html绕过了 Vue 的模板编译过程，因此你不能在插入的 HTML 中使用 Vue 的动态语法，如{ { }}或v-for。 - 如果你需要在插入的 HTML 中使用 Vue 的功能，你应该考虑将这部分内容作为 Vue 组件或模板来处理，而不是直接使用
v-html。
3. 计算属性和侦听器
计算属性
计算属性是基于它们的依赖进行缓存的。只有在它的相关依赖发生改变时才会重新求值。
<div>{
{ computedMessage }}</div>
在 Vue 实例中：
const app = Vue.createApp({
data() {
return {
firstName: 'Fred',
lastName: 'Flintstone'
};
},
computed: {
computedMessage() {
return this.firstName + ' ' + this.lastName;
}
}
});
app.mount('#app');
侦听器
侦听器用于观察和响应 Vue 实例上的数据变化。
const app = Vue.createApp({
data() {
return {
question: ''
};
},
watch: {
// 当 question 发生变化时，这个函数将会执行
question(newQuestion, oldQuestion) {
console.log(`question changed from ${
oldQuestion} to ${
newQuestion}`);
}
}
});
app.mount('#app');
二、Vue3 修饰符
在 Vue 3 中，修饰符（Modifiers）是与指令一同使用的特殊标记，用于修改指令的默认行为。Vue 3 提供了多种修饰符，这些修饰符可以与 v-model、v-on、v-show 等指令结合使用。以下是一些 Vue 3 中常见的修饰符及其用法：
1. .lazy 修饰符
.lazy 修饰符用于 v-model，它使得数据只有在输入事件触发时才更新，而不是每次输入字符时都更新。
<input v-model.lazy="message">
2. .number 修饰符
.number 修饰符用于 v-model，它会自动将用户的输入值转换为 Number 类型。
<input v-model.number="age">
3. .trim 修饰符
.trim 修饰符用于 v-model，它会自动去除用户输入值的首尾空格。
<input v-model.trim="name">
4. .stop 修饰符
.stop 修饰符用于 v-on，它相当于调用 event.stopPropagation()，阻止事件冒泡。
<button v-on:click.stop="doThis">阻止冒泡</button>
5. .prevent 修饰符
.prevent 修饰符用于 v-on，它相当于调用 event.preventDefault()，阻止默认事件行为。
<form v-on:submit.prevent="onSubmit">阻止表单提交默认行为</form>
6. .capture 修饰符
.capture 修饰符用于 v-on，它表示使用事件捕获模式监听事件。
<div v-on:click.capture="doThis">事件捕获模式</div>
7. .self 修饰符
.self 修饰符用于 v-on，它只会在事件发生在元素本身时触发，而不是子元素。
<div v-on:click.self="doThat">只响应元素本身的点击</div>
8. .once 修饰符
.once 修饰符用于 v-on，它表示事件将只会触发一次。
<button v-on:click.once="doThisOnce">只触发一次</button>
9. .passive 修饰符
.passive 修饰符用于 v-on，它用于在监听滚动或触摸事件时优化性能，因为它告诉浏览器你不想阻止这些事件的默认行为。
<div v-on:scroll.passive="onScroll">滚动事件监听</div>
10. .exact 修饰符
.exact 修饰符用于 v-on 和键盘事件监听，它表示只有按下指定的键时才会触发事件。
<input v-on:keyup.exact.13="submit">只有在按下 Enter 键时提交</input>
三、Vue3 表达式
在 Vue 3 中，表达式是模板语法中的一个重要概念，它允许你在模板中嵌入 JavaScript 代码来动态地渲染内容、计算值或执行方法。Vue 3 的模板语法使用双大括号 {
{ }} 来包裹表达式，这些表达式会在 Vue 实例的数据或方法发生变化时自动更新。
下面是一些 Vue 3 中使用表达式的示例：
1. 文本插值
使用双大括号 {
{ }} 可以在模板中插入 JavaScript 表达式，表达式的值会被计算并插入到 HTML 中。
<template>
<div>
<p>Message: {
{ message }}</p>
<p>Count: {
{ count }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue 3!',
count: 10
};
}
};
</script>
在这个例子中，{
{ message }} 和 {
{ count }} 是表达式，它们会被替换为 data 函数中定义的 message 和 count 的值。
2. 计算属性
你可以使用表达式来计算值。Vue 会自动处理这些表达式的依赖关系，并在依赖项发生变化时更新结果。
<template>
<div>
<p>Reversed message: {
{ message.split('').reverse().join('') }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue 3!'
};
}
};
</script>
在这个例子中，表达式 message.split('').reverse().join('') 会计算出一个反转后的 message 字符串。
3. 方法调用
你可以在表达式中调用 Vue 实例中定义的方法。
<template>
<div>
<p>Doubled count: {
{ doubleCount() }}</p>
</div>
</template>
<script>
export default {
data() {
return {
count: 5
};
},
methods: {
doubleCount() {
return this.count * 2;
}
}
};
</script>
在这个例子中，doubleCount() 是一个方法，它在表达式中被调用，并返回 count 的两倍。
4. 指令参数
你也可以在指令中使用表达式来动态地设置参数。
<template>
<div>
<img v-bind:src="imageUrl" alt="Vue Logo">
</div>
</template>
<script>
export default {
data() {
return {
imageUrl: 'https://vuejs.org/images/logo.png'
};
}
};
</script>
在这个例子中，v-bind:src="imageUrl" 是一个指令，它使用表达式 imageUrl 来动态地设置 img 元素的 src 属性。
