<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Mixins 混入选项操作</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Mixins 混入选项操作</h1>
<hr>
<div id="app">
{{num}} <br>
<p> <button @click="add">add</button> </p>
</div>
<script type="text/javascript">
var consoleMixins = {
updated:function(){
console.log("数据发生变化时"+this.num);
}
};
Vue.mixin({
updated:function(){
console.log("这是全局混入的");
}
});
var app = new Vue({
el: "#app",
data:{
num:0
},
methods:{
add:function(){
this.num++;
}
},
updated:function(){
console.log("构造器内部的updated");
},
mixins:[consoleMixins]
});
</script>
</body>
</html>