Preamble: We often see the template tag when we use vUE to develop early pages. Here is a rough description of my understanding and use of template in VUE.

1. Get to know VUE





2. Dom related knowledge

2.1 DOM in HTML

We know that all content in HTML is made up of nodes. When a web page is loaded, the browser creates a Document Object Model of the page. Through the DOM, you can access all HTML elements, along with their text and attributes, and modify, delete, and create new elements. All elements (nodes) in an HTML document form a document tree (node tree, DOM tree)

2.2 vdom

Compared with frequent manual manipulation of dom and performance problems, VDOM (Virtual-DOM) makes a layer of DOM mapping, which maps a series of operations that we need to directly perform DOM into VDOM. Some key information about the real DOM is defined on vDOM, which is implemented entirely using JS and has no connection to the host browser. In addition, thanks to the execution speed of JS, a series of complex DOM operations, such as creating nodes, deleting nodes and adding nodes, which originally need to be carried out in the real DOM, are all put into VDOM, so as to improve the efficiency and performance of dom directly operated by manipulating VDOM.

2.3 Relationship between VUE and VDOM

Throughout Vue’s application life cycle, vDOM is used every time a view needs to be updated.

3. template

3.1 Template in HTML5

In HTML5, templae is used to declare “template elements”.

<script type="text/template">// In contrast to this standard writing,<template>The element is intended to make THE HTML template HTML more standard and canonical.<template>
Copy the code

The template properties:

  1. Tag content hiding: Template has the ability to hide tag content.
  2. Tag placement is arbitrary, and can be in the head tag, the body tag, or the frameset tag.
  3. The full HTML fragment can be retrieved using template.innerHTML. Template. content returns a document fragment, understood as another docuent, that retrivers “pseudo-child elements.”

3.2 Template in vUE

3.2.1 Life Cycle


3.2.2 As a component or a string

template:"<four_component/>"
Copy the code

You need to register as a component; If it is not a component, set it to a string

template:"<div><div/>"
Copy the code

3.2.3 Used as slots

When we apply components directly, the components fail because VUE cannot render them directly

<child-component>What you want to output</child-component>
Copy the code

<template slot=” slot name “></template>

<child-component>
        <template slot="Slot name">What you want to output</template>
</child-component
Copy the code