第2章 组件-----2-2数据、方法和计算属性 

<!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>

 

posted @ 2021-07-05 14:58  {颜逸}  阅读(29)  评论(0)    收藏  举报