vue全局API

Posted 2020-09-20

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue全局API相关的知识，希望对你有一定的参考价值。

阅读目录

1.Vue.extend({})
2.Vue.nextTick([callback, context])
3.Vue.set(object, key, value)
4.Vue.delete(object, key)
5.Vue.directive(id, [definition])
6.Vue.mixin(mixin)

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!"

就可以使用了。

以上是关于vue全局API的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段2——.vue文件的模板

VSCode自定义代码片段13——Vue的状态大管家