first commit

历届学生/front-end-team-10/每天课程/2023-03-21/笔记.txt

@@ -0,0 +1,161 @@
+
+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 路由懒加载