跟着技术胖学Vue2.0—第二季第五课：Template模板

课程回顾

课程主要内容

1、掌握三种template模板方式。

课程展开

1.1 Vue选项模板

这种写法直接在Vue构造器中的template选项里写上模板内容，需要注意的是template选项中的模板内容要写在``里面，这个符号是键盘左上角的~号键，切换到英文模式下，直接按该键就可以打出这个符号。

多说一句，Vue选项就是el、data这些，各选项之间用逗号隔开，因此template的写法类似，直接接着data下面写就行啦。

代码：

template:`
    <h1 style="color:red">1、这是Vue选项模板</h1>
`

效果：

1.2 template标签模板

第二种方法是直接在html中使用template标签，但是需要在Vue的template选项中挂载一下才能使用。html代码如下：

<template id="dd2">
    <h1 style="color:red">2、这是Template标签模板</h1>
</template>

挂载：

template:"#dd2"

 一定要注意这个时候用的是""号哦，和方式1不一样的。

效果：

1.3 script标签模板

第三种方法就是在html中使用script标签模板，和template标签模板的写法类似，都要进行挂载。html代码如下：

<script id="dd3">
    <h1 style="color:red">3、这是script标签模板</h1>
</script>

挂载：

template:"#dd3"

效果：

 注意

1、三种模板方法的比较：选项模板适合模板内容比较少和简单的情况；script适合模板内容特别多的情况，因为它可以使用src添加外部文件，因此可以保证页面的代码简洁；template模板可以在上述两种情况中间使用。

2、三种模板不能同时存在于一个页面，一个页面只能用一种模板。

以上就是第五课的内容，下次再见！