vue3.0

目录

1、vite

2、全局组件

3、样式穿透

4、动态绑定HTML的class

5、props验证

 6、自定义事件

7、通过v-model实现子向父和父向子同步数据

8、生命周期

9、数据共享

 10、全局配置axios

11、ref

 12、插槽

 13、自定义指令

14、路由

15、路由高级

16、封装饿了么组件

---

---

1、vite

2、全局组件

 

3、样式穿透

4、动态绑定HTML的class

 

 

5、props验证

 

 6、自定义事件

和vue2.0的子传父一样，只是多了个emits的声明

7、通过v-model实现子向父和父向子同步数据

先父向子传值，再通过v-model双向绑定数据

8、生命周期

 

 

 

9、数据共享

数据共享方式：父传子，子传父，父子之间双向同步和兄弟之间数据共享

兄弟之间数据共享：

 

后代关系组价之间的数据共享：

 基于p'rovide向下响应数据：

 10、全局配置axios

11、ref

 ref的使用：

$nextTick

 12、插槽

前面一个是组件，第二个是根组件：

 后备内容：

 具名插槽：

简写：#

 作用域插槽：

使用：

 作用域插槽解构赋值：

 13、自定义指令

私有：

 全局：在main声明

 

 

14、路由

基本使用：

路由配置：

import { createRouter, createWebHashHistory } from 'vue-router'
import a from '../components/router-demo/one.vue'
import b from '../components/router-demo/two.vue'
import c from '../components/router-demo/three.vue'
const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        { path: '/a', component: a },
        { path: '/b', component: b },
        { path: '/c', component: c }
    ]
})
export default router

 在main中调用：

 

 组件中使用：

15、路由高级

 路由高亮：

 

 通过linkActiveClass设置类名，再去css设置高亮效果

 嵌套路由：

        

 动态路由匹配：

获取动态路由参数值 的两种方法

 

 编程式导航：

 命名路由：

 

 导航守卫：

全局导航守卫：

 

 

16、封装饿了么UI模块