vue中文官网事件处理 | Vue.js (vuejs.org)
我在官网基础上，添加些代码，方便初学者学习，能够快速理解官网内容，掌握自己所需要的知识，以便节省宝贵的时间。
事件处理
监听事件
我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click="handler" 或 @click="handler"。
事件处理器 (handler) 的值可以是：1、内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。2、方法事件处理器：一个指向组件上定义的方法的属性名或是路径。
内联事件处理器
内联事件处理器通常用于简单场景，例如：
演示代码：
js 代码：
const count = ref(0)
template 代码：
<button @click="count++">Add 1</button><p>Count is: {{ count }}</p>
演示结果：
方法事件处理器
举例来说：
演示代码：
js 代码：
const name = ref('Vue.js')let say = ref('')let eventName= ref('')function greet(event) {say.value=`Hello ${name.value}!`// `event` 是 DOM 原生事件if (event) {eventName=event.target.tagName}}
template 代码：
<button @click="greet">greet()</button><li>{{say}}</li><li>{{eventName}}</li>
演示结果：
方法与内联事件判断
模板编译器会通过检查 v-on 的值是否是合法的 JavaScript 标识符或属性访问路径来断定是何种形式的事件处理器。举例来说，foo、foo.bar 和 foo['bar'] 会被视为方法事件处理器，而 foo() 和 count++ 会被视为内联事件处理器。
在内联处理器中调用方法
除了直接绑定方法名，你还可以在内联事件处理器中调用方法。这允许我们向方法传入自定义参数以代替原生事件：
演示代码：
js 代码：
const sayText = ref('')function say(message) {if (message) {sayText.value =""if(message === 'hello'){sayText.value="hello,how are you"}else {sayText.value="good bye"}}}
template 代码：
<button @click="say('hello')">Say hello</button><button @click="say('bye')">Say bye</button><table>{{sayText}}</table>
演示结果：
在内联事件处理器中访问事件参数
有时我们需要在内联事件处理器中访问原生 DOM 事件。你可以向该处理器方法传入一个特殊的 $event 变量，或者使用内联箭头函数：
演示代码：
js 代码：
const warnText = ref("")function warn(message, event) {// 这里可以访问原生事件 warnText.value=event.target.innerText+":"+message}
template 代码：
<button @click="warn('Form cannot be submitted yet.', $event)">Submit</button><!-- 使用内联箭头函数, event1自定义变量接受事件变量--><button @click="(event1) => warn('Form cannot be submitted yet. 01', event1)">Submit01</button><table>{{warnText}}</table>
演示结果：
事件修饰符
在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好。
为解决这一问题，Vue 为 v-on 提供了事件修饰符。修饰符是用 . 表示的
