Vue总览 | 青训营

一、vue简介

1. 是什么：一个用于构建UI（用户界面）的JS框架
2. 功能：
   • 实现声明式渲染
     • 声明式渲染
       • 本质：一种编程模式
       • 作用：将组件的渲染逻辑与组件状态，和组件数据分离开来
       • 使用优点：开发者只用专注于组件设计和数据处理，不需手动操作DOM
   • 拥有高响应性
     • 界面能快速响应数据的改变

二、vue组件

1. 是什么：实现特定功能的代码与资源的集合
2. 书写风格
   • 选项式API
     • 书写实现：用包含多个选项的对象来描述组件的逻辑
       • 书写位置：
         • script标签里
       • 选项：
         • 数据：data(){return {key:value}}
         • 函数：methods:{函数名(){}}
         • 生命周期：hook名(){//书写逻辑代码}
       • 书写要求：
         • 书写完要将包裹着选项的对象导出，用export default object
     • 选项定义的属性：指向当前组件实例（函数内部的this）
   • 组合式API
     • 书写位置：
       • script标签里，标签上有setup属性
     • 选项：
       • 数据：使用ref(value)创建响应式数据
         • ref具有深层响应性
       • 函数：function 函数名(){}
       • 生命周期（生命周期函数）：hook名(() => {//书写逻辑代码})
       • 声明响应式状态：reactive(对象)
         • reactive具有深层响应性，返回原始对象的Proxy
     • 书写要求：
       • 用什么前一定要导入，使用import {导入的东西} from 'vue'

三、vue-router（路由）

1. 功能：完成多个站内页面渲染、跳转的功能
2. 使用：
   • 引入路由
   • 定义路由组件，配置routes(path+component)
   • 在需渲染的地方写内容：
     • router-link标签，带上to属性及值
     • router-view标签，作为路由出口，渲染路由匹配的组件
3. 导航守卫

四、pinia

1. 本质：
   • 拥有组合式API的Vue状态管理库
2. 组成
   • 状态State
   • 视图View
   • 交互Actions
3. 使用
   • 创建一个pinia实例并将其传递给应用

五、指令

1. 形式：以'v-'开头的驼峰式命名的变量
2. 分类
   • 内置指令
   • 自定义指令
     • 通过directives注册

六、生命周期

1. 功能：
   • 控制代码的执行时期
2. 举例

七、插件

1. 功能：
   • 为Vue添加全局功能的工具代码
2. 安装

八、组件间通信

1. 父组件props声明：defineProps()宏/props选项
2. 子组件通过emit方法传递参数