文章目录
Object.defineProperty
基础知识
在定义的时候就给对象添加好属性，这是一种常规的为对象添加属性的方法
<script>
let obj = {
name: "Penrose",
};
</script>
当我们需要为已经定义好的对象添加属性时，就可以使用defineProperty这个API进行高级的属性添加
为obj对象添加age属性
<script>
let obj = {
name: "Penrose",
};
Object.defineProperty(obj, "age", {
value: 22,
enumerable: true,
configurable: true,
writable: true
});
</script>
注：
1、defineProperty中传入三个参数，对象名，属性名（需要用双引号包围），属性的配置项
2、属性的配置项中包含value，enumerable，configurable，writable
3、value就是要添加的属性值，enumerable表示属性是否能够被遍历，configurable表示此属性能够被delete，writable表示此属性能否被修改
4、enumerable，configurable，writable不指定时默认情况下为false
5、常规方式添加的属性其enumerable，configurable，writable值均为true
Object.defineProperty的补充
<script>
let number = 18;
let person = {
name: "Penrose",
sex: "男",
};
//此时age属性的值来自getter返回的number变量
Object.defineProperty(person, "age", {
//get+函数统称getter
//有人读取person属性时，getter就会被调用，返回值就是age的值
//get：function(){}
get() {
console.log("有人读取了age属性");
return number;
},
//set中的value用来接收修改后的值
set(value) {
console.log("有人修改了age属性");
number = value;
},
});
如果在defineProperty这个配置项中设置了get或set，就不能再设置value和writable，否则就会报错
数据代理
代理这个词字面理解为替某人管理，则数据代理就是该数据可由其他人管理。则正式一点的描述是一个对象代理操作另一个对象的某个/些属性。
普通的数据代理
b代理了a的x属性
<script>
let a = {
x: 100,
};
let b = {};
Object.defineProperty(b, "x", {
get() {
return a.x;
},
set(value) {
a.x = value;
},
});
</script>
vue中的数据代理
<body>
<div id="app">
<h1>{{name}}</h1>
<h1>{{address}}</h1>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: "#app",
data: {
name: "Penrose",
address: "university",
},
});
</script>
</body>
vue实例身上的属性address和name就是通过数据代理实现的，我们可以通过下图中看出，我们不能直接看到两个属性的值，需要手动点击一下才能够查看对应的值。而点击的过程就是调用getter的过程。
事件处理method
<body>
<div id="app">
<button v-on:click="showInfo">点我输出事件源</button>
<button @click="showInfo1(1,$event)">点我输出事件源，并且可以传参</button>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el: "#app",
methods: {
showInfo(e) {
console.log(this);
console.log(e.target);
},
showInfo1(value, e) {
console.log(value);
console.log(e.target);
},
},
});
</script>
</body>
事件修饰符
once
事件只能触发一次
<body>
<div id="app">
<button @click.once="showInfo">我只能弹窗一次</button>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el: "#app",
methods: {
showInfo() {
alert("你好");
},
},
});
</script>
</body>
prevent
阻止标签的默认事件，此处是阻止点击链接后页面的跳转
<body>
<div id="app">
<a href="http://www.baidu.com" @click.prevent="showInfo">百度</a>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el: "#app",
methods: {
showInfo() {
alert("你好");
},
},
});
</script>
</body>
键盘事件
keyup：按下键盘后再松手事件
keydown：按下键盘事件
<body>
<div id="app">
<input
type="text"
@keydown.enter="showInfo"
placeholder="按下回车键输出"
/>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el: "#app",
methods: {
showInfo(e) {
//通过获取事件源中的value值输出文本框中的内容
console.log(e.target.value);
},
},
});
</script>
</body>
98
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
