122 lines
1.7 KiB
Plaintext
122 lines
1.7 KiB
Plaintext
|
||
原生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 以上 |