欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解Vue.js Mixins 混入使用

 更新時間:2017年09月15日 11:32:16   作者:大灰狼的小綿羊哥哥  
本篇文章主要介紹了Vue.js Mixins 混入使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

Mixins一般有兩種用途:

1、在你已經(jīng)寫好了構(gòu)造器后,需要增加方法或者臨時的活動時使用的方法,這時用混入會減少源代碼的污染。

2、很多地方都會用到的公用方法,用混入的方法可以減少代碼量,實(shí)現(xiàn)代碼重用。

一、Mixins的基本用法

我們現(xiàn)在有個數(shù)字點(diǎn)擊遞增的程序,假設(shè)已經(jīng)完成了,這時我們希望每次數(shù)據(jù)變化時都能夠在控制臺打印出提示:“數(shù)據(jù)發(fā)生變化”.

代碼實(shí)現(xiàn)過程:

<!DOCTYPE html>
<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">增加數(shù)量</button></P>
  </div>
 
  <script type="text/javascript">
    //額外臨時加入時,用于顯示日志
    var addLog={
      updated:function(){
        console.log("數(shù)據(jù)放生變化,變化成"+this.num+".");
      }
    }
    var app=new Vue({
      el:'#app',
      data:{
        num:1
      },
      methods:{
        add:function(){
          this.num++;
        }
      },
      mixins:[addLog]//混入
    })
  </script>
</body>
</html>

二、mixins的調(diào)用順序

從執(zhí)行的先后順序來說,都是混入的先執(zhí)行,然后構(gòu)造器里的再執(zhí)行,需要注意的是,這并不是方法的覆蓋,而是被執(zhí)行了兩邊。

在上邊的代碼的構(gòu)造器里我們也加入了updated的鉤子函數(shù):

updated:function(){


   console.log("構(gòu)造器里的updated方法。")


},

這時控制臺輸出的順序是:

mixins數(shù)據(jù)放生變化,變化成2.
構(gòu)造器里的updated方法。

PS:當(dāng)混入方法和構(gòu)造器的方法重名時,混入的方法無法展現(xiàn),也就是不起作用。

三、全局API混入方式

我們也可以定義全局的混入,這樣在需要這段代碼的地方直接引入js,就可以擁有這個功能了。我們來看一下全局混入的方法:

Vue.mixin({


  updated:function(){


    console.log('我是全局被混入的');


  }


})

PS:全局混入的執(zhí)行順序要前于混入和構(gòu)造器里的方法。

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論