vue9---事件监听 v-on

事件监听 v-on： （@）

1. 基本使用

<button id = 'btn' @click: 'add'> + </button>
	<script>
		const bu = new Vue({
			el: '#btn',
			data: {
				count: 0
			},
			methods: {
				add(){
					this.count ++;
				},
				listen(abc){
					console.log(abc);
				},
				look(abc,event){
					console.log(abc,event);
				}
			}
		})
	</script>

2. v-on参数

1. 在事件监听中，且该方法不需要参数，则可以不写小括号：

    @click='add'
    @click='add()'
   

2. 需要传参，且参数不是事件本身

    @click='listen';  //MouseEvent
    @click='listen()';   //undefined
    @click='listen(123)';   //123
    @click='listen(abc)';   //vue报错，且undefined
    @click='listen("abc")';  //abc
   

• 不写括号：则默认传入事件本身(总是传入第一个参数)
• 不写实参：则默认未赋值，为undefined
• 实参为数字：直接使用
• 实参为不加引号的字符串：则认为是变量名，会在data中找，找不到则报错
• 实参为字符串：当字符串使

3. 参数要使用事件本身

    @click='look'     //MouseEvent
    @click='look()'   //undefined  undefined
     
    @click='look(123)'         //123 undefined
    @click='look(123,$event)'  //123 MouseEvent
    
    @click='look(abc)'         // vue报错,  undefined undefined
    @click='look(abc,$event)'  // vue报错，undefined MouseEvent
    
    @click='look("abc")'        //abc undefined
    @click='look("abc",$event)' // abc  MouseEvent
    
    @click='look("abc",event)'  //vue报错，abc undefined
   

3. v-on 修饰符

.stop修饰符 ——阻止冒泡事件

<div id = "app" @click = 'divClick'>
    aaaaaaaaa
    <button @click='btnClick'>an</button>
  </div>  
  <script src = '../vue.js'></script>
  <script>
    const app = new Vue({
      el: '#app',
      methods:{
        divClick(){
          console.log('div');          
        },
        btnClick(){
          console.log('button');
        }
      }
    })
  </script>

点击按钮，点击事件会冒泡到div中

阻止事件冒泡：

<button @click.stop='btnClick'>an</button>

.prevent修饰符——阻止默认事件

eg. form表单会自动提交

<form action="ba">
      <input type="submit" value="提交" @click='wait'>
</form>

一点击便自动提交

<form action="ba">
      <input type="submit" value="提交" @click.prevent='wait'>
</form>

点击后不自动提交

.{keyCode|keyAlias} —— 监听键盘按键

编码|简称

以后者为例

监听键盘所有按键：

<form action="ba">
   <input type="submit" value="提交" @keyup='keyUp'>
</form>

监听回车键：

<form action="ba">
   <input type="submit" value="提交" @keyup.enter='keyUp'>
</form>

.native修饰符——监听组件根元素的原生事件

自定义的组件 ，事件监听无效：
<aa id ="ba" @click='hello'> </aa>

生效：
<aa id ="ba" @click.native='hello'> </aa>

.once修饰符—— 只触发一次回调

<button @click.once='btnClick'>an</button>

不管点击多少次，都只调用一次btnClick