(五)Vue中的混入mixins
2018-02-15 本文已影响0人
我拥抱着我的未来
本节知识点
- 混入操作
mixins使用
-
简单来说当我们写好了构造器，可是又有需求了，我又不想污染源代码。那么我可以用mixins:[]来解读
-
混入的地方减少代码量，实现代码重用
基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{num}}</p>
<button @click="add(2)">变化了</button>
</div>
</body>
<script>
var addchange = {
updated: function(){
console.log("每次都变化");
}
}
var app = new Vue({
el:"#app",
data:{
num:2
},
methods:{
add:function(num){
this.num = this.num+parseInt(num);
}
},
mixins:[addchange]
})
app.$watch("num",function(newval,oldval){
if(newval>20&&newval<24)
{
console.log("超过20了");
}else if(newval>20&&newval<40)
{
console.log("在20到40之间")
}
})
</script>
</html>
mixin调用顺序
- 优先执行全局的mixin然后是混入接着是构造
Vue.mixin({
updated: function(){
console.log("每次都变化");
}
})
