Vue.nextTick([callback,context])
参数:{Function}[callback]。{Object}[context]。
用法:
在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的DOM。
//修改数据
vm.msg = 'Hello';
//DOM还没有更新
Vue.nextTick(function(){
//DOM更新了
})
//作为一个Promise使用(2.1.0起新增)
Vue.nextTick().then(function(){
//DOM更新了
})
2.1.0 起新增:如果没有提供回调且在支持 Promise 的环境中,则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill,所以如果你的目标浏览器不原生支持 Promise (IE:你们都看我干嘛),你得自己提供 polyfill。
实例:
//模板
<div id="app">
<div ref="msgDiv">{{msg}}</div>
<div v-if="msg1">Message got outside $nextTick: {{msg1}}</div>
<div v-if="msg2">Message got inside $nextTick: {{msg2}}</div>
<div v-if="msg3">Message got outside $nextTick: {{msg3}}</div>
<button @click="changeMsg">
Change the Message
</button>
</div>
//页面初始渲染时只有msg有值。
//Vue实例
new Vue({
el:'#app',
data:{
msg:'Hello Vue',
msg1:'',
msg2:'',
msg3:''
},
methods:{
//第一次点击时,更改数据msg。
changeMsg(){
this.msg = "Hello world";
this.msg1 = this.$refs.msgDiv.innerHTML;//更改数据后还没有挂载到dom上,此时操作数据还是原来的数据
this.$nextTick(() => {
this.msg2 = this.$refs.msgDiv.innerHTML;//dom更新之后执行,此时数据更改。
});
this.msg3 = this.$refs.msgDiv.innerHTML;//与msg1一样。
}
}
})
Vue异步执行DOM更新。只要观察到数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的所有的数据改变。如果同一个watcher被多次触发,只会被推入到队列中一次,这种在缓冲时去除重复数据对于避免不必要的计算和DOM操作上非常重要。然后,在下一个的事件循环tick中,Vue在内部尝试对异步队列使用原生Promise.then和MessageChannel,如果执行环境不支持,会采用setTimeout(fn,0)代替。
例如:当你设置vm.someDate = ‘new value’,该组件不会立重新渲染。当刷新队列时,组件会在事件循环队列清空时的下一个tick更新。多数情况下我们不需要关心这个过程,但是如果你想在DOM状态更新后做点什么,这就可能会有点棘手。虽然Vue.js通常鼓励开发人员沿着数据驱动的方式思考,避免直接接触DOM,但是有时候我们确实要这么做。为了在数据变化之后等待Vue完成更新DOM,可以在数据变化之后立即使用Vue.nextTick(callback).这样回调函数在DOM更新完成后就会调用。
Vue.set( target, key, value )
参数:
{Object|Array} target
{string | number} key
{any} value
返回值:设置的值。
用法:
向响应式对象添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于响应式对象上添加新属性,因为Vue无法探测普通的新增属性。(比如this.myObject.newProperty = ‘hi’);
注意对象不能是Vue实例,或则Vue实例的根数据对象。
data(){
return{
some:{
name:'',
sex:''
}
}
}
mounted(){
//这种写法虽然可以新增属性,但是不会触发视图更新。
this.some.age = 24,
}
//正确写法
mounted(){
this.$set(this.some,"age",24)
}
Vue.delete( target, key )
参数:
{Object|Array}target
{String|number}key/index
用法:
删除对象的属性。如果对象是响应式的,确保删除能触发更新视图。这个主要是用于避免Vue不能检测到属性被删除的限制,但是你应该很少会使用它。
目标对象不能是一个Vue实例或Vue实例的根数据对象
data : {
namelist : {
id : 1,
name : '李四'
}
}
// 删除name
delete this.namelist.name;//js方法
Vue.delete(this.namelist,'name');//vue方法。
Vue.filter( id, [definition] )
参数:
{string} id
{Function} [definition]
用法:
// 注册
Vue.filter('my-filter', function (value) {
// 返回处理后的值
})
// getter,返回已注册的过滤器
var myFilter = Vue.filter('my-filter')
vue.js允许自定义过滤器,可用于一些常见的文本格式化。过滤器可以用在两个地方:双花括号插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部,由管道符号表示:
//在双花括号中
{{message | capitalize}}
//在v-bind中
<div v-bind:id="rawId | formatId"></div>
你可以在一个组件的选项中定义本地的过滤器:
filters:{
capitalize:function(value){
if(!value) return '';
value = value.toString();
return value.charAt(0).toUpperCase()+value.slice(1)
}
}
或则在创建Vue实例之前全局定义过滤器:
Vue.filter('capitalize',function(value){
if(!value) return '';
value = value.toString();
return value.charAt(0).toUpperCase()+value.slice(1);
})
new Vue();
过滤器函数总接收表达式的值(之前操作链的结果)作为第一个参数。在上述例子中,capitalize过滤器函数将会收到message的值作为第一个参数。
过滤器可以串联:
{{message | filterA |filterB}}
在这个例子中,filterA被定义为接收单个参数的过滤器函数,表达式message的值将作为参数传入函数中。然后继续调用同样被定义为接收单个参数的过滤器函数filterB,将filterA的结果传递到filterB中。
过滤器是JavaScript函数,因此可以接收参数:
{{message | filter('arg1',arg2)}}
这里,filterA内定义为接收三个参数的过滤器函数。其中message的值作为第一个参数,普通字符串‘arg1’作为第二个参数,表达式arg2的值作为第三个参数。