• vue中数据代理和事件处理

    数据代理

    • 直接在对象下可直接修改属性的值，而Object提供defineProperty()对属性进行控制

      1. <script>
      2.     let perosn = {
      3.         name: '小蜜',
      4.         sex: '男',
      5.       //age: 19 
      6.     }
      7.     Object.defineProperty(perosn,'age',{
      8.         value: 19
      9.         
      10.       //enumerable: true ,添加enumerable将默认值改为true，即可对枚举出age属性，控制属性是否可以枚举，默认值是faule
      11.       //writable： true ,控制属性是否可以被修改，默认值为false
      12.       //configurable: true ,控制属性是否可以被删除，默认值为false
      13.     })
      14.       //输出的对象person中，age为颜色淡且值为19，该值不可以被枚举出来
      15.         console.log(person)
      16.       //将person的属性值遍历出来。第一条只能遍历数组，第二条for-each能遍历数组和对象
      17.         console.log(Object.keys(person))
      18.         for(let key in person ){
      19.             console.log(perosn[key])
      20.         }
      21.     
      22. script>

    • 当修改age属性时，get函数也就是getter就会被调用，返回值为age的值

    • 当修改age属性时，set函数也会被调用，且会受到修改的具体值

    • get函数只用于获取获取number,set函数用于number修改时age值也被修改

      1. <script>
      2.     let number = 18
      3.     let perosn = {
      4.         name: '小蜜',
      5.         sex: '男',
      6.     }
      7.     Object.defineProperty(perosn,'age',{
      8.        //简写形式:get(){} ,如果修改number的值，那么get的值也会被修改
      9.        get: function(){
      10.            console.log('修改了age')
      11.            return number
      12.        },
      13.        set(val){
      14.            console.log('修改age属性，值为val')
      15.            number = val
      16.        }
      17.     })
      18.      
      19.         }
      20.     
      21. script>

    事件处理

    • methods方法的引用

      1. <body>
      2.     //不传入参数的时候直接show01
      3.     <button @click="show01">点击我显示啊button>
      4.     //既想传入参数又想event显示则，show02($event,66)
      5.     <button @click="show02($event,66)">点击我显示button>
      6. body>
      7. <script>
      8.      const vm = new Vue({
      9.          el: '#root',
      10.          data: {
      11.              name: '小米'
      12.          },
      13.          methods: {
      14.              //number为show02方法的参数变量
      15.             show02(event,number){
      16.                 console.log(event,number)
      17.                //console.log(event.target.innerText)输出的是点击我显示
      18.                //console.log(this)。this指代vm
      19.             }
      20.          }
      21.          
      22.      })
      23. script>

    • 事件的修饰符

    • Vue中事件修饰符：

    • prevent : 阻止默认事件（常用）

    • stop: 阻止事件冒泡（常用）

    • once: 事件只显示一次（常用）

    • capture: 使用事件的捕获模式

      capture作用是让事件在捕获中获取数据。默认是冒泡的时候输出shu'ju

    • self： 自有even.target是当前操作的元素才触发事件

    • passive: 事件的默认行为立即执行，无需等待事件回调执行完毕；

      1. <body>
      2.     //click.prevent使点击的a标签不进行跳转网页
      3.     <a href="http://www.baidu.com" @click.prevent="show">
      4.     点我显示a>
      5.     //当下面的情况出现，运行后会弹框两次，阻止冒泡引用stop
      6.     <div @click="showInfo">
      7.         <botton @click.stop="showInfo">点我botton>
      8.     div>
      9. body>
      10. <script>
      11.      const vm = new Vue({
      12.          el: '#root',
      13.          data: {
      14.              name: '小米'
      15.          },
      16.          methods: {
      17.              //用e代替event
      18.             show(e){
      19.                 alter('你好')            
      20.          }
      21.    
      22.        }
      23.    //输出的结果是只显示你好提示框                     
      24.      })
      25. script>

  • 相关阅读:
    发版检查list
    rhel8配置bond(nmcli)
    重生之我是一名程序员 34
    Life-long Mapping
    Nuxt3环境变量配置
    大数据旅游数据分析：基于Python旅游数据采集可视化分析推荐系统
    你真的了解Redis中的持久化嘛？
    flex布局与float布局
    自学黑客（网络安全）
    QT实现简易闹钟功能
  • 原文地址：https://blog.csdn.net/Yyds12300/article/details/134339490