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 路由懒加载