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給元素添加模板，但是元素中只能有一個根元素，不能出現(xiàn)兩個或兩個以上的根同級元素。還可以在模板中綁定數(shù)據(jù)、表達(dá)式等。下面利用實例說明如何添加模板
    // 創(chuàng)建 Vue 實例，得到 ViewModel
    new Vue({
      el: '#app-1',
      data: {
         msg:'這是通過el屬性獲取掛載元素的outerHTML方式渲染' 
      }
    });
    //結(jié)論:如果vue實例中有template屬性，會將該屬性值進(jìn)行編譯，將編譯后的虛擬dom直接替換掉vue實例綁定的元素（即el綁定的那個元素);
    //注意:template屬性中的dom結(jié)構(gòu)只能有一個根元素，如果有多個根元素需要使用v-if、v-else、v-else-if設(shè)置成只顯示其中一個根元素；
    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', 
        // 參數(shù)2、這里相當(dāng)于給標(biāo)簽加屬性 例如：<div style='color:red,font-size: 14px'></div>
        {
　　　　　　 //給div綁定樣式
　　　　　　 style:{
　　　　　　　　　width:'300px',
                height:'400px',
                color:'pink'
　　　　　　 },　
　　　　　　//給div綁定點擊事件　　
            on: {
                click: () => {
                    console.log('點擊事件')
                }
            }
        },
        // 參數(shù)3、參數(shù)中渲染的標(biāo)簽的子元素數(shù)組（可選） 
        // [
        //    // 文本節(jié)點直接寫就可以
        //    'text'
        // ]
        '這是render屬性方式渲染。'
        );
      }
    });
  </script>
</body>

調(diào)試圖片

原理說明圖片

終極結(jié)論

el，template，render屬性優(yōu)先性

當(dāng)Vue選項對象中有render渲染函數(shù)時，Vue構(gòu)造函數(shù)將直接使用渲染函數(shù)渲染DOM樹，當(dāng)選項對象中沒有render渲染函數(shù)時，Vue構(gòu)造函數(shù)首先通過將template模板編譯生成渲染函數(shù)，然后再渲染DOM樹，而當(dāng)Vue選項對象中既沒有render渲染函數(shù)，也沒有template模板時，會通過el屬性獲取掛載元素的outerHTML來作為模板，并編譯生成渲染函數(shù)。

換言之，在進(jìn)行DOM樹的渲染時，render渲染函數(shù)的優(yōu)先級最高，template次之且需編譯成渲染函數(shù)，而掛載點el屬性對應(yīng)的元素若存在，則在前兩者均不存在時，其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("服務(wù)啟動失敗：",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屬性

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商