vue事件绑定

最新推荐文章于 2024-10-11 17:39:47 发布

weixin_34082789

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量132

点赞数

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/649010

版权

 
   <body> 
  
   <div 
     
   id 
   = 
   "app" 
   > 
  
   <input 
     
   type 
   = 
   "text" 
     
   v-model 
   = 
   "txt" 
   > 
  
   <br> 
  
   <!-- 在vue中使用v-on指令进行事件绑定 --> 
  
   <!-- 格式为v-on:事件类型="绑定方法" --> 
  
   <!-- 绑定的方法必须是本组件的methods中的方法 ，方法名后可以加()，也可以不加()。区别是：如果不加括号，vue在调用方法时会自动传递event对象，如果加了()则可以自定义传参。 
  
    传参时需要事件对象可以传递$event--> 
  
   <!-- <button v-on:click="btnClick">按钮</button> --> 
  
   <!-- <button v-on:click="btnClick($event)">按钮</button> --> 
  
   <!-- v-on: 可以缩写为@ --> 
  
   <!-- （）可以加可以不加 加（）需要传参，不加直接传event --> 
  
   <button 
    @ 
   click 
   = 
   "btnClick" 
   > 
   按钮 
   </button> 
  
   <br> 
  
   <br> 
  
   <button 
    @ 
   click 
   = 
   "secondBtn" 
   > 
   按钮 
   </button> 
  
   <br> 
  
   <hr> 
  
   <button 
    @ 
   click 
   = 
   "jian" 
   > 
   - 
   </button> 
  
   <br> 
  
   <span> 
   {{number}} 
   </span> 
  
   <br> 
  
   <button 
    @ 
   click 
   = 
   "jia" 
   > 
   + 
   </button> 
  
   </div> 
  
   <script 
     
   src 
   = 
   "vue.js" 
   > 
   < 
   /script> 
  
   <script> 
  
   let 
     
   root 
   = 
   new 
     
   Vue 
   ({ 
  
   el: 
   "#app" 
   , 
  
   data: 
   { 
  
   txt: 
   "" 
   , 
  
   number: 
   0 
   , 
  
    }, 
  
   // 组件的参数配置对象中，methods表示组件方法，类型是一个对象，对象中以键值对的形式添加方法（函数）。组件中的方法可以被v-on指令监听。 
  
   // arguments 一个函数调用时 所有的参数对象 
  
   methods: 
   { 
  
   btnClick 
   : 
   function 
   ( 
   e 
   ){ 
  
   // console.log("123") 
  
   // console.log(e) 
  
   // console.log(root.txt) 
  
   // 组件创建之后，组件中data中的数据会作为属性添加到组件对象中，而methods中的函数会作为方法添加到组件对象中.(所以data中的名字和methods中的名字不能重复) 
  
   // 在组件方法中，this表示这个组件对象本身。所以在本组件方法中可以通过this访问本组件的data，也可以通过this调用本组件的其他方法。 
  
   console 
   . 
   log 
   ( 
   this 
   . 
   txt 
   ) 
  
    }, 
  
   secondBtn 
   (){ 
  
   console 
   . 
   log 
   ( 
   "second" 
   ) 
  
    }, 
  
   // 组件的方法中不能使用箭头函数，否则会导致函数中的this不指向组件对象，从而不能使用组件中的其他数据或方法。 
  
   jia 
   (){ 
  
   this 
   . 
   number 
   = 
   this 
   . 
   number 
   + 
   1 
   ; 
  
    }, 
  
   jian 
   (){ 
  
   this 
   . 
   number 
   = 
   this 
   . 
   number 
   - 
   1 
   ; 
  
    } 
  
    } 
  
    }) 
  
   < 
   /script> 
  
   </body>