117 lines
1.7 KiB
Plaintext
117 lines
1.7 KiB
Plaintext
|
||
html css 写在html
|
||
也没有div + css
|
||
|
||
table + css(选择器)
|
||
|
||
js 发展
|
||
|
||
div + css
|
||
|
||
jquery 操作dom的
|
||
|
||
|
|
||
|
|
||
nodejs
|
||
|
|
||
|
|
||
|
||
过渡年代：前端 m（数据）v（视图）c（控制器） 年代
|
||
|
||
|
||
前端三大框架 m（数据）v（视图） vm（视图和模型） 框架
|
||
spa (框架)单页web应用
|
||
|
||
操作虚拟dom diff 组件化开发
|
||
|
||
angular.js
|
||
|
||
react.js
|
||
|
||
vue.js
|
||
|
||
vue 1.x php laravel 作者
|
||
vue 2.x 进入国内（全球） vue-router 3.x
|
||
es5 语法的 js写的
|
||
|
||
|
|
||
|
|
||
typescript
|
||
|
|
||
|
|
||
|
||
vue 3.x(next) vue-router 4.x
|
||
|
||
|
||
vue.js 三套语法风格：
|
||
vue 1.x vue 2.x options api 选项式
|
||
{
|
||
data: {}
|
||
methods: {}
|
||
}
|
||
|
||
过渡：vue2 支持 ts 语法的 插件包 （很多）
|
||
class api
|
||
|
||
vue3.x composition(function) api 组合式
|
||
|
||
|
||
|
||
|
||
基于 html 来用
|
||
|
||
基于 nodejs 来用
|
||
|
||
|
||
vue-router
|
||
|
||
hash
|
||
#地址名字
|
||
#/about
|
||
|
||
history
|
||
/about
|
||
|
||
$router 访问 vue-router 内置方法
|
||
$route 访问 vue-router 的地址信息
|
||
|
||
页面跳转
|
||
标签跳转 router-link
|
||
方法跳转 this.$router.xxx
|
||
|
||
参数传递：
|
||
|
||
query传参
|
||
http://www.baidu.com/index?id=1&page=2
|
||
|
||
params
|
||
http://www.baidu.com/index/1/2
|
||
|
||
注意：
|
||
params 传参一定不能用 path 进行跳转
|
||
|
||
|
||
导航守卫
|
||
全局守卫
|
||
全局前置守卫
|
||
全局后置钩子
|
||
|
||
路由独享的守卫
|
||
|
||
组件内的守卫
|
||
beforeRouteEnter
|
||
beforeRouteUpdate
|
||
beforeRouteLeave
|
||
|
||
|
||
vue
|
||
|
||
vue-cli 脚手架 （帮我做好了所有基本的事情和准备）
|
||
|
||
2.x
|
||
|
||
3.x
|
||
|
||
vue-cli 2 + vue 2
|
||
|
||
vue cli 3 + vue 3 |