技术QQ交流群:294088839
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Mixins 混入选项</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Vue Mixins 混入选项</h1>
<p>不污染原始的样子来混入到项目中去</p>
<hr>
<div id="app">
<p>
{{num}}
</p>
<p><button @click="add">add</button></p>
</div>
</body>
</html>
<script>
var addConsole={
//钩子方法
updated:function () {
console.log('数据发生变化'+this.num)
}
};
//全局的API混入
Vue.mixin({
updated:function(){
console.log('我是全局的混入')
}
});
var app = new Vue({
el:'#app',
data:{
num:1
},
updated:function(){
console.log('我是构造器触发的')
},
methods:{
add:function(){
this.num++
}
},
//混入
mixins:[addConsole]
})
</script>