vue全域性API

龍恩0707發表於2017-05-30
VueAPI

閱讀目錄

1.Vue.extend({})

1. Vue.extend({})
extend是構造一個元件的語法糖。如下建立一個vue構造器，如下程式碼：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id='demo'></div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    // 建立構造器
    var P = Vue.extend({
      template: '<p>{{msg}}</p>',
      data: function() {
        return {
          msg: 'aa'
        }
      }
    });
    // 建立例項
    new P().$mount('#demo');
  </script>
</html>

檢視效果

2.Vue.nextTick([callback, context])

2. Vue.nextTick([callback, context])
作用是：在下次DOM更新迴圈結束之後執行延遲迴調，在修改資料之後立即使用這個方法。
如下程式碼：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id='demo'>{{ msg }}</div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    var vm = new Vue({
      el: '#demo',
      data: {
        msg: '123'
      }
    });
    // 更改資料
    vm.msg = 'new message';
    console.log(vm.$el.textContent); // 123
    Vue.nextTick(function() {
      console.log(vm.$el.textContent); // new message
    });
  </script>
</html>

檢視效果

比如 當我設定 vm.msg = 'new message'， 該元件不會立即渲染，當重新整理佇列時，元件會在事件迴圈佇列清空時的下一個tick更新，如上程式碼，
當設定 vm.msg 然後列印還是之前的資料，然後會延遲執行 Vue.nextTick該方法。最後會更新資料。

那麼在元件內如何使用 vm.$nextTick()方法呢？可以看如下demo

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id='demo'> 
      <component1></component1>
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    Vue.component('component1', {
      template: '<span @click="updateMessage()">{{ msg }}</span>',
      data: function() {
        return {
          msg: 'new message'
        }
      },
      methods: {
        updateMessage: function() {
          this.msg = 'update msg';
          console.log(this.$el.textContent); // new message
          this.$nextTick(function() {
            console.log(this.$el.textContent); // update msg
          });
        }
      }
    })
    new Vue({
      el: '#demo'
    });
  </script>
</html>

檢視效果

頁面載入完的時候 顯示 new message資訊，當我點選一下的時候， 控制檯先列印 new message 資訊，接著會執行 this.$nextTick函式，最後列印 update msg 資訊了。

3.Vue.set(object, key, value)

3. Vue.set(object, key, value)
作用：設定物件的屬性。
設定屬性 如下方法會報錯：

var app = new Vue({
   el: '#demo',
  data: {
    age: 29
  }
});
Vue.set(app.$data, 'name', 'longen');

因為不能直接在data物件上增加屬性，但是可以在data裡的物件上增加屬性， 如下程式碼就可以了；

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id='demo'> 
      {{ msg.age }}
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    var app = new Vue({
      el: '#demo',
      data: {
        msg: {
          age: 10
        }
      }
    });
    Vue.set(app.msg, 'name', 'longen');
    console.log(app.msg);  // 列印出物件，有剛剛設定的屬性name {}
  </script>
</html>

檢視效果

4.Vue.delete(object, key)

 作用是：刪除物件的屬性。如下demo程式碼：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id='demo'> 
      {{ msg.age }}
    </div>
  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    var app = new Vue({
      el: '#demo',
      data: {
        msg: {
          age: 10
        }
      }
    });
    Vue.set(app.msg, 'name', 'longen');
    console.log(app.msg);  // 在控制檯列印出物件，有剛剛設定的屬性name {}
    // 現在刪除物件的屬性 name
    Vue.delete(app.msg, 'name');
    console.log(app.msg);  // 在控制檯列印出 物件 ，可以看到美元name屬性了
  </script>
</html>

檢視效果

5.Vue.directive(id, [definition])

作用是：註冊或獲取全域性指令。也可以理解為註冊自定義指令。
比如頁面上有一個input框，當頁面載入時候，元素將獲得焦點。如下程式碼：

<!DOCTYPE html>
<html>
  <head>
    <title>演示Vue</title>
    <style>
      img { width: 180px; height: 180px; overflow: hidden;}
    </style>
  </head>
  <body>
    <div id='demo'>
      <input v-focus />
    </div>

  </body>
  <script src="https://tugenhua0707.github.io/vue/transition/vue.js"></script>

  <script type="text/javascript">
    // 註冊一個全域性自定義指令 v-focus
    Vue.directive('focus', {
      // 當繫結元素插入到DOM中
      inserted: function(el) {
        // 聚焦元素
        el.focus();
      }
    })
    new Vue({
      el: '#demo'
    })
    // 返回已註冊的指令
    var myDirective = Vue.directive('focus');
    console.log(myDirective);
  </script>
</html>

檢視效果

6.Vue.mixin(mixin)

Vue.use(plugin)
引數：{Object | Function }
作用：安裝Vue.js外掛，如果外掛是一個物件，必須提供install方法，如果外掛是一個函式的話，它會作為install方法，install方法將被作為Vue引數呼叫。

Vue.mixin(mixin)

引數是 {Object}
作用： 全域性註冊一個混合，影響註冊之後所有建立的每個vue例項。
比如如下demo：

// mixin.js
module.exports = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

然後在 test.js可以如下編碼：

// test.js
var myMixin = require('./mixin')
var Component = Vue.extend({
  mixins: [myMixin]
})
var component = new Component() // -> "hello from mixin!"

就可以使用了。

相關文章