Vue指令和事件

发布时间：2020-12-14 04:24:14 所属栏目：大数据来源：网络整理

导读：/** * 语法糖的概念： * 语法糖是指在不影响功能的情况下，添加某种方法实现同样的； * 使用语法糖,可以简化代码的书写 * 比如 v-on:click=‘func‘ @click=‘func‘ * v-bind:src :src */ ? !-- v-on 可以监听原生DOM事件click,dbclick,keyup,mousemove等。

 
    /** 
   
     * 语法糖的概念： 
   
     * 语法糖是指在不影响功能的情况下，添加某种方法实现同样的； 
   
     * 使用语法糖,可以简化代码的书写 
   
     * 比如 v-on:click=‘func‘ @click=‘func‘ 
   
     * v-bind:src :src  
   
     */ 
   
?
<!-- 
 
   v-on 可以监听原生DOM事件click,dbclick,keyup,mousemove等。 
 
   表达式可以是方法名称，也可以是内联语句 
 
   如果不需要传递参数，()可以不写 @click= "handler"  
 
   默认会将event参数传入 
 
   // 自己配置具体按键  
 
   Vue.config.keyCodes.f1 = 111; 
 
   全局定义后，可以使用@keyup.f1 
 
   // 快捷键的名称,一下是全部的名称 
 
   .enter  
 
   .tab 
 
   .enter 
 
   .tab 
 
   .delete (捕获 “删除” 和 “退格” 键) 
 
   .esc 
 
   .space 
 
   .up 
 
   .down 
 
   .left 
 
   .right 
 
   这些按键修饰符也可以组合使用，或和鼠标一起配置使用 
 
   .ctrl 
 
   .alt 
 
   .shift 
 
   .meta (Mac 下是Command键盘，Windows下是窗口键) 
 
   --> 
 
  < 
  div 
  > 
 
  < 
  span 
  v-if=" 
  show" 
  >{{ 
  msg}} 
  </ 
  span 
  > 
 
  < 
  button 
  @click=" 
  change123" 
  >123123 
  </ 
  button 
  > 
 
  </ 
  div 
  > 
 
  <!--  
 
   Vue 提供了$event 用于访问原生DOM事件 
 
   --> 
 
  < 
  a 
  href= 
  "http://www.baidu.com" 
  @click=" 
  openUrl( 
  ‘链接‘,$event)" 
  >链接 
  </ 
  a 
  > 
 
  <!--  
 
   修饰符 
 
   --> 
 
  < 
  button 
  v-on:click.stop=" 
  handler" 
  >阻止单击事件冒泡 
  </ 
  button 
  > 
 
  < 
  form 
  v-on:submit.prevent=" 
  handler" 
  >提交事件不再重载页面 
  </ 
  form 
  > 
 
  < 
  button 
  v-on:click.stop.prevent=" 
  handler" 
  >修饰符可以串联 
  </ 
  button 
  > 
 
  < 
  form 
  v-on:submit. 
  prevent 
  >只有修饰符号 
  </ 
  form 
  > 
 
  < 
  button 
  v-on:click.once=" 
  handler" 
  >once 只会触发一次，包括组件 
  </ 
  button 
  > 
 
  < 
  button 
  v-on:click.self=" 
  handler" 
  >只当事件在该元素本身（而不是子元素） 
  </ 
  button 
  > 
 
  < 
  div 
  @click.capture=" 
  handler" 
  >添加事件侦听器时使用 事件捕获模式 
  </ 
  div 
  > 
 
  <!--  
 
   表单元素监听键盘事件  
 
   --> 
 
  < 
  input 
  type= 
  "text" 
  @keyup.13=" 
  handler" 
  > 
 
  < 
  button 
  type= 
  "text" 
  @click.ctrl=" 
  handler" 
  >ctrl+左键 
  </ 
  button 
  >

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!