Vue实例中的template讲解

码，

//别忘了引包
<body>
  <div id="app-1">
     {{msg}}
  </div>
  ================
  <div id="app-2">
     {{msg}}
  </div>
  =================
  <div id="app-3">
     {{msg}}
  </div>
  <script>
    //在vue.js中，可以使用template给元素添加模板，但是元素中只能有一个根元素，不能出现两个或两个以上的根同级元素。还可以在模板中绑定数据、表达式等。下面利用实例说明如何添加模板
    // 创建 Vue 实例，得到 ViewModel
    new Vue({
      el: '#app-1',
      data: {
         msg:'这是通过el属性获取挂载元素的outerHTML方式渲染' 
      }
    });
    //结论:如果vue实例中有template属性，会将该属性值进行编译，将编译后的虚拟dom直接替换掉vue实例绑定的元素（即el绑定的那个元素);
    //注意:template属性中的dom结构只能有一个根元素，如果有多个根元素需要使用v-if、v-else、v-else-if设置成只显示其中一个根元素；
    new Vue({
      el: '#app-2',
      data: {
         msg:'这是通过el属性获取挂载元素的outerHTML方式渲染' 
      },
      template:'<div>这是template属性模板渲染</div>'
    });
    //render 
    new Vue({
      el: '#app-3',
      data: {
         msg:'这是通过el属性获取挂载元素的outerHTML方式渲染' 
      },
      template:'<div>这是template属性模板渲染</div>',
      render: function(createElement){
        return createElement('div', 
        // 参数2、这里相当于给标签加属性 例如：<div style='color:red,font-size: 14px'></div>
        {
　　　　　　 //给div绑定样式
　　　　　　 style:{
　　　　　　　　　width:'300px',
                height:'400px',
                color:'pink'
　　　　　　 },　
　　　　　　//给div绑定点击事件　　
            on: {
                click: () => {
                    console.log('点击事件')
                }
            }
        },
        // 参数3、参数中渲染的标签的子元素数组（可选） 
        // [
        //    // 文本节点直接写就可以
        //    'text'
        // ]
        '这是render属性方式渲染。'
        );
      }
    });
  </script>
</body>

调试图片

原理说明图片

终极结论

el，template，render属性优先性

当Vue选项对象中有render渲染函数时，Vue构造函数将直接使用渲染函数渲染DOM树，当选项对象中没有render渲染函数时，Vue构造函数首先通过将template模板编译生成渲染函数，然后再渲染DOM树，而当Vue选项对象中既没有render渲染函数，也没有template模板时，会通过el属性获取挂载元素的outerHTML来作为模板，并编译生成渲染函数。

换言之，在进行DOM树的渲染时，render渲染函数的优先级最高，template次之且需编译成渲染函数，而挂载点el属性对应的元素若存在，则在前两者均不存在时，其outerHTML才会用于编译与渲染。

不多说，直接晒代码

main.go

package main

import (
   "fmt"
   "html/template"
   "net/http"
)

func sayhello(w http.ResponseWriter, r *http.Request){
   //2、解析模板
   t, err :=template.ParseFiles("index.html", "index2.html")
   if err != nil {
      fmt.Println("模板解析失败：",err)
   }
   //3、渲染模板
   t.Execute(w,"小丸子")
}

func main() {
   http.HandleFunc("/",sayhello)
   err :=http.ListenAndServe(":9090",nil)
   if err != nil {
      fmt.Println("服务启动失败：",err)
   }
}

主模板文件index.html，以及嵌套template语法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>tmpl test</title>
</head>
<body>

<h1>测试嵌套template语法</h1>
<hr>
{{/*嵌套了另外一个单独的模板文件*/}}
{{template "index2.html"}}
<hr>
{{/*嵌套另外一个define定义的模板*/}}
{{template "index3.html"}}

<div>你好，{{.}}</div>
</body>
</html>
{{/* 通过define定义一个模板*/}}
{{ define "index3.html"}}
    <ol>
        <li>吃饭</li>
        <li>睡觉</li>
        <li>打豆豆</li>
    </ol>
{{end}}

单独的模板文件index2.html

<ul>
    <li>注释</li>
    <li>日志</li>
    <li>测试</li>
</ul>

index.html文件中通过define定义得模板文件

在线咨询

上一篇：如何在Word中批量添加填空题的下划线？
下一篇：浅谈html元素的float属性

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商