关于vue中tamplate和DOM节点浅谈
前言:在开发前段页面使用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>
[/code]
template性质:
- 标签内容隐藏性,template自带标签内容隐藏的性质。
- 标签位置任意性,可以在head标签中,也可以在body标签中或者frameset标签中。
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/>"
[/code]
作为组件时需要先注册;不是组件,则设置成字符串
template:"<div><div/>"
[/code]
3.2.3 作为插槽使用
当我们直接应用组件时,因为vue无法直接进行渲染而导致组件失效
<child-component>想要输出的内容</child-component>
[/code]
如果要使用组件标签,我们就可以利用template标签,加上slot插槽属性,组成<template slot="插槽名"></template>
<child-component>
<template slot="插槽名">
想要输出的内容
</template>
</child-component
[/code]
转载于:https://www.cnblogs.com/HYMY-L/p/10771384.html
- 点赞
- 收藏
- 分享
- 文章举报
- 关于XML的DOM的节点操作
- 关于vue中性能优化在webpack中配置exexternals节点
- Vue的基础认知二---vue的双向绑定/vue获取DOM节点
- 利用vue.js插入dom节点的方法
- vue.js插入dom节点的方式
- JS中的DOM节点类型以及浅谈数据绑定和DOM回流
- 浅谈关于.vue文件中style的scoped属性
- 关于DOM和节点的问题(未完待续...)
- vue.js的插入dom节点方式
- 关于一个常被大家遗忘的方法解决频繁操作 dom节点引起页面回流
- 浅谈vue的iview列表table render函数设置DOM属性值的方法
- Vue基础1(vue目录结构,数据、属性绑定,循环(v-for)渲染数据,vue数据双向,vue事件,vue中ref获取dom元素节点)
- Vue中怎么动态的去插入DOM节点呢?
- 由莫名其妙的错误开始---浅谈jquery的dom节点创建
- vue中通过v-for循环遍历得到的值如何加到dom节点的属性中以及vue将多选框选中的值渲染到页面
- JavaScript中操作有些DOM时关于文本节点和元素节点的问题。
- 浅谈Vue.js 关于页面加载完成后执行一个方法的问题
- 关于jquery的each循环生成dom数组节点
- 关于DOM节点的小记
- 对vue项目(增加/进行)单元测试,所遇到的问题及解决方法。 dom节点为null等