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>