第2章 元件-----2-2資料、方法和計算屬性
阿新 • • 發佈：2021-07-05
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> <!DOCTYPE html> <htmllang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>資料、方法和計算屬性</title> </head> <body> <div id="app"> <!-- 因為元件是可複用的 Vue 例項， 所以它們與 new Vue 接收相同的選項，例如 data、computed、watch、methods 以及生命週期鉤子等。 僅有的例外是像 el 這樣根例項特有的選項。 問：為什麼Vue例項中的data屬性是一個物件，然而元件中的data屬性是一個函式？ 答：因為一個元件可以在同一個頁面上被多次引用，如果每個例項的data屬性是同一個物件的引用，當該元件的某個例項修改了自身的data屬性，相當於所有例項的data屬性都被修改了 通過以下案例可以看到每個元件都獨有一個count 注意：如果忘記將元件的data屬性設定為函式，Vue會丟擲一個警告！！！--> <button-counter></button-counter><br> <button-counter></button-counter><br> <button-counter></button-counter><br> <button-counter></button-counter><br> <button-counter></button-counter> </div> <script src="../vue.js"></script> <script> // 定義一個名為 button-counter 的新元件 Vue.component('button-counter', { data: function () { return { count: 0 } }, computed:{ }, watch:{ }, methods:{ }, template: '<button v-on:click="count++">你點選了我 {{ count }} 次，請不要隨便點選！！</button>' }); let vue = new Vue({ el: "#app", data: { } }) </script> </body> </html>