<!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> <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>数据、方法和计算属性</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>