161 lines
2.4 KiB
Plaintext
161 lines
2.4 KiB
Plaintext
|
||
m（model 数据）v（view 页面）c（controller 控制器 ）
|
||
|
||
vue
|
||
|
||
原生js阶段
|
||
|
||
jquery 对原生js进行二次封装
|
||
|
||
|
||
nodejs
|
||
|
||
m（model 数据）v（view 页面） vm （view and model）
|
||
|
||
angular
|
||
|
||
react
|
||
|
||
vue
|
||
|
||
使用js链接
|
||
|
||
基于nodejs来使用
|
||
|
||
vue 1.x
|
||
|
||
vue 2.x 全球 60% ~ 70%
|
||
|
||
option api （选项式api）
|
||
|
||
typescript
|
||
|
||
class api （类 api）
|
||
|
||
vue 3.x 30% ~ 40%
|
||
composition api（组合式api） (function api)
|
||
|
||
vue 4.x 网传筹备
|
||
|
||
|
||
核心：
|
||
|
||
组件系统
|
||
数据双向绑定，响应式（数据）
|
||
|
||
|
||
生命周期
|
||
计算属性
|
||
侦听器
|
||
|
||
https://v2.cn.vuejs.org/v2/guide/class-and-style.html
|
||
组件
|
||
|
||
什么叫组件？
|
||
|
||
把公共，或者通用的布局拆分成独立的文件，提高页面的复用率
|
||
|
||
全局组件
|
||
|
||
局部组件
|
||
|
||
父组件 向 子组件 传递数据
|
||
props
|
||
|
||
子组件 向 父组件 传递数据
|
||
$emit
|
||
|
||
动态组件
|
||
|
||
插槽
|
||
|
||
别名插槽
|
||
|
||
作用域插槽
|
||
|
||
干什么用的？
|
||
|
||
|
||
混入
|
||
自定义指令
|
||
过滤器
|
||
|
||
指令
|
||
生命周期
|
||
组件全部
|
||
|
||
|
||
vue-cli
|
||
|
||
vuex
|
||
|
||
vue-router
|
||
|
||
4.x 和 vue3.x 版本组合的
|
||
3.x 和 vue2.x 版本组合的
|
||
|
||
路由：访问网址，页面跳转 的综合(很多功能)插件
|
||
|
||
原生js阶段：a 或者js
|
||
|
||
解决a标签的问题：使用ajax请求页面的代码，然后innerHTML到当前页面上，并完全遮住上一个页面
|
||
|
||
传参：
|
||
query
|
||
www.baidu.com?id=1&page=3
|
||
:to="{ path (name？？): '/info', query: { id: item.id } }"
|
||
|
||
this.$route.query.xxx
|
||
|
||
params
|
||
www.baidu.com/1/3
|
||
:to="{ name: 'info', params: { page: 2, id: item.id } }"
|
||
{ path: '/info/:id/:page', name: 'info', component: Info },
|
||
|
||
this.$route.params.xxx
|
||
|
||
|
||
注意：
|
||
|
||
this.$route 是获取地址，参数这些东西
|
||
|
||
this.$router 是获取 new VueRouter 实例的
|
||
|
||
|
||
vue-router 实现原理
|
||
|
||
hash（#）
|
||
www.baidu.com#/info?id=2
|
||
www.baidu.com#/my
|
||
|
||
file:///C:/Users/bmy/Desktop/fontend10/每天课程/2023-03-21/vueRouter.html#/car
|
||
|
||
http://127.0.0.1:5500/每天课程/2023-03-21/vueRouter.html
|
||
http://127.0.0.1:5500/car
|
||
|
||
file:///C:/Users/bmy/Desktop/fontend10/my
|
||
|
||
http://127.0.0.1:5500 ---> file:///C:/Users/bmy/Desktop/fontend10/每天课程/2023-03-21/vueRouter.html
|
||
|
||
|
||
|
||
history
|
||
|
||
www.baidu.com/car
|
||
www.baidu.com/info?id=2
|
||
|
||
file:///C/car
|
||
|
||
|
||
|
||
导航守卫:
|
||
|
||
全局守卫
|
||
前置
|
||
后置
|
||
|
||
路由独享的守卫
|
||
|
||
组件内的守卫
|
||
|
||
todo 路由懒加载 |