<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/vue.js"></script>
<title></title>
</head>
<body>
<h1>Mixins 混入选项操作 -- 不改变构造器.增加需求</h1>
<hr>
<div id="app">
{{num}}
<button @click="add">增加</button>
</div>
<script type="text/javascript">
var addConsole={
//生命周期 -数据发生变化
updated(){
console.log('数据发生变化,变成了'+this.num);
}
};
//全局要使用大写的V
Vue.mixin({
updated(){
console.log('我是全局的混入');
}
})
var app=new Vue({
el:'#app',
data:{
num:1
},
methods:{
add(){
this.num++;
}
},
//混入
mixins:[addConsole],
})
</script>
</body>
</html>