<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??碼云GVP開源項目 12k star Uniapp+ElementUI 功能強大 支持多語言、二開方便! 廣告
                # 11 監聽 DOM 事件和事件修飾符 > 原文: [https://javabeginnerstutorial.com/vue-js/11-listening-to-dom-events-and-event-modifiers/](https://javabeginnerstutorial.com/vue-js/11-listening-to-dom-events-and-event-modifiers/) 我們在事件方面一直處于停滯狀態。 現在,讓我們學習如何收聽 DOM 事件,即`click`事件。 看一下起始代碼, #### `Index.html` ```js <!DOCTYPE html> <html> <head> <title>Hello Vue!</title> <!-- including Vue with development version CDN --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h2>Welcome</h2> <button>Say Hello</button> <p> {{ message }} </p> </div> <!-- including index.js file --> <script src="index.js"></script> </body> </html> ``` #### `Index.js` ```js var app = new Vue({ el: "#app", data: { message: "Hi" } }); ``` 地球上最著名的按鈕事件是`click`事件。 假設我們要在單擊“說你好”按鈕時將消息“嗨”更改為“你好”。 知道我們如何通過 Vue 實現這一目標嗎? 親們,人民,Vue 為此又有另一個指令,`v-on`! 我們始終可以使用`v-on`監聽 DOM 事件,例如, * 鼠標事件 – `click`,`dblclick`,`mousemove`,`mouseover`等。 * 鍵盤事件 - `keypress`,`keyup`,`keydown`等。 * 表單事件 – `submit`,`focus`,`blur`等 * 還有很多 ## 監聽點擊事件 因此,我們現在的任務是監聽按鈕“Say Hello”上發生點擊事件時,將消息文本從“`Hi`”更改為“`Hello`”。 一件事很清楚。 我們必須將`v-on`指令添加到將要監聽`click`事件的`button`元素中。 ```js <button v-on:click="message='Hello'">Say Hello</button> ``` 剖析語法, * `v-on` – Vue 知道我們正在使用此指令來監聽事件 * `click` – 指定在冒號之后我們正在監聽的事件的類型 * `=` – 在等號后,指定觸發事件時我們要執行的方法名稱或 JavaScript 代碼。 我們正在從 Vue 實例的數據對象訪問`message`屬性,并將其設置為“`Hello`”。 輸出如下, ![click event](https://img.kancloud.cn/4d/9c/4d9c377baa387a74d7d6977b9513cfcc_371x267.png) 酷! 但是在實際的應用中,我們將要做的不僅僅是改變屬性的文本。 **令人費解的問題**:如何在`v-on`指令的雙引號中放入復雜的 JavaScript 代碼? ### 使用方法 上面提到的大腦拖曳問題的答案是使用方法。 就像`data`對象一樣,我們的 Vue 實例有一個可選的`methods`對象,我們可以在其中定義所有方法。 現在,在`v-on`的雙引號中,只需提及方法的名稱,然后**傳遞所需的參數**(如果有)。 然后,在 Vue 實例的`methods`對象中定義方法,該方法將在每次`click`事件發生時觸發。 #### `Index.html`(代碼段) ```html <button v-on:click="greet('howdy')">Say Hello</button> ``` #### `Index.js` ```jsscript var app = new Vue({ el: "#app", data: { message: "Hi" }, // define all the methods within the 'methods' object methods: { greet(greeting) { // 'this' keyword refers to the current Vue instance this.message = greeting; } } }); ``` 您注意到`this`關鍵字的用法了嗎? 為了從 HTML 引用`data`對象的屬性,我們可以直接使用它們,因為我們使用`el`關鍵字將特定的 HTML 部分與 Vue 實例掛鉤。 但是,在`methods`內部,我們必須使用`‘this’`關鍵字指向 Vue 實例,然后訪問`data`對象的屬性。 ![click event with method](https://img.kancloud.cn/ba/92/ba925f9c7837be66b85f1c7d027f3b23_277x227.png) 單擊該按鈕,“說聲你好”觸發了`greet('howdy')`方法,并且該方法中的代碼被執行,從而向網頁呈現“`Howdy`”。 ## 事件修飾符 假設我們有一個名為“**加 1**”的按鈕和一個初始值為`zero`的計數器。 每次單擊該按鈕時,都會在現有的`counter`值上加 1 并將其打印到屏幕上。 現在讓我們將想象力帶入現實。 只需將`v-on`指令與`click`用作參數,即可觸發將`counter`值加 1 的方法。 #### `Index.html` (代碼段) ```html <button v-on:click="addOne">Add 1</button> <p> {{ counter }} </p> ``` #### `Index.js`(代碼段) ```jsscript methods: { addOne: function() { this.counter += 1; } } ``` **腦筋急轉彎問題**: *如果我們只想先在`click`上觸發此方法,然后再不觸發該方法怎么辦?* 該問題的答案是 – **事件修飾符**! 這些使我們能夠**修改事件**的行為(正如其名稱所暗示的)。 **用法**:在事件名稱(在本例中為`click`)之后,添加一個點并指定要使用的修飾符的名稱。 ```html <button v-on:click.once="addOne">Add 1</button> ``` 使用事件修飾符`.once`,`click`事件將僅觸發一次。 這意味著,無論單擊按鈕多少次,只要將`counter`的值增加到 1,`addOne`方法將僅被調用。 ![.once event modifier](https://img.kancloud.cn/a7/bd/a7bdd4f6fb27ba4473afe2b6579eeff8_415x413.png) 同樣,其他可用的事件修飾符是 + `.stop` + `.prevent` + `.capture` + `.self` + `.once` + `.passive` 最常用的修飾符是`.stop`和`.prevent`,它們稱為眾所周知的`event.stopPropagation()`和`event.preventDefault()`方法。 這些是[本機事件對象](https://www.w3schools.com/jsref/obj_event.asp)隨附的方法。 這里與 Vue 無關。 Vue.js 只是提供了一種簡單的方法,借助修飾符來處理此類常見事件詳細信息,而不是在 Vue 實例的方法中顯式指定這些事件方法(例如`event.preventDefault()`來取消事件)。 ### 兩個最常用修飾符的快速刷新: 根據`stopPropagation()`事件方法,`.stop`修飾符將進一步停止事件的傳播。 根據`preventDefault()`方法,`.prevent`修飾符將防止發生默認操作。 `.prevent`的最佳示例是將其與`Submit`按鈕一起使用,以便觸發提交事件時,它不會重新加載頁面。 ### 鏈接修飾符 *警告:一開始可能會有些彎腰!* Vue 讓我們像這樣,將這些修飾符一個接一個地鏈接, ```html v-on:click.self.prevent ``` 鏈接的**順序**非常重要。 因為與每個修飾符相關的代碼是按相同順序生成的。 例如, ```html <a href="https://vuejs.org/" v-on:click.self.prevent target="_blank">Open Vue <p>Click me now</p> </a> ``` 使用`v-on:click.self.prevent`僅會阻止單擊`<a>`元素本身,而不是單擊其`child`元素。 好吧,我聽到你說“請用英語”! 換句話說,這意味著 * 單擊`<a>`標簽的“**打開 Vue**”將阻止打開`vuejs.org`頁面 * 單擊標簽上的“**立即單擊我**”,將在新標簽中打開`vuejs.org`官方頁面 相反,如果我們將鏈接修飾符的順序更改為`v-on:click.prevent.self`,則將防止發生所有單擊事件。 ```html <a href="https://vuejs.org/" v-on:click.prevent.self target="_blank">Open Vue <p>Click me now</p> </a> ``` 單擊`<a>`的“**打開 Vue**”和`<p>`的“**立即單擊我**”都不會打開`vuejs.org`(換句話說,它無法打開)。 現在,讓我們看一下到目前為止處理的完整代碼, `index.html` ```html <!DOCTYPE html> <html> <head> <title>Hello Vue!</title> <!-- including Vue with development version CDN --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h2>Welcome</h2> <!-- Listening to click event with v-on directive --> <button v-on:click="greet('howdy')">Say Hello</button> <p> {{ message }} </p> <h2>Event Modifiers</h2> <!-- Using .once to modify click event --> <button v-on:click.once="addOne">Add 1</button> <p> {{ counter }} </p> <!-- chaining event modifiers --> <a href="https://vuejs.org/" v-on:click.prevent.self target="_blank">Open Vue <p>Click me now</p> </a> </div> <!-- including index.js file --> <script src="index.js"></script> </body> </html> ``` index.js ```jsscript var app = new Vue({ el: "#app", data: { message: "Hi", counter: 0 }, // define all the methods within the 'methods' object methods: { greet(greeting) { // 'this' keyword refers to the current Vue instance this.message = greeting; }, // another way to define methods before es6 addOne: function() { this.counter += 1; } } }); ``` 我知道今天有很多事情要消化。 上面討論的所有代碼以及不言自明的注釋在 [GitHub 倉庫](https://github.com/JBTAdmin/vuejs)中可用。 慢慢來,我很快就會回來討論鍵盤和其他鼠標 DOM 事件。 祝你有個美好的一天!
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看