咬文嚼字vue系列(一)

1.基础知识

AMP，CMP，UMP的由来

AMD是RequireJS在推广过程中对模块定义的规范化产出，AMD是异步加载模块，推崇依赖前置。

CMD是SeaJS在推广过程中对模块定义的规范化产出，对于模块的依赖，CMD是延迟执行，推崇依赖就近。

UMD是AMD和CommonJS的一个糅合。AMD是浏览器优先，异步加载；CommonJS是服务器优先，同步加载。

dom模板与字符串模板

HTML模板(dom模板)：直接在HTML页面挂载的模板,就是原先写在页面上的，能被浏览器识别的HTML结构，会在一加载就被浏览器渲染，然后js获取dom节点的内容，形成dom模板。（即非字符串模板）
字符串模板：可能原先放在服务器上的，script标签或者js的字符串里，原先不参与页面渲染的一串字符。

Web Components

Web Components 是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的web应用中使用它们。Web Components旨在解决这些问题 — 它由三项主要技术组成（Custom elements（自定义元素）Shadow DOM（影子DOM）HTML templates（HTML模板）），它们可以一起使用来创建封装功能的定制元素，可以在你喜欢的任何地方重用，不必担心代码冲突。

Custom elements

它使开发者能够将HTML页面的功能封装为自定义元，其中生成的元素存在一些可操作性的生命周期:connectedCallback、disconnectedCallback、adoptedCallback、attributeChangedCallback等。

代码地址

Shadow DOM

Shadow DOM接口是关键所在，它可以将一个隐藏的、独立的DOM添加到一个元素上。

需要了解的 Shadow DOM相关技术：

Shadow host：一个常规 DOM节点，Shadow DOM会被添加到这个节点上。
Shadow tree：Shadow DOM内部的DOM树。
Shadow boundary：Shadow DOM结束的地方，也是常规 DOM开始的地方。
Shadow root: Shadow tree的根节点。

代码实现

HTML templates

此元素及其内容不会在DOM中呈现，但仍可使用JavaScript去引用它。

slot

槽，用于向HTML片段中插入一些文本。

代码实现

参考文献

1.https://www.cnblogs.com/humin/p/5389901.html

2.https://blog.csdn.net/weixin_34238642/article/details/88831810

3.https://developer.mozilla.org/zh-CN/docs/Web/Web_Components

咬文嚼字vue系列(一)相关推荐

咬文嚼字vue系列(二)
Object.freeze() Object.freeze()用于冻结对象,冻结后对象元素不能被删除,修改,添加新的元素,基本做到了唯一性,但如果冻结的元素中存在对象时,对象的元素并不会冻结,任然可以 ...
Vue系列vue-router的参数传递的两种方式（五）
Vue系列vue-router的参数传递的两种方式前言一.编写Profile页面二.编写App.vue入口三.路由配置,index.js 四.对比route.params方式传参五.项目中 ...
VUE系列-Vue中组件的应用(三)
大家好,我是前端岚枫,一枚二线城市的程序媛,上篇主要跟分享了<VUE系列-Vue核心应用(二)>,今天主要跟大家分享我整理的vue的组件相关的,主要包括组件声明.组件种类.组件间的几种 ...
Vue系列之搭建环境
准备坚持写一个vue系列专题,算是为自己搭建知识库...(为什么segmentfault不支持分类呢) 脚手架 npm install vue-cli -g // 进入项目 vue init webp ...
Vue系列（2）：Vue 安装
前言:关于页面上的知识点,如有侵权,请看这里 . 关键词:小白.Vue 安装.Vue目录结构.Vue 构建页面流程 ? 初学者安装 vue 用什么好大家都知道,学 Vue 最好还是去官网学,官网写 ...
vue系列：vue的常用属性和方法
vue系列:vue的常用属性vm.$ el.vm.$ data.vm.$ options.vm.$ refs和方法vm.$ mount().vm.$ nextTick().vm.$ set().vm. ...
【前端vue——系列6】vue连接摄像头并实现摄像头暂停，计时，截图到本地等功能
系列文章总结 [前端vue--系列1]vue的路由 [前端vue--系列2]vue中的data是函数而不是对象与computed的实现原理 [前端vue--系列3]vue框架的优缺点:vue实现双向绑 ...
Vue系列之分支结构v-if和v-show
文章の目录一.v-if 二.v-else-if 1.限制: 2.用法三.v-else 1.限制 2.不需要表达式四.v-show 写在最后一.v-if 根据v-if后面表达式的值的真假来有条件 ...
防Vue系列-09 deepProperty封装Object.defineProperty
Vue解析总纲上一节:防Vue系列-08 初步了解响应式原理Object.defineProperty 再次思考怎么将 obj 变成响应式 var obj = {title: "英雄联盟& ...

咬文嚼字vue系列(一)

咬文嚼字vue系列(一)相关推荐

最新文章

热门文章