Mixin -- mixed

mixin yes vue One of the technologies of component reuse function It can encapsulate the properties and methods that appear repeatedly in multiple components to facilitate multiple calls

Use

1. Mixing is to encapsulate the attributes and methods used by components many times

Create a new one mixin The folder of is used to contain the mixed encapsulation

export let demo={  methods:{      fun(){          console.log(" Hello ！！！！！！")      }  },  data(){      return {​      }  },  computed:{​  }}

call

The whole thing is in --mixin

Careful use may cause code pollution 、

import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'// 1. quote mixinimport {demo} from "./mixins"// 2. Configure global blending Vue.mixin(demo)​Vue.config.productionTip = false​new Vue({ router, store, render: h => h(App)}).$mount('#app')​

To mix in partially --mixins

<template> <div class="about">   <h1>This is an about page</h1>   <!-- 3. You can use the mixed content as you want  -->   <button @click="fun()"> Click on me to call the mixed method --{{text}}</button> </div></template><script>// 1. Reference blending import {demo} from "@/mixins"export default {// 2. Call blending  mixins:[demo]}​</script>​

 

Vue Hook functions of the life cycle

beforeCreate The instance is ready to be created （ Data observation and initialization events have not been executed yet ）

created Instance creation finished （ Completed the observation of data attribute Methods are also initialized But the page doesn't show the rendering ）

beforeMount Template ready to render （ In preparation for template The template is hung in the page Ready to compile page content ）

mounted Call... Immediately after the page is loaded （ The page was successfully mounted Page dom The content is also generated ）

beforeUpdate Start preparing for updates （ Call when the data is ready to be updated At this time, it is still in the preparation stage of data construction and update ）

updated Updated completely （ The data has been successfully displayed on the page dom Has been updated in ）

beforeDestroy Start preparing for destruction （vue Examples still work ）

Destroyed Destroyed

Custom instruction hook function

bind : Binding instructions to elements Only once ;

inserted : The element bound with the instruction is called when inserting the page display

update： Call when all nodes are updated

componentUpdate: The node of the component where the instruction is located and all its own child nodes have been updated Calling

unbind: Call when contacting the binding of an instruction and an element Only once

 

The source code attachment has been packaged and uploaded to Baidu cloud , You can download it yourself ～

 link : https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27 Extraction code : yu27

Baidu cloud link is unstable , It may fail at any time , Let's keep it tight .

If Baidu cloud link fails , Please leave me a message , When I see it, I will update it in time ～

Open source address

Code cloud address ：
http://github.crmeb.net/u/defu

Github Address ：
http://github.crmeb.net/u/defu