## Vue 生命周期
1) new Vue()
2) 初始化(事件,生命周期) => h函数
3) beforeCreate
4) 初始化(注入,校验)
5) created
6) 是否指定 el 选项 => 没设定的话调用 vm.$mounted(el) 函数
=> 设定的话是否指定 template
7) template => 指定了就讲 template 编译到 render 函数中
=> 没设定就将 el的外部HTML作为 template 编译
8) beforeMount
9) 创建 vm.$el 并用其替换 "el"
10)mounted
11)挂载完毕
12)当data被修改时,虚拟DOM重新渲染并更新应用beforeUpdate,Updated
13)当调用 vm.$destory() 函数时
14)beforeDestroy
15)解除绑定销毁子组件及事件监听
16)destoryed
17)销毁完毕
## Vue 语法和概念
- 差值表达式 { {}}
- 指令(14 个)
- 计算属性和侦听器
- Class 和 Style 绑定
- 条件渲染 / 列表渲染
- 表单输入绑定
- 组件
- 插槽
- 插件
- 混入 mixin
- 深入响应式原理
- 不同构建版本的 Vue
## Vue Router 回顾
- 注册路由插件 Vue.use(VueRouter)
- 路由规则
const routes = [
{
path: '/detail/:id',
name: 'Detail',
// 开启 props,会把 URL 中的参数传递给组件
// 在组件中通过 props 来接收 URL 参数
props: true,
component: () => import(/_ webpackChunkName: "detail" _/ '../views/Detail.vue')
},
export default {
name: 'Detail',
props: ['id']
}
- 嵌套路由
{
path: '/',
component: Layout,
children: [
{
name: 'index',
path: '',
component: Index
},
{
name: 'detail',
path: 'detail/:id',
props: true,
component: () => import('@/views/Detail.vue')
}
]
}
- 编程式导航
this.$router.push("/");
this.$router.push({name:name});
this.$router.replace("/");不会记入历史
this.$router.go(-1) == this.$router.back();
- Hash 模式与 history 模式的区别
1) HASH模式是基于锚点,以及onhashchange事件
2) histroy模式是基于HTML5中的History API(有兼容性问题)
- history.pushState()
- history.replaceState()