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 复制代码