Vue.js事件修饰符理解测试-优快云博客

本文链接：https://blog.youkuaiyun.com/xiongshiyuan/article/details/80042030

测试程序

 
  <!doctype html 
  > 
 
 
  < 
  html 
  > 
 
 
  < 
  head 
  > 
 
 
  < 
  title 
  >事件捕获顺序测试 
  </ 
  title 
  > 
 
 
  < 
  meta 
  charset= 
  "utf-8" 
  > 
 
 
  < 
  style 
  text= 
  "txt/css" 
  > 
 
 
  div{ 
 
 
  border: 
  1px 
  solid 
  red; 
 
 
  padding: 
  20px; 
 

   } 
 
 
  < 
  / 
  style 
  > 
 
 
  < 
  script 
  src= 
  "vue/vue.js" 
  > 
  < 
  / 
  script 
  > 
 
 
  </ 
  head 
  > 
 
 
  < 
  body 
  > 
 
 
  < 
  div 
  id= 
  "xdd" 
  > 
 
 
  < 
  div 
  v-on:click= 
  "out(1)" 
  > 
 

   onclick 输出1 
 
 
  < 
  div 
  v-on:click= 
  "out(2)" 
  > 
 

   onclick 输出2 
 
 
  < 
  div 
  v-on:click= 
  "out(3)" 
  > 
 

   onclick 输出3 
 
 
  < 
  div 
  v-on:click= 
  "out(4)" 
  > 
 

   onclick 输出4 
 

   (DOM0级事件) 
 
 
  </ 
  div 
  > 
 
 
  </ 
  div 
  > 
 
 
  </ 
  div 
  > 
 
 
  </ 
  div 
  > 
 
 
  </ 
  div 
  > 
 
 
  < 
  script 
  > 
 
 
  var 
  app= 
  new 
  Vue({ 
 
 
  el: 
  "#xdd", 
 
 
  methods:{ 
 
 
  out: 
  function( 
  n){ 
 
 
  alert( 
  n); 
 

   } 
 

   } 
 

   }) 
 
 
  < 
  / 
  script 
  > 
 
 
    </ 
    body 
    > 
   
 
    </ 
    html 
    > 
   