dom節點和vue中template淺談

寒翼綿羊發表於2019-04-26
Vue

前言：在開發前段頁面使用vue時，我們能經常看到template標籤。這裡粗略講下自己對vue中template理解和使用。

1. 先了解vue

dom節點和vue中template淺談
vue.js是一個輕巧、高效能、殼元件畫的MVVM庫。
Vue的兩大特徵：響應式程式設計、元件化
vue的優勢：輕量級框架、簡單易學、雙向資料繫結、元件化、檢視、資料和結構分離、虛擬DOM、執行速度快

2. dom相關知識

2.1 html中的dom

我們知道HTML中所有的內容都是節點組成的。
當網頁被載入時，瀏覽器會建立頁面的文件物件模型（Document Object Model）。
通過DOM，可以訪問所有的HTML元素，連同它們的文字和屬性，可以進行修改、刪除以及建立新的元素。
HTML文件中的所有元素（節點）組成了一個文件樹（節點樹、DOM樹）

dom節點和vue中template淺談

2.2 vdom

相比頻繁的手動去操作dom而帶來的效能問題，vdom(virtual-dom)很好的將dom做了一層對映關係，將我們本需要直接進行dom的一系列操作對映到了vdom中。
在vdom上定義了關於真實dom的一些關鍵資訊，而vdom完全使用js去實現的，和宿主瀏覽器沒有任何聯絡。
此外得益於js的執行速度，將原本需要在真實dom進行的建立節點,刪除節點,新增節點等一系列複雜的dom操作全部放到vdom中進行，這樣就通過操作vdom來提高直接操作的dom的效率和效能。

2.3 vue和vdom的關係

在Vue的整個應用生命週期當中，每次需要更新檢視的時候便會使用vdom。

3. template

3.1 HTML5中的template

在HTML5中，templae用來宣告"模板元素"。

<script type="text/template">
//相對這樣的標準寫法而言，<template>元素的出現旨在讓HTML模板HTML變得更加標準與規範。
<template>
複製程式碼

template性質：

  1. 標籤內容隱藏性，template自帶標籤內容隱藏的性質。
  2. 標籤位置任意性，可以在head標籤中，也可以在body標籤中或者frameset標籤中。
  3. childNodes無效性,可以使用template.innerHTML獲取完整的HTML片段；template.content會返回一個文件片段，可理解為另外一個docuent，獲取“偽子元素”。

3.2 vue中的template

3.2.1 生命週期

dom節點和vue中template淺談
根據vue生命週期中所表示的，找到el中有template配置項，則會用template配置項的自定義元件去替換html中的el。
但是這個template不是<template/>自帶標籤。template配置項專門用來替換el的。值可以是"<div></div>",也可以是全域性或區域性元件。

3.2.2 作為元件或者是字串

template:"<four_component/>"
複製程式碼

作為元件時需要先註冊；不是元件，則設定成字串

template:"<div><div/>"
複製程式碼

3.2.3 作為插槽使用

當我們直接應用元件時，因為vue無法直接進行渲染而導致元件失效

<child-component>想要輸出的內容</child-component>
複製程式碼

如果要使用元件標籤，我們就可以利用template標籤，加上slot插槽屬性，組成<template slot="插槽名"></template>

<child-component>
        <template slot="插槽名">
            想要輸出的內容
        </template>
</child-component
複製程式碼

相關文章