vue中数据代理和事件处理
数据代理
-
直接在对象下可直接修改属性的值,而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 = 18let 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代替eventshow(e){alter('你好') }}//输出的结果是只显示你好提示框 }) </script>