data:{
msg:“hello world!”,
name:“张三”
}
})
/**
- 方法
*/
//vm.$nextTick(callback)
//改变数据
vm.name=“李四”;
//这里打印的还是dom更新之前的数据,因为Dom更新需要时间,还没更新完,Vue实现响应式并不是数据发生改变后dom立即变化
// console.log(vm.$refs.hello.textContent);
//正确写法如下,dom更新完成后再执行
vm.$nextTick(function(){
//现在dom更新完成
console.log("利用 n e x t T i c k 方法: " + v m . nextTick方法:"+vm. nextTick方法:"+vm.refs.hello.textContent);
})
2.2 其他方法
-
vm.$mount() 手动挂载Vue实例
-
vm.$destroy() 销毁实例
-
vm.$set() 向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。
-
vm.$delete() 删除对象的属性。
…
案例
<button @click=“updateName()”>改变属性值
<button @click=“addAge()”>增加一个属性
<button @click=“deleteAge()”>删除一个属性
姓名{{user.name}}
年龄:{{user.age}}
$set 总结 (对象,数组)
注意:当给响应式数据对象(或数组)添加新属性,视图不更新的处理方法。
let vm = new Vue({
el :‘#app’,
data:{
a:{school:2,room:‘’} , // 1,声明时写
arr:[50]
}
});
vm. s e t ( v m . a , ′ r o o m ′ , 8 ) / / 2. 用 set(vm.a,'room',8) // 2.用 set(vm.a,′room′,8)//2.用set添加
对于要设很多属性的话,可以替换原对象,
vm.a = {…this.a,room:‘xxx’} //3 赋值新的对象(改变堆内存)
如果响应式数据为数组,数组元素改变监听不到,常规方法比如
vm.arr[0] = 100
vm.arr.length = 5
1.使用内置方法:pop push shift unshift sort reserve splice 能改变数组的方法才行
2. s e t : v m . set:vm. set:vm.set(vm.arr,1,‘hello’)
3.赋值新的数组:vm.arr=[…arr,100,200]
如:
vm.arr.reverse();
vm.arr = vm.arr.map(item = >item*=3);
2.3 vm.$watch( expOrFn, callback, [options] )
观察 Vue 实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。表达式只接受监督的键路径。对于更复杂的表达式,用一个函数取代。
示例:
姓名{{user.name}}
年龄:{{user.age}}