## Vue life cycle
1） new Vue ()
2) Initialization (event, life cycle) => h function
3） beforeCreate
4) Initialization (injection, verification)
5） created
6) Whether to specify the el option => if not set, call the vm.$mounted(el) function
=> If set, whether to specify template
7) template => If specified, the template will be compiled into the render function
=> Compile the external HTML of el as a template without setting
8） beforeMount
9) Create vm.$el and replace "el" with it
10）mounted
11) Mounting is complete
12) When the data is modified, the virtual DOM re-renders and updates the application beforeUpdate, Updated
13) When calling the vm.$destory() function
14）beforeDestroy
15) Unbinding and destroying sub-components and event monitoring
16）destoryed
17) Destroyed
## Vue syntax and concepts
-Difference expression { {}}
-Instructions (14)
-Calculated properties and listeners
-Class and Style binding
-Conditional rendering / list rendering
-Form input binding
-Components
-Slot
-Plugin
-Mixin
-In-depth responsive principle
-Different build versions of Vue
## Vue Router Review
-Register routing plugin Vue.use(VueRouter)
-Routing rules
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']
}-Nested routing
{
path: '/',
component: Layout,
children: [
{
name: 'index',
path: '',
component: Index
},
{
name: 'detail',
path: 'detail/:id',
props: true,
component: () => import('@/views/Detail.vue')
}
]
}-Programmatic navigation
this.$router.push("/");
this.$router.push({name:name});
this.$router.replace("/"); will not be recorded in history
this.$router.go(-1) == this.$router.back();
-The difference between Hash mode and history mode
1) HASH mode is based on anchor points and onhashchange events
2) Histroy mode is based on History API in HTML5 (with compatibility issues)
- history.pushState()
- history.replaceState()