阅读目录
- 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!"
就可以使用了。