vue-template标签用法

背景：最近在项目中看见html部分，由于在最外层写了lang="html"导致标签对应不上，删了以后发现好像没啥区别，不知道这个属性到底产生了什么作用（查询了很多文档之后这句话没啥用处，应该是指定为html语言，删了也不影响），决定对template标签深入了解一下。

 内容：

1、vue中的template标签

在vue实例绑定的元素内部时，可以显示标签中的内容，但是查看后台的dom结构不存在template标签。( 因为template标签天生不可见，它设置了display:none;属性 )

template的作用是模板占位符，可帮助我们包裹元素，但在循环过程当中，template不会被渲染到页面上。

如果不放在vue实例绑定的元素内部，里面的内容不能显示在页面上，但是dom结构可以查看到存在template标签。

注意：vue实例绑定的元素内部的template标签不支持v-show指令，即v-show=“false”对template标签不起作用 (想要不展示，结果还是展示了) 。其他指令正常。

2、了解vue实例中的template属性的性质：

（1）如果vue实例中有template属性，会将其进行编译，将编译后的虚拟dom直接替换掉vue实例绑定的元素（即el绑定的那个元素）

（2）template属性中的dom结构只能有一个根元素。如果有多个根元素需要使用v-if、v-else、v-else-if设置成只显示一个根元素。

3、vue组件(封装的html/js/css)和模板的区别：

（1）vue实例有el指定挂载元素，组件没有，因为组件是通过调用组件名渲染页面；

（2）vue实例中data属性： data:{title:'123'}   组件中的data属性：data(){return {title:'123'}}；

（3）vue实例的html元素是直接渲染到页面中，而组件的html元素是定义在template上，通过调用渲染到页面

4、template的三种写法：

（1）第一种

（2）第二种

 （3）第三种