雾观远山

摘要： 项目搭建 npm init vite-app GxShujukucd GxShujukunpm inpm i vue-router npm i vuex // 这一句是这节课的关键 新建store ①配置storesrc文件下 store=》index.jsimport { createStore 阅读全文

摘要： beforeCreate -> 使用steup() // vue对象创建成功之前★created -> 使用setup() // vue对象创建成功之后（页面一访问，一加载） beforeMount -> onBeforMount // view与model绑定成功之前★mounted -> onM 阅读全文

摘要： 在setup中设置 响应式数据（data中双向绑定的数据） Ⅰ、ref（包装字符串或者数字）， Ⅱ、reactive（包装对象和或数组） Ⅲ、toRefs（直接在html模板中使用对象的属性名当变量，不需要用.访问） Ⅰ、ref（包装字符串或者数字）<template> <div> <h1 @cli 阅读全文

摘要： stetup(){}在 生命周期函数 系列中的优先级 〇setup(){ //优先级最高 处于created生命周期之前的函数，是无法访问data，methods中的数据是无法访问到的，setup中的this指向undefined} ①beforeCreate(){ // vue对象创建成功之前 } 阅读全文

摘要： 1.vue3合成API ：（即为什么要用setup() :为了数据更加关联） vue3 引入setup()合成API语法，它可以将某数据关联的内容整合到一个部分，即使setup里的内容越来越多也会围绕着大而不乱的形式开发项目。 例子： 点击事件触发count自增 ①App.vue<template> 阅读全文

摘要： 1.组件之间的通信 ①父子组件数据通信： ★第一种：父==》子 props，子==》父 触发自定义事件 第二种：父组件provide抛出数据，子组件injiect接收数据 ②非父子组件之间的数据通信 ★第一种：事件走总线Bus（空vue对象） ★第二种：状态管理库vuex 父组件provide抛出数 阅读全文

摘要： 对象传参（值为函数的形式） ①index.jsconst routes =[ { path:'/user', name:'user', //路由名称 component: User, props: function (route) { // route是当前路由信息对象 return{ id:rou 阅读全文

摘要： 静态路由的案例1. vite创建项目 router001 2. router001配置路由 三个组件 Bar Foo User 3.在app.vue 设置路由导航 ， 触发路由机制 ①npm init vite-app router001 ②cd router001 ③npm i ④npm i vu 阅读全文

摘要： porps传参（最常用的 布尔传值）（基于前面的步骤进行修改） ①index.js //定义动态路由 props:trueconst routes =[ {path:"/user/:id/:name/:age",component:User,props:true} ] ②app.vue //定义传参 阅读全文

摘要： Ⅰ、 paramas传参 ①index.js定义动态路由的格式 const routes =[ {path:"/user/:id/:name/:age",component:User}//动态路由的配置] ②app.vue传参要格式对应 <div> <router-link to="/user/1/ 阅读全文