MVVM模型
M:模型(Model):对应data中的数据
V:视图(view): 模板
VM:视图模型(ViewModel):Vue实例对象
观察发现:
1.data中所有的属性,最后都出现在了vm身上
2.vm身上所有的属性 及 Vue原型上所有的属性 在Vue模板中都可以直接使用
vue数据代理
数据代理:通过一个对象代理对另一个对象中的属性的操作
let obj = {x:100}
let obj2 = {y:200}
Object.defineProperty(obj2,'x',{
get(){
return obj.x
},
set(value){
obj.x=value
}
})
Object.defineProperty(Person,'age',{
value:18,
enumerable:true,//控制属性是否可以被枚举
writable:true,//控制属性是否可以被修改
configurable:true,//控制属性是否可以被删除
})
1.Vue中的数据代理
通过vm对象来代理data对象中属性的操作(读、写)
2.Vue中数据代理的好处
更加方便的操作data中的数据
3.基本原理:
通过Object.defineProperty()把data对象中的所有属性添加到vm上
为每一个添加到vm上的属性，都指定一个getter/setter
在getter/setter内部去操作(读/写)data中对应的属性
const vm = new Vue({
el:"#root",
data:{
name:'尚硅谷',
address:'北京'
}
})
console.log(vm); //vm._data = options.data = data
事件处理
事件的基本使用
1.使用v-on:xxx 或 @xxx 绑定事件 其中xxx是事件名
2.事件的回调需要配置在methods对象中，最终会在vm上
3.methods中配置的函数 不要用箭头函数 否则this就不是vm 了
4.methods中配置的函数 都是被Vue所管理的函数 this的指向是vm 或 组件实例对象
5.@click="demo" 和 @click="demo($event)" 效果一致 但后者可以传参
methods: {
showInfo1(event){
alert('同学你好')
// console.log(event.target.innerText);
console.log(this);
},
showInfo2(number,a){
alert('同学你好6666')
// console.log(event.target.innerText);
console.log(number,a);
}
},
