数据代理
-
直接在对象下可直接修改属性的值,而Object提供defineProperty()对属性进行控制
-
<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值也被修改
-
<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方法的引用
-
<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: 事件的默认行为立即执行,无需等待事件回调执行完毕;
-
<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>