前言:在开发前段页面使用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用来声明"模板元素"。

  1. <script type="text/template">
  2. //相对这样的标准写法而言,<template>元素的出现旨在让HTML模板HTML变得更加标准与规范。
  3. <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 作为组件或者是字符串

  1. template:"<four_component/>"

作为组件时需要先注册;不是组件,则设置成字符串

  1. template:"<div><div/>"

3.2.3 作为插槽使用

当我们直接应用组件时,因为vue无法直接进行渲染而导致组件失效

  1. <child-component>想要输出的内容</child-component>

如果要使用组件标签,我们就可以利用template标签,加上slot插槽属性,组成<template slot="插槽名"></template>

  1. <child-component>
  2. <template slot="插槽名">
  3. 想要输出的内容
  4. </template>
  5. </child-component

关于vue中tamplate和DOM节点浅谈的更多相关文章

  1. vue中的虚拟DOM树

    什么是虚拟DOM树?(Virtual DOM)   虚拟DOM树其实就是一个普通的js对象,它是用来描述一段HTML片段的    01    当页面渲染的时候Vue会创建一颗虚拟DOM树 02    ...

  2. 详解Vue中的虚拟DOM

    摘要: 什么是虚拟DOM? 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 Vue.js 2.0引入Virtual DOM,比Vue.js 1.0的初始渲染速度提升了2-4倍,并 ...

  3. vue,在模块中动态添加dom节点,并监听

    在这里,onclick事件没有作用,因为它指向的是window,如果写为this.click页面显示为undefined, 我采用的是通过class绑定事件,但是会有一个问题,那就是当你渲染多个事件时 ...

  4. JavaScript DOM操作浅谈

    1.理解DOM: DOM(Document Object Model ,文档对象模型)一种独立于语言,用于操作xml,html文档的应用编程接口. 怎么说,我从两个角度理解: 对于JavaScript ...

  5. Web UI自动化测试中绕开验证码登陆方式浅谈

    web自动化测试中让测试者感到困惑的是登陆验证码,每次都不一样.现在推荐一种绕开验证码登陆的方式,其实就是将web浏览器获取的登陆cookie加载到程序中就可以了,这样程序就会认为你已经登陆,就可以跳 ...

  6. ava中Class.forName的作用浅谈

    转自:http://www.jb51.net/article/42648.htm Class.forName(xxx.xx.xx) 返回的是一个类 一.首先你要明白在java里面任何class都要装载 ...

  7. 怎样删除C/C++代码中的所有注释?浅谈状态机的编程思想

    K&R习题1-23中,要求“编写一个程序,删除C语言程序中所有的注释语句.要正确处理带引号的字符串与字符常量.在C语言中,注释不允许嵌套”. 如果不考虑字符常量和字符串常量,问题确实很简单.只 ...

  8. Http协议中Get和Post的浅谈

    起名困难户,每次写文章最愁的就是不知道该如何起个稍具内涵的名字,如果这篇文章我只是写写Get和Post的区别,我可以起个名字“Get和Post的那点事”,如果打算阐述一下Http协议原理性内容,那该叫 ...

  9. PHP中MVC的编程思想浅谈

    我相信这样的文章已经被写烂了,但是我今天还是愿意冒着风险把自己的经验与大家分享一下.纯属原创,我也没什么可保留,希望对新手有帮助,有说的什么不对的地方,欢迎大家伙吐槽. 什么是MVC? 简单的说就是将 ...

随机推荐

  1. 离线手动部署docker镜像仓库——harbor仓库(HTTPS)

    实验环境: harbor服务器系统:CentOS Linux release 7.5.1804 (Core)harbor服务器IP:10.1.12.114harbor版本:v1.5.0docker版本 ...

  2. Java中的static修饰int值做全局变量与static修饰词初始化顺序

    先看一道题 public class HasStatic{ private static int x=100; public static void main(String args[]){ HasS ...

  3. angular4中引入quill editor

    1. npm install --save-dev @types/quill  安装types 2.npm install ng2-quill-editor --save 安装quill 3.配置ts ...

  4. WPF 耗时操作时,加载loging 动画 (BackgroundWorker 使用方法)

    1.定义一个全局 BackgroundWorker private System.ComponentModel.BackgroundWorker bgMeet0; 2.设置执行耗时的任务为True b ...

  5. 2018-2019-2 20165205 Exp2 后门原理与实践

    20165205 Exp2 后门原理与实践 实验内容 一.基础问题回答 列举你能想到的一个后门进入到你系统中的可能方式 下载盗版软件.操作系统 当然正版软件里可能也有编写者安装的后门 不在官方更新软件 ...

  6. Idea spring 配置文件报红 URI is not registered

    把报错的加到如下忽略列表中

  7. Android APK反编译(二)

    参考:APK反编译 工具介绍 apktool 作用:资源文件获取,可以提取出图片文件和布局文件进行使用查看 dex2jar 作用:将apk反编译成java源码(classes.dex转化成jar文件) ...

  8. servlet的运行机制,转发和重定向

    一.当发送一个请求到服务器端的时候,容器(tomcat)会判断该路径属于哪一个servlet进行处理,servlet有一个抽象父类“httpservlet”,这个类是一个模板设计模式的类,其中serv ...

  9. Springboot中对Service层进行集成测试时注意点

    @SpringBootTest(classes = {DataSourceAutoConfiguration.class,MybatisAutoConfiguration.class,****Impl ...

  10. 执行makemigrations后错误集锦

    在项目配置xadmin后,执行python manage.py makemigrations后出现了很多问题: 1.ModuleNotFoundError: No module named 'futu ...