Vue的Data使用注意

        <div id="app">

            <btns></btns>

            <btns></btns>

            <btns></btns>

            <btns></btns>

            <btns></btns>

            <btns></btns>

            <btns></btns>

            <btns></btns>

            //标记 1、2 和这里关联

            <my_data></my_data>

        </div>

          

        <template id="btn">

            <button @click="count += 1">点击次数{{count}}</button>

        </template>

          

        <template id="data">

                <div>

                    <img src='img/123.jpg' width="200px"/>

                    //1

                    {{text}}

                </div>

        </template>

        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            Vue.component('my_data',{

                template:'#data',

                data(){

                    return {

                              //2    这个地方赋值只能借助函数data(){return {}}

                        text:"123"

                    }

                }

            });

            //由于值在函数里面所有每一个组件的值都互不影响

            Vue.component('btns',{

                template:'#btn',

                data(){

                    return {

                        count:3

                    }

                }

            });

              

            new Vue({

                el:'#app'

            });

        </script>

.