template

<body>

    <div id="app">
        <conten></conten>    
    </div>

    <div id="app2">
        <conten></conten>    
    </div>

    <div id="app3">
        <!-- 在自定义组件中赋值 -->
        <conten title="color" con="3333"></conten>
    </div>



    <template id="tem">
        <!-- 在这里渲染值 -->
        <h1>templatetemplate {{title}}--{{con}}--{{c}}</h1>
    </template>


<script>

    Vue.component("conten",{
        template:"<h1>1111111111111</h1>"
    });

    new Vue({
        el:'#app'
    });

    //可以多个
    Vue.component("conten",{
        template:"<h1>222222222222222</h1>"
    });

    new Vue({
        el:'#app2'
    });

    
// 模板要先Vue.component()然后紧随其后实例化Vue指定父节点,
    Vue.component("conten",{

        template:"#tem",
        props:["title","con"],//这里规定组件中可以赋值项
        data:function(){
            return {
                c:22
            }
        }
    });
    new Vue({
        el:'#app3'
    });

</script>
</body>
posted @ 2017-05-08 10:33  大厨的笔记  阅读(304)  评论(0编辑  收藏  举报