| 事件监听watch |
| 与计算属性相比，当监听到值发生变化是过程式开发，比较笨重 |
var vm=null;
window.onload=function(){
vm=new Vue({
el:"#my",
data:{
name:"sonia",
age:24,
msg:"hello world",
user:{
id:"1",
name:""
},
text1:'',
text2:''
},
methods:{
},
watch:{
age:function(newValue,oldValue){
console.log("age被改变了",newValue,oldValue);
this.text1='age被改变了'+newValue+' '+oldValue;
},
name:function(val){
console.log(val);
this.text2='name被改变了'+'姓名'+val+'年龄'+this.age;
},
user:{
handler:(newValue,oldValue)=>{
console.log("user被改变了",newValue,oldValue);
},
deep:true//表示监视对象属性的变化，但此时看不到newVlaue与oldValue的区别
}
},
computed:{
info:function(){
return '年龄'+this.age+'姓名'+this.name;
}
}
});
//方法二
vm.$watch('name',function(newValue,oldValue){
console.log("name被改变了",newValue,oldValue);
})
} |
<div id="my">
<input type="text" v-model="name"/>
<p>{{name}}</p>
<input type="text" v-model="age"/>
<p>{{age}}</p>
<input type="text" v-model="user.name"/>
<p>{{user.name}}</p>
<p>{{text1}}</p>
<p>{{text2}}</p>
<p>{{info}}</p>
</div> |
vue 实例属性和方法var vm = null;
window.onload=function(){
vm = new Vue({//vm对应的是实例化
//el:'#my',// 2.0不允许挂载到html,body元素上
data:{
name:'moris',
age:22
},
name:"sonia",
show:function(){
console.log("show");
},
methods:{
getNum1(){
console.log("111");
this.$refs.hello.style.color="yellow";
this.$refs.text1.value="000";
},
abc(){
this.$nextTick(function(){
//获取Dom的值，可以页面加载时获取数据
console.log(this.$refs.hello.textContent);
})
}
},
computed:{
}
});
//获取data中的数据
//console.log(vm.name);
//vm.$data获取data里的东西
// console.log(vm.$data);
// console.log(vm.$data.name);
//vm.$el 获取vue实例关联的元素
// console.log(vm.$el);
// vm.$el.style.color="red";
//获取自定义的属性
// console.log(vm.$options.name);
// vm.$options.show();
//vm.$refs 获取添加ref属性的元素,操作Dom节点
//手动挂载vue实例
vm.$mount('#my');
//new Vue({}).$mount('#my');
vm.$refs.hello.style.color="blue";
//方式2
vm.$watch('name', function(newValue, oldValue){
console.log('name被修改了', newValue, oldValue);
});
}
|
<div id="my">
<h2>{{name}}</h2>
<h2>{{age}}</h2>
<h2 ref="hello">{{name}}</h2>
<input ref="text1" value="122" type="text"/>
<button @click="getNum1">click</button>
<h2>{{abc()}}</h2>
</div> |
| $set和$delete | ||||
var vm = null;
window.onload=function(){
vm = new Vue({//vm对应的是实例化
el:'#my',// 2.0不允许挂载到html,body元素上
data:{
name:'moris',
user:{
name:'sonia',
}
},
methods:{
//添加对应的属性和值,对象属性
add(){
this.$set(this.user,'age',22);
},
//修改
upd(){
this.user.age=23;
},
//删除
del(){
this.$delte(this.user,'age');
}
},
computed:{
}
});
}<div id="my">
<h2>{{user.name}}</h2>
<h2>{{user.age}}</h2>
<button @click="add">add</button>
<button @click="upd">upd</button>
<button @click="del">del</button>
</div>
|