Mixins 混入选项操作

最新推荐文章于 2023-02-20 12:56:18 发布

bug的生产者

最新推荐文章于 2023-02-20 12:56:18 发布

阅读量141

点赞数

分类专栏： 3.Vue的选项

3.Vue的选项专栏收录该内容

6 篇文章 0 订阅

订阅专栏

来源于技术胖的视频讲解
1.Mixins的一般用处
在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。
在这里插入图片描述
混入的先执行原生的后执行

<!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 src="../assets/js/vue.js" type="text/javascript"></script>
  </head>
  <body>
    <h1>mixins</h1>
    <hr />
    <div id="app">
        <p>{{num}}</p>
        <p><button @click="add" >点我增加</button></p>
    </div>
    <script>
        var addConsole={
            updated:function(){//updated为Vue的生命周期钩子函数
                console.log('我是混入的，数据发生了变化，变成了'+this.num)
            }
        }
        var app = new Vue({
            el:'#app',
            data:{
                num:0
            },
            methods:{
                add(){
                    this.num+=1
                }
            },
            updated(){
                console.log('我是原生的')
            },
            mixins:[addConsole]//为一个数组支持添加多个
        })
    </script>
  </body>
</html>

2.我们也可以定义全局的混入，这样在需要这段代码的地方直接引入js，就可以拥有这个功能了。我们来看一下全局混入的方法：

Vue.mixin({
    updated:function(){
        console.log('我是全局被混入的');
    }
})

在这里插入图片描述
全局的最先执行

<!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 src="../assets/js/vue.js" type="text/javascript"></script>
  </head>
  <body>
    <h1>mixins</h1>
    <hr />
    <div id="app">
        <p>{{num}}</p>
        <p><button @click="add" >点我增加</button></p>
    </div>
    <script>
        var addConsole={
            updated:function(){//updated为Vue的生命周期钩子函数
                console.log('我是混入的，数据发生了变化，变成了'+this.num)
            }
        }
        Vue.mixin({
            updated(){
                console.log('我是全局的混入')
            }
        })
        var app = new Vue({
            el:'#app',
            data:{
                num:0
            },
            methods:{
                add(){
                    this.num+=1
                }
            },
            updated(){
                console.log('我是原生的')
            },
            mixins:[addConsole]//为一个数组支持添加多个
        })
    </script>
  </body>
</html>

bug的生产者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Mixins 混入选项操作

来源于技术胖的视频讲解1.Mixins的一般用处在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。混入的先执行原生的后执行<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name...
复制链接

扫一扫