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 mixin
import {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>
&nbsp;<div&nbsp;class=&quot;about&quot;>
&nbsp; &nbsp;<h1>This is an about page</h1>
&nbsp; &nbsp;<!-- 3. You can use the mixed content as you want  -->
&nbsp; &nbsp;<button&nbsp;@click=&quot;fun()&quot;> Click on me to call the mixed method --{{text}}</button>
&nbsp;</div>
</template>
<script>
// 1. Reference blending
import&nbsp;{demo} from&nbsp;&quot;@/mixins&quot;
export&nbsp;default&nbsp;{
// 2. Call blending
&nbsp;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