dom節點和vue中template淺談

前言：在開發前段頁面使用vue時，咱們能常常看到template標籤。這裏粗略講下本身對vue中template理解和使用。

1. 先了解vue

vue.js是一個輕巧、高性能、殼組件畫的MVVM庫。
Vue的兩大特徵：響應式編程、組件化
vue的優點：輕量級框架、簡單易學、雙向數據綁定、組件化、視圖、數據和結構分離、虛擬DOM、運行速度快

2. dom相關知識

2.1 html中的dom

咱們知道HTML中全部的內容都是節點組成的。
當網頁被加載時，瀏覽器會建立頁面的文檔對象模型（Document Object Model）。
經過DOM，能夠訪問全部的HTML元素，連同它們的文本和屬性，能夠進行修改、刪除以及建立新的元素。
HTML文檔中的全部元素（節點）組成了一個文檔樹（節點樹、DOM樹）

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 生命週期

根據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 複製代碼