zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    USACO 2017 US Open Contest Gold T1: Bovine Genomics
    自己瞎调的一些曲子
    NOIP前要干的一些事
    【[BJOI2018]链上二次求和】
    【MdOI2020】Path
    【[SDOI2018]旧试题】
    [IOI2018]werewolf狼人
    洛谷p5444 [APIO2019]奇怪装置
    洛谷p4211 [LNOI2014] LCA
    洛谷P2805 [NOI2009] 植物大战僵尸
  • 原文地址:https://www.cnblogs.com/sunyang-001/p/11104910.html
Copyright © 2011-2022 走看看