This is the 9th day of my participation in the November Gwen Challenge. See details: The Last Gwen Challenge 2021.

vue2

First of all, let’s review some important knowledge points in VUE2.

What is MVVM?

1. M Model: data in corresponding data. 2. V View: corresponding template. 3. VM viewModel: Vue instance object.

The life cycle

The official chart is pretty clear, starting the create-to-destroy process.There are two more hooks:

activated: called when activated by a keep-alive cached component.

deactivated: called when a component cached by keep-alive is inactivated.

errorCaptured: is called when an error from a descendant component is caught

component

Vue components are divided into local components and global components.

Local component introduction:

new Vue({ 
el: '#app',
components: {
'component-a': ComponentA, 
'component-b': ComponentB 
} 
})
---or---
import ComponentA from './ComponentA.vue'
export default { 
components: { 
ComponentA 
},
// ... }
Copy the code

Global component introduction:

Vue.component('my-component-name', { /* ... */ })
Copy the code

Component caching

<! -- Deactivated components will be cached! --> <keep-alive> <component v-bind:is="currentTabComponent"></component> </keep-alive>Copy the code

Asynchronous loading of components

'my-component'() => import('./my-async-component')
Copy the code

4. Value transfer of components

The father the son: child components by props receive | | $refs or by preach value child parent: by $emit event callback value A global event bus:

$bus.$on('event', callback) emit this.$bus.$emit('eventName', callback) $off([event, callback])]Copy the code

Slot slot.

Child component <slot></slot> Parent component <child>- Slot content is displayed in child slot-</child> // named slot child component <slot name="name"></slot> parent component <template v-slot:[name]></tepmlate>Copy the code

vuex

Vuex has five attributes: State, getters, Mutations, Actions and modules. The only way to change the state in the store of Vuex is to commit mutation. 2. Action handles asynchronous operations. 3, modules, partition module. 5. Vuex status is responsive, and computed is generally used for reading

routing

$router. Push

Query this.$route.params this.$route.query this.$route.query It’s kind of like get and post. Nested routines use the children argument, Component

const router = new VueRouter({ routes: [ { path: '/user/:id', component: User, children: [{// If /user/:id/profile matches successfully, // UserProfile will be rendered in user's <router-view> path: 'profile', Component: UserProfile}, {// When /user/:id/posts match successfully // UserPosts will be rendered in user <router-view> path: 'posts', component: UserPosts } ] } ] })Copy the code

Routing mode:

Both hash and history are configured using router.mode. Navigation guard:

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
})
Copy the code

Route permission management can be done by navigation guard.

Route lazy loading

For projects built through the CLI, we typically use import to import components for lazy loading.

const Foo = () => import('./Foo.vue')
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo)
 }
  ]
})
Copy the code

Custom instruction

[definition] {vue.directive (ID, [definition])] {BIND, INSERTED, Update, componentUpdated, unbind El, bind, vnode, oldVnode creation: multiple component definition, we usually create a separate file export.

export default {... }Copy the code

Introduction:

import directive from 'directive.js'
Object.keys(directive).forEach((fncName) => {
    Vue.directive(fncName, directive[fncName])
})
Copy the code

The filter

Definition: vue. filter('capitalize', function (value) {return... }) use: {{message | capitalize}} - or - < div v - bind: id = "rawId | formatId" > < / div >Copy the code

At the end

Self-grooming. Well! It’s late. Continue tomorrow