代码改变世界

vue全局API

2017-05-30 11:14 龙恩0707 阅读(...) 评论(...) 编辑 收藏

阅读目录

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

就可以使用了。