<html lang="en">
<head>
<meta charset="UTF-8" />
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>Mixins Option Demo</title>
</head>
<body>
<h1>Mixins Option Demo</h1>
<hr />
<div id="app">
<p>num:{{ num }}</p>
<p><button @click="add">增加数量</button></p>
<button @click="trumpet(),istrumpet=!istrumpet">事件</button>
</div>
<script type="text/javascript">
//额外临时加入时，用于显示日志
var addLog = {
updated: function() {
console.log("数据放生变化,变化成" + this.num + ".");
}
};
var app = new Vue({
el: "#app",
data: {
num: 1
},
methods: {
add: function() {
this.num++;
}
},
mixins: [addLog] //混入
});
//从执行的先后顺序来说，都是混入的先执行，然后构造器里的再执行，需要注意的是，这并不是方法的覆盖，而是被执行了两边。
// 在上边的代码的构造器里我们也加入了updated的钩子函数：
// 我们也可以定义全局的混入，这样在需要这段代码的地方直接引入js，就可以拥有这个功能了。我们来看一下全局混入的方法：
// Vue.mixin({
// updated:function(){
// console.log('我是全局被混入的');
// }
// })
// PS：全局混入的执行顺序要前于混入和构造器里的方法。
</script>
</body>
</html>
扫一扫
06-22
7892
7892
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
