二十四、Mixins 混入选项操作

                         Mixins 混入选项操作

Mixins一般有两种用途:

    1、在你已经写好了构造器后,需要增加方法或者临时的活动时使用的方法,这时用混入会减少源代码的污染。
    2、很多地方都会用到的公用方法,用混入的方法可以减少代码量,实现代码重用。

<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>
    </div>


    <script type="text/javascript">
        //全局API混入方式
        Vue.mixin({
            updated:function(){
                console.log('我是全局被混入的===');
            }
        })
        
        //所谓的混入就是一个临时增加,额外临时加入时,用于显示日志
        //从执行的先后顺序来说,都是混入的先执行,然后构造器里的再执行,
        // 需要注意的是,这并不是方法的覆盖,而是被执行了两边。
        var addLog={
            updated:function(){
                console.log("数据放生变化,变化成"+this.num+".");
            }
        }


        var app=new Vue({
            el:'#app',
            data:{
                num:1
            },
            methods:{
                add:function(){
                    this.num++;
                }
            },
            updated:function(){
                console.log("构造器里的updated方法。")
            },
            mixins:[addLog]//混入
        })
    </script>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值