Vue文件中的template作用

        vue开发的组件中，特别是.vue为后缀的文件，常常见到一个<template></template>包裹的一段界面的代码。但你没有发现，当你发布后，查看源码，你会发现这个template标签不见了，这个就是template的核心功能。

        其实template并不是vue特有的标签，据说是2013年各大浏览器就开始支持template了。所在最新的浏览器都支持。

        使用template的好处就是当我们的组件被渲染到页面时，template不会作为div这样的标签，多次循环的时候，它里面的代码就可以多次使用，请看以下代码：

    建立一个AboutView.vue文件，贴上以下代码：

  <template  v-for="item in list" :key="item.id">
    <div>
        <span>{
   
   {item.id}}:{
   
   {item.text}}</span>
    </div>
   </template>
<script>
export default {
  name: 'AboutView',
  data(){
    return {
      list: [
        {
          id:"1",
          text:"张三"
        },
        {
          id:"2",
           text:"李四"
        },
        {
          id:"3",
          text:"王五"
        }
      ] 
    }
  }
}
</script>

使用这个组件时，会显示什么样的效果呢？

 我们使用了template这个标签，我们在调用这个页面的时候，看源码，却看不到这个template标签：

 结论：

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