vue写template的4种形式

Posted 2020-10-22 张啊咩

1.template标签（非单文件组件）

<template id="t1">
    <h2>66666666</h2>
</template>

<script>
    new Vue({
        template: ‘#t1‘
    })
</script>

2.template标签单页面组件

和上面一样用<template></template>,由于有vue-loader编译不需要在手动在选项template上加‘#t1’之类的

3.反单引号

<script>
    new Vue({
        template: `
            <div>
                     <h2>2333</h2>      
            </div>
        `
    })
</script>

4.script标签（type="x-template"）

<script type="x-template" id="tem">
    <h2>我是古天乐～<div>666</div></h2>
</script>

<script>
    new Vue({
        template:‘#tem‘
    })
</script>