第Ⅰ章-Ⅰ 了解Vue3 创建一个Vue3项目
第Ⅰ章-Ⅱ Vue3自定义创建项目 项目文件详解
第Ⅰ章-III Vite 创建vue3 项目
第Ⅰ章-IV npm yarn pnpm 包管理器
第Ⅱ章-Ⅰ Vue3基础语法
文本渲染命令
插值表达式
用于在模板中插入变量或表达式的结果。
vue
<div>{{ message }}</div>在这个示例中，{{ message }} 插入了 message 变量的值。
v-text
用于直接将表达式的结果作为文本插入到元素中。
vue
<div v-text="message"></div>v-html
用于将 HTML 字符串直接渲染为元素。
vue
<div v-html="htmlContent"></div>提示：在这里，v-html 会将 htmlContent 变量的内容作为 HTML 来渲染，而不是文本。这在插入富文本或动态生成 HTML 内容时非常实用。注意：由于 v-html 会直接渲染内容，因此可能存在安全问题，例如 XSS 攻击。因此在使用 v-html 时，要确保输入数据的安全性。
属性绑定命令
v-bind
用于将组件的属性或DOM元素与变量绑定。
vue
<img v-bind:src="imageUrl" v-bind:alt="imageAlt" />在这里，v-bind:src 和 v-bind:alt 分别绑定了 imageUrl 和 imageAlt 变量的值。
缩写
vue
<img :src="imageUrl" :alt="imageAlt" />你可以使用 : 作为 v-bind 的缩写。
事件处理指令
v-on
用于将组件或 DOM 元素的事件与方法绑定。
vue
<button v-on:click="handleClick">Click Me</button>缩写
@click 是 v-on:click 的缩写，用于将 click 事件绑定到 handleClick 方法。
vue
<button @click="handleClick">Click Me</button>$event
在事件处理方法中，$event 可以用于访问触发事件的原始事件对象。
vue
<button @click="handleClick">Click Me</button>
<script setup>
function handleClick(event) {
console.log(event); // 输出事件对象
}
</script>handleClick 方法通过参数 event 访问了触发 click 事件的事件对象。
事件修饰符
- .stop：阻止事件冒泡
vue
<button @click.stop="handleClick">Click Me</button>- .prevent阻止默认行为
vue
<form @submit.prevent="handleSubmit"></form>- .once只触发一次
vue
<button @click.once="handleClick">Click Me</button>- .self仅在事件目标与绑定目标相同时触发
vue
<div @click.self="handleClick">Click Me</div>条件渲染指令
v-if
用于根据条件决定是否渲染元素。
vue
<div v-if="isVisible">This is visible.</div>在这里，v-if 根据 isVisible 变量来决定是否渲染 div。
v-else-if v-else
配合v-if使用
vue
<div v-if="status === 'loading'">Loading...</div>
<div v-else-if="status === 'success'">Success!</div>
<div v-else>Error</div>v-show
用于根据条件决定元素的显示与隐藏。
- 与 v-if 的区别：v-show 通过设置 CSS 的 display 属性来隐藏或显示元素，这使其在切换状态时更快，但不适合大量元素的渲染。
- v-show 适合需要频繁切换显示状态的元素，而 v-if 适合只在需要时才渲染或移除元素的场景。
循环遍历指令
v-for
用于根据数组或对象来渲染元素。
vue
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>在这里，v-for 根据 items 列表来循环渲染 li 元素。
提示:vue3的以上基础语法与vue2相同。