vue——12-标签创建组件——template标签 script标签

版权声明：转发博客 请注明出处 否则必究 https://blog.csdn.net/lucky541788/article/details/82733492

template标签（常用）

<div id="enjoy">
    <my-div></my-div>
</div>

<template id="my_div">
    <!--
    <div>hello world!</div>
    <input type="date">
    会报错，要像下面外用div包装好
    -->
    <div>
        <div>hello world!</div>
        <input type="date">
    </div>
</template>

        {
            //1.实例化组件
            Vue.component('my-div',{
                //这次template是单引号（前面几次都是``）
                template: '#my_div'

            });

            new Vue({
                el:'#enjoy',
            })
        }

script标签（不常用）

<div id="enjoy">
    <my-div1></my-div1>
</div>

<script type="text/template" id="my_div1">
    <div>
        <div>hello boy!</div>
        <input type="color">
    </div>
</script>

        {
            //1.实例化组件
            Vue.component('my-div1',{
                //这次template是单引号（前面几次都是``）
                template: '#my_div1'

            });

            new Vue({
                el:'#enjoy',
            })
        }