mixin是vue组件复用功能的技术之一 他可以把多个组件中重复出现的属性和方法进行封装方便多次调用
使用
1.混入就是把组件多次使用的属性和方法等内容进行封装
新建一个mixin的文件夹用来容纳混入的封装
export let demo={
methods:{
fun(){
console.log("你好！！！！！！")
}
},
data(){
return {
}
},
computed:{
}
}调用
全局混入--mixin
慎用可能会造成代码的污染、
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 1.引用mixin
import {demo} from "./mixins"
// 2.配置全局混入
Vue.mixin(demo)
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
局部混入--mixins
<template>
<div class="about">
<h1>This is an about page</h1>
<!-- 3.就可以直接想怎么用就怎么用混入的内容 -->
<button @click="fun()">点我调用混入的方法--{{text}}</button>
</div>
</template>
<script>
// 1.引用混入
import {demo} from "@/mixins"
export default {
// 2.调用混入
mixins:[demo]
}
</script>
Vue生命周期的各个钩子函数
beforeCreate 实例准备创建 （数据观测与初始化事件还没有执行）
created 实例创建完毕 （完成了数据的观测 属性 方法也都进行了初始化 但是页面没有显示渲染）
beforeMount 模板准备渲染 （在准备把template模板往页面中进行挂在 准备编译页面内容）
mounted 页面加载完毕之后立即调用 （页面被成功的进行了挂载 页面的dom内容也都生成完毕）
beforeUpdate 开始准备更新（在数据准备更新的时候调用 此时还处于数据构建更新的准备阶段）
updated 更新完毕 （数据已经成功的在页面dom中更新完毕了）
beforeDestroy 开始准备销毁（vue实例还能用）
Destroyed 销毁完毕
自定义指令钩子函数
bind : 绑定指令到元素上 只执行一次；
inserted : 绑定了指令的元素在插入页面展示的时候调用
update： 所有节点更新的时候调用
componentUpdate: 指令所在组件的节点以及他自己所有的子节点全部更新了 在调用
unbind: 接触指令和元素的绑定时候调用 只执行一次
源码附件已经打包好上传到百度云了，大家自行下载即可～
链接: https://pan.baidu.com/s/14G-bpVthImHD4eosZUNSFA?pwd=yu27
提取码: yu27百度云链接不稳定，随时可能会失效，大家抓紧保存哈。
如果百度云链接失效了的话，请留言告诉我，我看到后会及时更新～
开源地址
码云地址：
http://github.crmeb.net/u/defu
Github 地址：
http://github.crmeb.net/u/defu
{{o.name}}
{{m.name}}