從零開始學VUE之模板語法

              小編:管理員 85閱讀 2022.08.18

              事件監聽 v-on指令(縮寫"@")簡單點擊事件案例
              <!DOCTYPE html>
              <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <title>Title</title>
                  <script src="../../../js/vue.js"></script>
              </head>
              <body>
                  <div id="app">
                    <h1>{{count}}</h1>
              <!--      表達式方法-->
                    <button @click="count++">+</button>
                    <!-- 綁定方法,應為沒有餐宿,所以可以不用加小括號() -->
                    <button @click="decr">-</button>
                  </div>
              </body>
              <script>
                  // 創建vue
                  const vue = new Vue({
                      el: '#app',
                      data: {
                          count:0
                      },
                    methods: {
                        decr() {
                          this.count--;
                        }
                    }
                  })
              </script>
              </html>
              復制

              運行效果

              傳遞參數
              <!DOCTYPE html>
              <html lang="en">
              <head>
                  <meta charset="UTF-8">
                  <title>Title</title>
                  <script src="../../../js/vue.js"></script>
              </head>
              <body>
                  <div id="app">
                    <h1>{{count}}</h1>
              <!--        傳遞參數-->
                    <button @click="decr(1)">-</button>
              <!--        在不傳入參數的情況下,但是方法存在參數,vue會默認將點擊事件 event對象傳入,方法的第一個參數-->
                    <button @click="decr">-</button>
              <!--        若希望手動獲取到瀏覽器產生的事件對象 默認寫 $event 就可以-->
                    <button @click="getEvent('this is txt',$event)">-</button>
                  </div>
              </body>
              <script>
                  // 創建vue
                  const vue = new Vue({
                      el: '#app',
                      data: {
                          count:0
                      },
                    methods: {
                        decr(abc) {
                            console.log(abc);
                        },
                        getEvent(txt,event){
                            console.log(txt);
                            console.log(event);
                        }
                    }
                  })
              </script>
              </html>
              復制

              點擊后運行效果,點了按鈕

              事件修飾符

              Vue.js 為 v-on 提供了事件修飾符來處理 DOM 事件細節,如:event.preventDefault() 或 event.stopPropagation()。

              Vue.js 通過由點.表示的指令后綴來調用修飾符。

              事件

              描述

              .stop

              阻止冒泡

              .prevent

              阻止默認事件

              .capture

              阻止捕獲

              .self

              只監聽觸發該元素的事件

              .once

              只觸發一次

              .left

              左鍵事件

              .right

              右鍵事件

              .middle

              中間滾輪事件

              <!-- 阻止單擊事件冒泡 -->
              <a v-on:click.stop="doThis"></a>
              <!-- 提交事件不再重載頁面 -->
              <form v-on:submit.prevent="onSubmit"></form>
              <!-- 修飾符可以串聯  -->
              <a v-on:click.stop.prevent="doThat"></a>
              <!-- 只有修飾符 -->
              <form v-on:submit.prevent></form>
              <!-- 添加事件偵聽器時使用事件捕獲模式 -->
              <div v-on:click.capture="doThis">...</div>
              <!-- 只當事件在該元素本身(而不是子元素)觸發時觸發回調 -->
              <div v-on:click.self="doThat">...</div>
              <!-- click 事件只能點擊一次,2.1.4版本新增 -->
              <a v-on:click.once="doThis"></a>
              復制鍵盤事件

              Vue 允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符:

              <!-- 只有在 keyCode 是 13 時調用 vm.submit() -->
              <input v-on:keyup.13="submit">
              復制

              記住所有的 keyCode 比較困難,所以 Vue 為最常用的按鍵提供了別名:

              <!-- 同上 -->
              <input v-on:keyup.enter="submit">
              <!-- 縮寫語法 # 一般都直接寫@-->
              <input @keyup.enter="submit">
              復制

              別名

              描述

              .enter

              回車鍵

              .tab

              tab鍵

              .delete

              刪除/退格(backspace)

              .esc

              esc

              .space

              空格

              .up

              .down

              .left

              .right

              .ctrl

              ctrl

              .alt

              alt

              .shift

              shift

              .meta

              windows()/mac(commond)

              鍵盤Code碼組合鍵
              <p><!-- Alt + C -->
              # 通過keyup(鍵盤回彈).alt.67(c) 觸發clear方法,實現組合鍵
              <input @keyup.alt.67="clear">
              <!-- Ctrl + Click -->
              <div @click.ctrl="doSomething">Do something</div>
              復制
              關聯標簽:
              秋霞久久老子无码午夜精品,欧洲av成本人在线观看免费,亚洲精品无码国模av