vue.js中事件的学习

在vue.js中使用v-on可以给标签添加事件

	<input type="button" value="按钮" @click="show">

var vm = new Vue({
  el: "#app",
  data:{

  },
  methods:{
      show:function(){
          alert("hello");
      }
  }
})

注：@click=“show” 等价于 v-on:click=“show”

事件修饰符

• .stop阻止冒泡
  由于事件具有冒泡性质，如果我们要阻止冒泡，可以使用.stop
  例如：

  <div id="app">
      <div class="inner" >
          <!-- 
              1| .stop 阻止冒泡
              2| .prevent 阻止事件发生
              3| .capture 捕捉下级传递的事件，在捕捉的事件执行的之前先执行自身的事件
              4| .self 只有通过点击自己触发的事件才会触发，传递过来的都不会触发
              5| .once 触发一次
           -->
          <input type="button" value="按钮" @click.stop="btnHandler"> 
       </div>
  </div>
  

  var vm1 = new Vue({ 
       el:"#app",
       data:{},
       methods: {
           btnHandler(){
               console.log("触发了按钮的click")
           }
       }
   });
  

• .capture捕捉下级传递的事件，在捕捉的事件执行的之前先执行自身的事件

  <div id="app">
  	<div class="inner" @click.capture="div2Handler">
  	    <input type="button" value="按钮" @click="btnHandler"> 
  	</div>
  </div>
  

   var vm1 = new Vue({ 
       el:"#app",
       data:{
  
       },
       methods: {
           div2Handler(){
               console.log("触发了div2的click")
           },
           btnHandler(){
               console.log("触发了按钮的click")
           }
       }
   });
  

  点击按钮
  

• .prevent阻止事件发生

• .self 只有通henhao过点击自己触发的事件才会触发，传递过来的都不会触发

• .once 触发一次