Vue2 模板template的四种写法总结（很重要）

绝地灬酷狼 2021-09-17 15:24 463阅读 0赞

### ** 使用template标签要特别注意了 ：** ###

### **官方解释：** ###

**[HTML][] `<template> `元素 **是一种用于保存客户端内容的机制，该内容在页面加载时不被渲染，但可以在运行时使用JavaScript进行实例化。

可以将一个模板视为正在被存储以供随后在文档中使用的一个内容片段。

虽然, 在加载页面的同时,解析器确实处理 **`<template>`**元素的内容，这样做只是确保这些内容是有效的; 然而,元素的内容不会被渲染。

**在使用Vue2调用 `<template>标签时，如果不跟着一个div标签，内容只显示一样！所以，一定要加上div标签！`**

<template id="kirin_template">
          <div>
              <p><span>{
       {children_kirin()}}</span></p>
              <p><button>{
       {component}}</button></p>
              <hr>
          </div>
        </template>

<div id="app"> 
     <h1>我是直接写在构造器里的模板1</h1> 
    </div> 
      
    <template id="demo3"> 
     <h1 style="color:red">我是选项模板3</h1> 
    </template> 
      
    <script type="x-template" id="demo4"> 
     <h1 style="color:red">我是script标签模板4</h1> 
    </script> 
      
    <script> 
     var vm=new Vue({ 
      el:"#app", 
      data:{ 
       message:1 
      }, 
      
      //第2种模板 写在构造器里 
      //template:`<h1 style="color:red">我是选项模板2</h1>` 
      
      //第3种模板 写在<template>标签里 
      //template:'#demo3' 
      
      //第4种模板 写在<script type="x-template">标签里 
      template:'#demo4' 
     }) 
    </script>

[HTML]: https://developer.mozilla.org/en-US/docs/Web/HTML