Vue.js 混入_ZenDei技術網路在線

Vue.js 混入

-Advertisement-

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>demo</title>  <link href="https://cdn.jsdelivr.net/npm/animate.css@3. ...

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
<!--  引入animate.css-->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">
  <style>
  </style>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

<div id = "databinding"></div>
<script type = "text/javascript">
  var vm = new Vue({
    el: '#databinding',
    data: {
    },
    methods : {
    },
  });
  // 定義一個混入對象
  var myMixin = {
    created: function () {
      this.startmixin()
    },
    methods: {
      startmixin: function () {
        document.write("歡迎來到混入實例");
      }
    }
  };
  var Component = Vue.extend({
    mixins: [myMixin]
  })
  var component = new Component();
</script>

當組件和混入對象含有同名選項時，這些選項將以恰當的方式混合。

比如，數據對象在內部會進行淺合併 (一層屬性深度)，在和組件的數據發生衝突時以組件數據優先。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
<!--  引入animate.css-->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">
  <style>
  </style>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

<div id = "databinding"></div>
<script type = "text/javascript">
  var mixin = {
    created: function () {
      document.write('混入調用' + '<br>')
    }
  }
  new Vue({
    mixins: [mixin],
    created: function () {
      document.write('組件調用' + '<br>')
    }
  });
</script>

如果 methods 選項中有相同的函數名，則 Vue 實例優先順序會較高。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
<!--  引入animate.css-->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">
  <style>
  </style>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

<div id = "databinding"></div>
<script type = "text/javascript">
  var mixin = {
    methods: {
      hellworld: function () {
        document.write('HelloWorld 方法' + '<br>');
      },
      samemethod: function () {
        document.write('Mixin：相同方法名' + '<br>');
      }
    }
  };
  var vm = new Vue({
    mixins: [mixin],
    methods: {
      start: function () {
        document.write('start 方法' + '<br>');
      },
      samemethod: function () {
        document.write('Main：相同方法名' + '<br>');
      }
    }
  });
  vm.hellworld();
  vm.start();
  vm.samemethod();
</script>

也可以全局註冊混入對象。

註意使用！

一旦使用全局混入對象，將會影響到所有之後創建的 Vue 實例。使用恰當時，可以為自定義對象註入處理邏輯。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
  <!--  引入animate.css-->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">
  <style>
  </style>
</head>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

<div id = "databinding"></div>
<script type = "text/javascript">
  // 為自定義的選項 'myOption' 註入一個處理器。
  Vue.mixin({
    created: function () {
      var myOption = this.$options.myOption
      if (myOption) {
        document.write(myOption)
      }
    }
  })

  new Vue({
    myOption: 'hello!'
  })
</script>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

js 垃圾回收機制

垃圾回收是編程語言必不可少的環節，當一個變數被定義時，會在系統中分配一個記憶體來儲存變數的值，而當這個變數不在使用的時候就需要對變數進行回收，釋放記憶體。如果垃圾不進行回收就會照成記憶體泄露的情況，記憶體泄露可能會導致卡頓或者崩潰。在編程語言中，c 語言需要手動對垃圾進行回收，而java 和 javas ...
如何在博客園中插入視頻、音頻、網頁

相信很多人都有這樣的經歷，當我們想在博客中插入視頻、音頻或者其他網頁時，往往效果並不是我們想要的，因此分享一個小技巧： 1. iframe \ 2.插入一個網頁 3. 參考資料 1. "HTML \ 標簽" 2. "關於博客園內嵌入bilibili視頻" ...
JS數組之重排序方法

重排序方法 1. reserve() 反轉反轉數組中元素的順序。 2. sort() 重排序（預設升序） sort()方法可以對數組中的每一個元素進行排序，但是問題來了，即便數組元素全部都是數值類型，此方法依然會將所有元素先轉換成字元串再進行升序排序。因此，為瞭解決這個問題，sort()方法允 ...
JS數組之轉換方法

轉換方法調用數組的toString()方法、toLocaleString()方法會返回由數組中每個值的字元串形式拼接而成的一個以逗號分隔的字元串。註意：對undefined、null以及Object（對象）類型的值會有特殊情況，undefined、null返回空，對象類型的返回[obj ...
js作用域和作用域鏈

作用域：在js預編譯時、代碼執行之前對全局或局部的變數進行收集，存放在一指定記憶體中scope，執行時對scope進行訪問，scope 就是全局或局部的作用域。如： 1 function test() { 2 var a = 123; 3 } 4 5 test(); 在test() 執行之前對tes ...
巧用cssText屬性批量操作樣式【轉】

給一個HTML元素設置css屬性，如這樣寫太羅嗦了，為了簡單些寫個工具函數，如發現 "Google API" 中使用了cssText屬性，後在各瀏覽器中測試都通過了。一行代碼即可，實在很妙。如和innerHTML一樣，cssText很快捷且所有瀏覽器都支持。此外當批量操作樣式時，cssText ...
淺談 JSON.stringify 方法【轉】

但是 IE6 7 下沒有 JSON 對象，所以要藉助 "json2.js" 來實現。今天我們來簡單介紹下stringify方法的一些正確使用姿勢吧。當然，讓高手們賤笑了，本文只是分享一些方法給新手朋友們。 ~~~ var data = [ {name: "王尼瑪", sex:1, age: 30 ...
何時使用 Em 與 Rem【轉】

綜合指南: 何時使用 Em 與 Rem [TOC] 你可能已經很熟練使用這兩個靈活的單位，但你可能不完全瞭解何時使用 rem ，何時使用 em。本教程將幫你弄清楚! Em 和 rem都是靈活、可擴展的單位，由瀏覽器轉換為像素值，具體取決於您的設計中的字體大小設置。如果你使用值 1em 或 1r ...