Vue3-笔记五(事件处理&修饰符)

写法：
	v-on:click='handler'       
	@click='handler'(项目中更常用)
内联事件处理：事件被触发时执行的内联 JavaScript 语句
方法事件处理：一个指向组件上定义的方法的属性名或是路径

内联事件处理

<button @click="countRef++">Add 1</button>  //直接写法模板里
<p>Count is: {{ countRef }}</p>
const countRef = ref(0)

方法事件处理

<button @click="add">Add 1</button>
<p>Count is: {{ countRef }}</p>
const countRef = ref(0)
const add = (e)=>{  // e  ==> DOM原生事件
	countRef.value++
}

方法与内联事件判断：

官方解释：foo、foo.bar 和 foo['bar'] 会被视为方法事件处理器，
而 foo() 和 count++ 会被视为内联事件处理器。

传参：

<button @click="say('hello')">Say hello</button>
<button @click="say('bye')">Say bye</button>
const say =(message)=>{
	alert(message)
}

如果需要原生事件

const say =( message,e) =>{
	//这里e就是DOM原生事件
	//message为你自己传的值
}

事件参数

.stop		阻止事件冒泡，停止事件向父元素中传播
.prevent	阻止事件默认行为
.self		仅当事件在当前元素本身触发时才处理事件，不包含子元素
.capture	事件捕获，当元素发生事件冒泡时，先触发带有该参数的，若多个该修饰符，由外向内触发
.once		只触发一次事件，之后解绑事件
.passive	告诉游览器我们没有阻止默认行为

<!-- 单击事件将停止传递 -->
<a @click.stop="doThis"></a>
<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>
<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>

按键修饰符

常用的按键别名，对应键盘的按键
.enter
.tab
.delete(捕获“Delete”和“Backspace”两个按键)
.esc
.space
.up
.down
.left
.right

<!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->
<input @keyup.enter="submit" />

鼠标按键修饰符

.left		左键
.right		右键
.middle		中键

系统级别按键修饰符

.ctrl		ctrl键
.alt		alt键
.shift		shift键
.meta		Windows键(windows举例)

.exact      修饰符允许控制触发一个事件所需的确定组合的系统按键修饰符

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + 点击 -->
<div @click.ctrl="doSomething">Do something</div>

<!-- 仅当按下 Ctrl 且未按任何其他键时才会触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 仅当没有按下任何系统按键时触发 -->
<button @click.exact="onClick">A</button>

**自定义事件后边跟组件间传参一起说