阅读目录
- 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>演示Vuetitle>
<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: '{{msg}}
',
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>演示Vuetitle>
<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>演示Vuetitle>
<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: '{{ msg }}',
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>演示Vuetitle>
<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>演示Vuetitle>
<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>演示Vuetitle>
<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!"
就可以使用了。