template分离写法

1.使用注册组件语法糖

            Vue.component('cpn1',{
                template:`
                <div>
                    <h2>template未分离</h2>
                </div>
                `
            })  

在template中编写html代码是没有自动补齐的功能，并且当模板中的html代码变多时，注册组件部分看上去就会变得复杂。
所以，这时候就需要将template部分分离出来。

2.分离template--script

用script标签分离template时的注意点：
1.script标签的类型是 type="text/x-template"
2.script标签要有id属性，用于标识模板

        <script type="text/x-template" id="cpn1">
            <div>
                <h2>template分离</h2>
            </div>
        </script>
        <script type="text/javascript">
            Vue.component('cpn1',{
                template:cpn1
            })          
            const app = new Vue({
                el: '#app'
            })
        </script>

image.png

在html中使用组件

image.png

3.template分离--template标签（常用）

使用template标签分离template模板的注意点：
要有id标签标识模板

        <template id="cpn1">
            <div>
                <h2>template分离--template标签</h2>
            </div>
        </template>

image.png

在html中使用组件

image.png