vue中数据代理和事件处理

数据代理

直接在对象下可直接修改属性的值，而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>