开始 使用插槽可以实现动态的模板内容 父模板中的插槽内容可以访问到父组件的数据作用域，但不能访问到子组件的数据作用域 默认插槽 不具有name属性的插槽为默认插槽 父组件基本使用 <script setup lang="ts"> import {ref} from 'vue'; import Inner from "@/components/Inner.vue";...

props传参 通常用于父组件和子组件的通信 在子组件中定义props，使用props 在父组件中传递参数 子组件向父组件传递需要使用回调的方式 子组件中定义props <script setup lang="ts"> import {ref} from "vue"; // 定义props defineProps(['value1', 'value2',...

开始 Pinia是Vue3的状态管理库，安装Pinia命令：npm i pinia 在main.ts中引入Pinia import { createApp } from 'vue'; import App from './App.vue'; import { createPinia } from "pinia"; const app = createApp(App); const p...

基本使用 使用路由需要安装依赖，使用npm i vue-router安装，在src目录下创建router目录，存放路由的.ts文件 使用路由的基本步骤 定义并导出路由，设置路由和工作模式 设置app的路由 设置host和link 定义路由 定义一个基本的路由文件 import {createRouter, createWebHistory} from 'vue-r...

Vue2生命周期 Vue2组件的生命周期有4个，每个周期对应两个生命周期回调 创建：beforeCreate、created，只调用一次 挂载：beforeMount、mounted，只调用一次 更新：beforeUpdate、updated，每次修改数据都会调用 销毁：beforeDestroy、destroyed，只调用一次 Vue3生命周期 创建：使用...

开始 监视用于监视数据的变化从而执行某些流程 Vue3只能监视四种数据 ref响应式数据 reactive响应式数据 返回一个值的getter函数 一个包含上述值的数组 监视ref数据 watch函数传入ref变量和一个回调函数，返回一个停止函数，调用可停止监视 <script setup lang="ts"> import { ref, watc...

setup函数 setup函数是使用组合式API的位置 export default { name: 'MyVue', setup() { // ... } } setup函数的返回值是一个对象，其中包含模板使用的变量和函数 <script lang="ts"> export default { name: 'MyVue', setup() ...

开始 通过v-on指令可监听元素的事件，简写为@，指令的value可以是内联的JavaScript语句或者方法调用 内联事件处理器 <button @click="count++">Add 1</button> 在内联事件处理器中访问事件参数 <!-- 使用特殊的 $event 变量 --> &l...

插值语法 适用于元素的文本内容，使用双大括号 <div> {{message}} </div> 若需要仅插值一次，加上v-once指令 <div v-once> {{message}} </div> 指令语法 vue中的指令以v-开头，支持HTML元素属性的绑定，使用指令时，引号的部分作为JavaScript表达...

条件渲染 条件渲染用于根据条件结果来选择性的渲染HTML中的元素 v-if：当条件为true时，渲染元素 <h1 v-if="awesome">Vue is awesome!</h1> v-else-if：与else if效果相同，必须跟在v-if或v-else-if后面 v-else：与...