目录
数据代理
Object.defineProperty
常见属性值
-
<body>
-
<script type="text/javascript">
-
let person={
-
name:
"kc",
-
sex:
"男"
-
}
-
Object.
defineProperty(person,
'age',{
-
value:
18,
-
enumerable:
true,
//控制属性是否可以枚举（遍历），默认是false
-
writable:
true,
//控制属性是否可以修改，默认是false
-
configurable:
true
//控制属性是否可以删除，默认是false
-
}
-
)
-
console.
log(
Object.
keys(person))
//遍历
-
// console.log(person)
-
</script>
-
-
-
</body>
get和set函数
-
<body>
-
<script type="text/javascript">
-
let num=
20;
-
let person={
-
name:
"kc",
-
sex:
"男"
-
}
-
Object.
defineProperty(person,
'age',{
-
-
//当有人读取person的age属性时get函数（getter）就会被调用，且返回值就会age的值
-
//原始写法 get:function(){} ----> 简写 get(){}
-
get(
) {
-
console.
log(
"age属性被访问了")
-
return num
-
},
-
-
//当有人修改age属性的值时，set函数就会被调用
-
set(
value) {
-
console.
log(
"age的值被修改了，值为"+value)
-
num=value
-
}
-
}
-
)
-
console.
log(
Object.
keys(person))
//遍历
-
// console.log(person)
-
</script>
-
-
-
</body>
访问页面
理解数据代理
-
<script type="text/javascript">
-
//数据代理 ：通过一个数据的对象对另一个数据的属性进行操作(读取)
-
-
let obj={
x:
10}
-
let obj2={
y:
20}
-
Object.
defineProperty(obj2,
"x",{
-
-
get(
) {
-
return obj.
x
-
},
-
set(
value) {
-
obj.
x =value
-
}
-
})
-
-
console.
log(obj2)
-
</script>
Vue中的数据代理
在Vue中的data数据，在其对象中以_data形式存在
存在数据代理，所以可以通过vm直接操作data中的值，_data中的值会跟着变化
Vue中的数据代理小结
1、Vue中的数据代理：
- 通过vm对象来代理data对象中的属性的操作（读/写）
2、Vue中数据代理的好处：
- 更加方便的操作data中的数据(如 { { _data.name}}----->{ {name}} ）
3、基本原理：
- 通过Object.defineProperty()吧data对象中所有属性添加到vm上。
- 为每一个添加到vm上的属性，都指定一个getter/setter。
- 在getter/setter内部去操作（读/写）data中对应的属性
事件处理
-
<!DOCTYPE html>
-
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
-
<head>
-
<meta charset="UTF-8">
-
<title>Title
</title>
-
<!--vue-->
-
<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js">
</script>
-
-
</head>
-
-
<div id="root">
-
<h1>欢迎{{name}}
</h1>
-
<button v-on:click="info()" v-bind:title="buttonValue">点击提示信息
</button>
-
<button @click="info1(123,$event)" v-bind:title="buttonValue">提示的按钮
</button>
-
</div>
-
-
-
<script type="text/javascript">
-
const vm =
new
Vue({
-
el:
'#root',
-
data: {
-
name:
"孔超",
-
buttonValue:
"这是一个按钮哦"
-
},
-
methods:{
-
info(
){
-
console.
log(event.
target.
innerText)
//获取值
-
alert(vm.
name+
"hello")
-
},
-
-
info1(
number,event){
-
console.
log(number)
-
alert(vm.
name+
"hello")
-
}
-
}
-
-
-
});
-
-
-
</script>
-
-
<body>
-
-
</body>
-
</html>
v-bind
v-bind:title=“xxx”，绑定一个属性，让鼠标移动到上面有提示信息
页面效果
事件处理小结
事件的基本使用：
1、使用v-on:xxx或者@xxx 绑定事件，其中xxx是事件名
2、事件的回调需要配置在methods对象中，配置在data中也可以，但是Vue会给data中的数据做代理，而我们的回调不需要做代理，这就增加了Vue的负担。
3、methods中配置的函数，不要用箭头函数！否则this就不是vm对象了，而是window
4、methods中配置的函数，都是被Vue所管理的函数，this的指向是vm，或者组件实例对象；
5、@click="test"和@click="test($event)"效果一致，但是后面的可以传如参数
转载：https://blog.csdn.net/weixin_60719453/article/details/128115716
查看评论