数据代理
-
直接在对象下可直接修改属性的值,而Object提供defineProperty()对属性进行控制
html
<script>
let perosn = {
name: '小蜜',
sex: '男',
//age: 19
}
Object.defineProperty(perosn,'age',{
value: 19
//enumerable: true ,添加enumerable将默认值改为true,即可对枚举出age属性,控制属性是否可以枚举,默认值是faule
//writable: true ,控制属性是否可以被修改,默认值为false
//configurable: true ,控制属性是否可以被删除,默认值为false
})
//输出的对象person中,age为颜色淡且值为19,该值不可以被枚举出来
console.log(person)
//将person的属性值遍历出来。第一条只能遍历数组,第二条for-each能遍历数组和对象
console.log(Object.keys(person))
for(let key in person ){
console.log(perosn[key])
}
</script>
-
当修改age属性时,get函数也就是getter就会被调用,返回值为age的值
-
当修改age属性时,set函数也会被调用,且会受到修改的具体值
-
get函数只用于获取获取number,set函数用于number修改时age值也被修改
html
<script>
let number = 18
let perosn = {
name: '小蜜',
sex: '男',
}
Object.defineProperty(perosn,'age',{
//简写形式:get(){} ,如果修改number的值,那么get的值也会被修改
get: function(){
console.log('修改了age')
return number
},
set(val){
console.log('修改age属性,值为val')
number = val
}
})
}
</script>
事件处理
-
methods方法的引用
html
<body>
//不传入参数的时候直接show01
<button @click="show01">点击我显示啊</button>
//既想传入参数又想event显示则,show02($event,66)
<button @click="show02($event,66)">点击我显示</button>
</body>
<script>
const vm = new Vue({
el: '#root',
data: {
name: '小米'
},
methods: {
//number为show02方法的参数变量
show02(event,number){
console.log(event,number)
//console.log(event.target.innerText)输出的是点击我显示
//console.log(this)。this指代vm
}
}
})
</script>
-
事件的修饰符
-
Vue中事件修饰符:
-
prevent : 阻止默认事件(常用)
-
stop: 阻止事件冒泡(常用)
-
once: 事件只显示一次(常用)
-
capture: 使用事件的捕获模式
capture作用是让事件在捕获中获取数据。默认是冒泡的时候输出shu'ju
-
self: 自有even.target是当前操作的元素才触发事件
-
passive: 事件的默认行为立即执行,无需等待事件回调执行完毕;
html
<body>
//click.prevent使点击的a标签不进行跳转网页
<a href="http://www.baidu.com" @click.prevent="show">
点我显示</a>
//当下面的情况出现,运行后会弹框两次,阻止冒泡引用stop
<div @click="showInfo">
<botton @click.stop="showInfo">点我</botton>
</div>
</body>
<script>
const vm = new Vue({
el: '#root',
data: {
name: '小米'
},
methods: {
//用e代替event
show(e){
alter('你好')
}
}
//输出的结果是只显示你好提示框
})
</script>