Vue学习（十二）Dom模版和字符串模版

Dom模版

dom模版直接写在dom结构中，例如：

    <div id="box">
        <name></name>
    </div>
    <!-- 父组件模版 -->
    <template id="name">
        <h2>{{msg}} => {{string}}</h2>
        <age :data-msg='msg' :data-string='string'></age>
    </template>
    <!-- 子组件模版 -->
    <template id="age">
        <h2>18</h2>
        <span>{{dataMsg}} => {{dataString}}</span>
    </template>
    <script>
        var vm = new Vue({
            data:{

            },
            components:{
                'name':{
                    data(){
                        return {
                            msg:'我是父组件数据',
                            string:'我是父组件的另外一个数据'
                        }
                    },
                    template:'#name',
                    components:{
                        'age':{
                            props:['dataMsg','dataString'],
                            template:'#age'
                        }
                    }
                }
            }
        }).$mount('#box');  
    </script>

字符串模版

字符串模版写在template属性中，例如：

    <div id="box">
        <aaa></aaa>
    </div>
    <script>
        Vue.component('aaa',{
            template:'<h1 @click="show">{{msg}}</h1>',
            data(){
                return {
                    msg:'hello vue'
                }
            },
            methods:{
                show(){
                    this.msg = 'hello';
                }
            }
        });

        var vm = new Vue({
            data:{
            }
        }).$mount('#box');  
    </script>