Template 制作模版（13）

vue的模板有三种写法

一、直接写在选项里的模板

<script>
    var app=new Vue({
        el:"#app",
        data:{
            msg:"HelloWorld",
            count:1
        },
        template:`<h2>我是选项模板{{this.count}}</h2>`
//        template:'#muban',
//        template:"#muban2"
    })
</script>

image.png

template为何不用双引号或者单引号而是用``，因为我们写模板的时候经常用到双引号或者单引号
选项模板适合很小的形式，比如几句话,代码太多不建议用选项模板。

二、写在<template>标签里的模板

<div id="app">
    <h1>{{msg}}</h1>
    <template id="muban">
        <h2>我是标签模板</h2>
    </template>
    <script type="text/x-template" id="muban2">
      <h2>我是script模板</h2>
    </script>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            msg:"HelloWorld",
            count:1
        },
//        template:`<h2>我是选项模板{{this.count}}</h2>`
        template:'#muban',
//        template:"#muban2"
    })
</script>

标签模板适合的场景比如已经写好的html页面，你可以直接粘贴放在模板标签里，然后挂载就可以使用

三、写在<script>标签里的模板

<div id="app">
    <h1>{{msg}}</h1>
    <template id="muban">
        <h2>我是标签模板</h2>
    </template>
    <script type="text/x-template" id="muban2">
      <h2>我是script模板</h2>
    </script>
</div>

script模板可以外部引用模板文件。