• vue.js基础__ mixins 选项


    mixins 选项主要应用于新增需求;

    在不改变原有方法的基础上,使用mixins 混入选项;

    - 以点击加1为例,分为局部和全局两种

    - 再混入选项中设置updated方法

    - updated 方法,会在局部,全局,以及原生方法中设置

    - 执行顺序为 全局的updated优先执行,然后局部的updated方法执行,最后原生的updated方法执行

    代码示例如下:

    <!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 option</title>
    <script src="../assets/js/vue.js"></script>
    </head>

    <body>
    <h1>mixins option</h1>
    <hr>
    <div id="app">
    {{num}}
    <p><button @click="add">add</button></p>
    </div>

    <script>

    var addConsole = {
    updated() {
    console.log(`数据改变为` + this.num);
    }
    }

    Vue.mixin({
    updated () {
    console.log('我是全局updated');
     
    }
    })

    var app = new Vue({
    el: '#app',
    data: {
    num: 1
    },
    methods: {
    add() {
    this.num++
    }
    },
    updated () {
    console.log('我是原生的updated');
    },
    mixins: [addConsole]
    })
    </script>
    </body>

    </html>

  • 相关阅读:
    第三次作业
    第二次作业
    第一次作业
    软件工程第0次作业
    第四次作业
    第三次作业
    第二次作业
    第一次作业
    第零次作业
    第四次软件工程作业
  • 原文地址:https://www.cnblogs.com/sunyang-001/p/11104910.html
Copyright © 2020-2023  润新知