Vue 3 是一个用于构建用户界面的渐进式 JavaScript 框架,尤其适合开发前端单页应用(SPA)。它的核心理念是通过声明式的方式将数据绑定到 DOM 上,并提供了便捷的工具来处理复杂的 UI 交互。
其主要涉及JavaScript(弱类型语言)/HTML(网页结构,标记语言)/CSS(样式属性)
JavaScript整个执行流程类似于一个QT的事件循环,是单线程的,因此异步实现需要使用Promise期约来避免阻塞主线程,其中:
async
关键字用于声明异步函数,函数内部可以使用await
来等待异步操作完成。await
用于暂停异步函数的执行,直到Promise
完成。async
函数总是返回一个Promise
,可以使用.then()
和.catch()
来处理成功或失败的结果。Promise
内部的执行器函数在Promise
对象创建时立即同步执行。
Vue3 应用的根组件实例可通过Vue.createApp()创建,其中:
- 定义
data
来存储数据; - 使用
methods
定义方法; - 使用
computed
计算属性; - 使用
mounted
、created
等生命周期钩子; - 通过
app.mount()
将应用挂载到 DOM(文档对象模型,即网页内容) 上。
Vue3 常用指令:
指令 |
实例 |
简写 |
描述 |
v-bind |
v-bind:attr="value" |
:attr="value" |
用于绑定动态属性 |
v-on |
v-on:event="handler" |
@event="handler" |
用于监听事件 |
v-model |
v-model="value" |
/ |
用于双向绑定表单元素的值 |
v-slot |
<template v-slot:name> |
<template #name> |
用于在父组件中插入子组件内容,支持插槽功能 |
v-if |
v-if="condition" |
/ |
根据条件渲染元素 |
v-else-if |
v-else-if="condition" |
/ |
根据条件渲染元素 |
v-else |
v-else |
/ |
根据条件渲染元素 |
v-show |
v-show="condition" |
/ |
通过 display 样式控制元素显示或隐藏 |
v-for |
v-for="item in list" |
/ |
用于列表渲染,遍历数组或对象 |
v-pre |
v-pre |
/ |
跳过编译,直接渲染原始内容 |
v-cloak |
v-cloak |
/ |
防止 Vue 加载期间内容闪烁 |
v-once |
v-once |
/ |
一次性渲染元素,提高性能 |