学习最新vue20.17.0-事件处理

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 提供了事件修饰符。

  修饰符是用 . 表示的