3. Vue做一個計數器 --新屬性：methods、新的指令：@click
阿新 • • 發佈：2021-06-23
我們用Vue做一個計數器，所以我們學習2個新東西：
新屬性： methods
新指令： @click (v-on:click)
邏輯 : 點選+按鈕 變數+1並列印 點選-按鈕 變數-1並列印：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script src="js/vue.js"></script> <div id="app"> <h2>當前數量:{{sum}}</h2> <!-- 注意這個button千萬不能放外面 因為 確保你所有權被Vue控制！！ --> <buttonv-on:click="sum++;">+</button> <button v-on:click="sum--;">-</button> </div> <script> const app = new Vue({ el: "#app", data: { sum: 0 } } ) </script> </body> </html>
所以 v-on:click="xxxx;" 這就是監聽，我們有新監聽方法替代v-on:
所以既然替代了 那麼也別在標籤裡面寫語句了【因為如果寫很多會很亂！！！】 我們在Vue中的methods中寫：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script src="js/vue.js"></script> <div id="app"> <h2>當前數量:{{sum}}</h2> <!-- 下面寫入方法名即可 --> <button @click="add">+</button> <button @click="sub">-</button> </div> <script> const app = new Vue({ el: "#app", data: { sum: 0 }, // methods寫入函式方法 methods: { add() { this.sum++; //一定要加this 為了防止同名而且要養好習慣！ }, sub() { this.sum--; } } } ) </script> </body> </html>
所以： 很方便啊 很方便：：：
總結：
新的屬性：methods，該屬性用於在Vue物件中定 義方法。
新的指令：@click, 該指令用於監聽某個元素的點 擊事件，並且需要指定當發生點選時，執行的方法 (方法通常是methods中定義的方法)
這些@click是什麼東西？
Vue物件中又是定義el/data/methods，到底都有 哪些東西可以定義，以及它們的作用是什麼？
這些疑惑在後續學習中都會一一解開。