• Vue中数据代理与事件处理

    目录

    数据代理

    Object.defineProperty

    常见属性值

    get和set函数 

     理解数据代理

    Vue中的数据代理

     Vue中的数据代理小结

    事件处理

     v-bind

     事件处理小结

    数据代理

    Object.defineProperty

    常见属性值

    1. <body>
    2. <script type="text/javascript">
    3. let person={
    4.     name:"kc",
    5.     sex:"男"
    6. }
    7. Object.defineProperty(person,'age',{
    8.     value:18,
    9.     enumerable:true,//控制属性是否可以枚举（遍历），默认是false
    10.     writable:true,//控制属性是否可以修改，默认是false
    11.     configurable:true//控制属性是否可以删除，默认是false
    12.     }
    13. )
    14. console.log(Object.keys(person))//遍历
    15.     // console.log(person)
    16. script>
    17.  
    18.  
    19. body>

    get和set函数 

    1. <body>
    2. <script type="text/javascript">
    3.     let num=20;
    4. let person={
    5.     name:"kc",
    6.     sex:"男"
    7. }
    8. Object.defineProperty(person,'age',{
    9.  
    10.     //当有人读取person的age属性时get函数（getter）就会被调用，且返回值就会age的值
    11.        //原始写法 get:function(){}  ---->  简写  get(){}    
    12. get() {
    13.         console.log("age属性被访问了")
    14.        return num
    15.     },
    16.  
    17.     //当有人修改age属性的值时，set函数就会被调用
    18.     set(value) {
    19.         console.log("age的值被修改了，值为"+value)
    20.         num=value
    21.     }
    22.     }
    23. )
    24. console.log(Object.keys(person))//遍历
    25.     // console.log(person)
    26. script>
    27.  
    28.  
    29. body>

     访问页面

     理解数据代理

    1. <script type="text/javascript">
    2. //数据代理 ：通过一个数据的对象对另一个数据的属性进行操作(读取)
    3.  
    4.     let obj={x:10}
    5.     let obj2={y:20}
    6.  Object.defineProperty(obj2,"x",{
    7.  
    8.      get() {
    9.          return obj.x
    10.      },
    11.      set(value) {
    12.         obj.x =value
    13.      }
    14.  })
    15.  
    16. console.log(obj2)
    17. script>

    Vue中的数据代理

    在Vue中的data数据，在其对象中以_data形式存在

     存在数据代理，所以可以通过vm直接操作data中的值，_data中的值会跟着变化

     Vue中的数据代理小结

    1、Vue中的数据代理：

    • 通过vm对象来代理data对象中的属性的操作（读/写）

    2、Vue中数据代理的好处：

    • 更加方便的操作data中的数据(如 {{ _data.name}}----->{{name}} ）

    3、基本原理：

    • 通过Object.defineProperty()吧data对象中所有属性添加到vm上。
    • 为每一个添加到vm上的属性，都指定一个getter/setter。
    • 在getter/setter内部去操作（读/写）data中对应的属性

    事件处理

    1. html>
    2. <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Titletitle>
    6.     
    7.     <script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js">script>
    8.  
    9. head>
    10.  
    11. <div id="root">
    12. <h1>欢迎{{name}}h1>
    13.     <button v-on:click="info()" v-bind:title="buttonValue">点击提示信息button>
    14.     <button @click="info1(123,$event)"   v-bind:title="buttonValue">提示的按钮button>
    15. div>
    16.  
    17.  
    18. <script type="text/javascript">
    19.     const vm = new Vue({
    20.         el: '#root',
    21.         data: {
    22.             name:"孔超",
    23.             buttonValue:"这是一个按钮哦"
    24.         },
    25.         methods:{
    26.             info(){
    27.                 console.log(event.target.innerText)//获取值
    28.                 alert(vm.name+"hello")
    29.             },
    30.  
    31.             info1(number,event){
    32.                 console.log(number)
    33.                 alert(vm.name+"hello")
    34.             }
    35.         }
    36.  
    37.  
    38.     });
    39.  
    40.  
    41. script>
    42.  
    43. <body>
    44.  
    45. body>
    46. html>

     v-bind

    v-bind:title=“xxx”，绑定一个属性，让鼠标移动到上面有提示信息

    页面效果

     事件处理小结

    事件的基本使用：

    1、使用v-on:xxx或者@xxx 绑定事件，其中xxx是事件名

    2、事件的回调需要配置在methods对象中，配置在data中也可以，但是Vue会给data中的数据做代理，而我们的回调不需要做代理，这就增加了Vue的负担。

    3、methods中配置的函数，不要用箭头函数！否则this就不是vm对象了，而是window

    4、methods中配置的函数，都是被Vue所管理的函数，this的指向是vm，或者组件实例对象；

    5、@click="test"和@click="test($event)"效果一致，但是后面的可以传如参数

  • 相关阅读:
    蓝桥杯单片机第六届省赛题详细讲解(温度记录器)
    交换瓶子问题（暴力求解 + 图论解法）
    Abnova ABCB10（人）重组蛋白说明书
    PaddleOCR以及CUDA、cuDNN安装踩坑记录
    最快的包管理器--pnpm创建vue项目完整步骤
    鸿运主动安全云平台任意文件下载漏洞复习
    SpringMVC拦截器
    linux上的代码在windows上运行
    [kingbase运维之奇怪的现象]
    为什么数组它的顺序读写会比较方便？
  • 原文地址：https://blog.csdn.net/weixin_60719453/article/details/128115716