6 vue事件监听等指令

事件监听

v-on的参数问题

<div id="app">
   <button @click="btn1Click()">按钮1</button>
   <button v-on:click="btn1Click">按钮2</button>

   <!--默认将浏览器生成的Event传入  输出Event-->
   <button @click="btn2Click">按钮3</button>
   <!--undifine-->
   <button @click="btn2Click()">按钮4</button>

   <!--需要event对象又需要其他参数-->
   <!--手动获取到浏览器参数的event对象-->
   <button @click="btn3Click(abc,$event)">按钮5</button>
   <button>按钮6</button>

</div>
<script src="../js/vue.js"></script>
<script>
const app=new Vue({
 el:'#app',
 data:{
   message:'你好啊',
   abc:456
 },
 methods:{
   btn1Click(){
     console.log("btn1Click");
   },
//    如果函数需要参数，但是没有传入 undifine
   btn2Click(event){
     console.log(event);
   },
   btn3Click(abc,event){
     console.log('.....',abc,event);
   }
 }
})

</script>

v-on修饰符的使用

<!--1 .stop修饰符的使用-->
<div id="app" @click="divClick">
   <!--阻止事件冒泡-->
   <button @click.stop="btnClick">按钮1</button>
   <!--2. .prevent修饰符的使用-->
   <form action="baidu">
       <input type="submit" value="提交" @click.prevent.stop="submitClick">
   </form>
   <!--3 监听某个键盘按键 enter 回车键-->
   <input type="text" v-on:keyup.enter="keyUp">
   <!--4 自定义组件-->
   <!--5 .once修饰符的使用-->
   <button @click.once="btn2Click">按钮2</button>

</div>

<script src="../js/vue.js"></script>
<script>
const app=new Vue({
 el:'#app',
 data:{
   message:'你好啊',
   abc:456
 },
 methods:{
   btnClick(){
     console.log("btnClick");
   },
   divClick(){
     console.log("divClick");
   },
   submitClick(){
     console.log("submitClick");
   },
   keyUp(){
     console.log("keyUp");
   },
   btn2Click(){
     console.log("btn2Click");
   }
 }
})

</script>