【vue】指令修饰符，键盘事件，阻止默认事件，阻止事件传播_javascript_weixin

 
   <style> 
  
   #box1 
   { 
  
   width 
   : 
   100px 
   ; 
  
   height 
   :  
   100px 
   ; 
  
   background-color 
   :  
   blue 
   ; 
  
    } 
  
   #box2 
   { 
  
   width 
   : 
   50px 
   ; 
  
   height 
   : 
   50px 
   ; 
  
   background-color 
   :  
   red 
   ; 
  
    } 
  
   < 
   /style> 
  
   </head> 
  
   <body> 
  
   <div 
     
   id 
   = 
   "app" 
   > 
  
   语法
 
   <!-- vue的某些指令 可以使用指令修饰符，从而实现不同的指令效果 --> 
  
   <!-- 格式：指令.修饰符1.修饰符2 --> 
  
number类型
 
   <!--v-model指令的 .number修饰符用于设置绑定的数据为number类型 --> 
  
   <input 
     
   type 
   = 
   "text" 
     
   v-model 
   . 
   number 
   = 
   "num" 
   > 
  
   <p> 
   {{num+1}} 
   </p> 
  
   <br> 
  
   失去焦点时才同步
 
   <!--v-model指令的 .lazy修饰符，用于设置绑定在blur事件中而不是默认的input事件。 --> 
  
   <input 
     
   type 
   = 
   "text" 
     
   v-model 
   . 
   lazy 
   = 
   "d1" 
   > 
  
   <p> 
   {{d1}} 
   </p> 
  
   <hr> 
  
   <br> 
  
   <br> 
  
   去除空格
 
   <!--v-model指令的 .trim修饰符,用于将输入框中的内容trim（去除两端空格）之后再绑定--> 
  
   <input 
     
   type 
   = 
   "text" 
     
   v-model 
   . 
   trim 
   = 
   "d2" 
   > 
  
   <pre> 
  
   <span 
     
   style 
   = 
   "background-color:rgb(173, 119, 119)" 
   > 
   {{d2}} 
   </span> 
  
   </pre> 
  
   <p 
     
   style 
   = 
   "background-color:rgb(173, 119, 119)" 
   > 
   {{d2}} 
   </p> 
  
键盘事件
 
   <!-- v-on指令监听的键盘事件，可以使用键名或者keycode作为修饰符，那么仅当这个键被按下才会触发事件 --> 
  
   <!-- <input type="text" v-model="d3" @keypress.13="keypress"> --> 
  
   <input 
     
   type 
   = 
   "text" 
     
   v-model 
   = 
   "d3" 
    @ 
   keypress 
   . 
   enter 
   = 
   "keypress" 
   > 
  
   <hr> 
  
   阻止默认行为
 
   <!-- v-on 指令的.prevent 修饰符，用于阻止事件的默认行为--> 
  
   阻止事件传播
 
   <!-- .stop修饰符，阻止事件的迹象传播。 --> 
  
   <a 
     
   href 
   = 
   "" 
    @ 
   click 
   . 
   prevent 
   = 
   "" 
   > 
   这是一个按钮 
   </a> 
  
   <hr> 
  
   <div 
     
   id 
   = 
   "box1" 
    @ 
   click 
   . 
   self 
   = 
   "blueClick" 
   > 
  
   <div 
     
   id 
   = 
   "box2" 
    @ 
   click 
   . 
   stop 
   = 
   "redClick" 
   > 
  
   <!-- <div id="box2" @click.stop="redClick"> --> 
  
    不会向下传播 
  
   </div> 
  
   </div> 
  
   </div> 
  
   <script 
     
   src 
   = 
   "vue.js" 
   > 
   < 
   /script> 
  
   <script> 
  
   new 
     
   Vue 
   ({ 
  
   el: 
   "#app" 
   , 
  
   data: 
   { 
  
   num: 
   0 
   , 
  
   d1: 
   100 
   , 
  
   d2: 
   "" 
   , 
  
   d3: 
   "" 
   , 
  
    }, 
  
   methods: 
   { 
  
   keypress 
   ( 
   e 
   ){ 
  
   console 
   . 
   log 
   ( 
   e 
   . 
   keyCode 
   ) 
  
   alert 
   ( 
   this 
   . 
   d3 
   )  
  
    }, 
  
   blueClick 
   ( 
   e 
   ){ 
  
   console 
   . 
   log 
   ( 
   "蓝色点击了" 
   ) 
  
    }, 
  
   redClick 
   ( 
   e 
   ){ 
  
   console 
   . 
   log 
   ( 
   "红色点击了" 
   ) 
  
    } 
  
    } 
  
    }) 
  
   < 
   /script> 
  
   </body>