first commit

历届学生/front-end-team/每天课程/2020-04-12/笔记.txt

@@ -0,0 +1,122 @@
+
+原生js （jquery）
+
+dom 操作
+
+
+mvc
+m（model 数据）v（view 视图）c（controller 控制器） 
+
+
+vue.js  react.js  angular.js
+
+去 dom 操作
+
+m（model 数据 ajax数据）v（view 页面） vm（view and model） 
+
+双向绑定  
+
+模块（组件）系统
+
+插槽
+
+
+选看
+  自定义指令
+
+  混入
+
+  过滤器
+  动画
+
+Vue Router 路由
+
+vue官方提供的 路由 管理工具
+
+页面地址
+www.baidu.com /index
+www.baidu.com /about
+
+
+路由模式：
+
+  路径变化的时候，页面不会刷新
+
+  hash
+  www.baidu.com/#/index?id=1
+  www.baidu.com/#/about
+
+  window.location.hash
+
+  onhashchange 监听地址栏的 hash 地址变化，然后拿到新的 hash地址，然后去映射表中找到这个地址对应
+               的页面，然后把页面显示到指定位置
+
+
+  history
+  www.baidu.com/index
+  www.baidu.com/about
+
+    pushState() 和 replaceState()
+
+    补发代码实现的网址
+
+
+   
+有两种页面跳转的方式
+
+  query
+  www.baidu.com/index?id=1&page=1
+    :to="{ name: '/info', query: { id:item.id } }" 
+
+    取参数：this.$route.query.参数字段名
+
+  params
+  www.baidu.com/index/1/2
+
+    :to="{ name: '/info', params: { id:item.id } }" 
+
+    取参数：this.$route.params.参数字段名
+
+    注意： path: '/info/:id/:name',  
+
+
+ $router  vue-router 提供的方法   
+ $route   获取路由信息 
+
+ this.$router.push 跳转后，可以返回之前页面
+
+ xxx.replace  不能返回
+
+
+ 导航守卫
+
+   全局导航守卫
+     beforeEach
+   路由导航守卫
+     beforeEnter
+   页面导航守卫
+    beforeRouteEnter
+    beforeRouteUpdate
+    beforeRouteLeave
+
+
+
+vue.js   
+
+ 2.x
+
+ 3.x
+
+  this 指向
+
+  setup(){
+
+
+  }
+
+
+vue-cli 脚手架  开箱即用
+
+  vue-cli 2.x 
+
+  vue-cli 3.x 以上