前言 开发项目中，使用到 Eruda 打印控制台信息显示 文档：https://github.com/liriliri/eruda 安装 Eruda npm install eruda --save 引入 import eruda from "eruda"; 常使用方法 显示 eruda.show(); 隐藏 eruda.hide(); 销毁 eruda.destroy(); 绑定 dom 未绑定的页面布局是这
<!DOCTYPE html> <html> <head> <style type="text/css"> #wrap div { float: left; } #wrap:after { content: ""; display
vue文件时怎样编译运行到浏览器的 http://www.manongjc.com/article/21832.html 通过vue-loader，解析.vue文件，在webpack解析，拆解vue组件 编译模板， 生成可复用的render function code， 这一步在vue实例的整个生命周期中只会执行一次甚至零次， 因为我们可以在打包的时候可以预编译
前缀为 data- 开头的属性是什么？ 自定义属性,用来给HTML标签添加额外数据信息（dom操作的思想） dataset可以获取到data-开头的所有属性 <div id="mydiv" data-message="Hello,world" data-num="123"></div>
Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术，不受父级style、v-show等属性影响，但data、prop数据依旧能够共用的技术；类似于 React 的 Portal。主要解决的问题 因为Teleport节点挂载在其他指定的DOM节点下，完全不受父级style样式影响。 场景：像 modal
nextTick vm.$nextTick()接收一个回调函数作为参数，它的作用是将回调延迟到下次DOM更新周期之后执行。在开发中会遇到一种场景：当更新了状态时，需要对新DOM做一些操作，但此时我们还获取不到更新后的DOM，因为视图还未重新渲染。将对新DOM的操作放在nextTick()的回调函数中，就可以实现
概述： DOM 全称（document object model）文档对象模型（文档指定为对应html文档），对应的DOM就是操作HTML文档的（增删改查） document 文档对象 方法 1.获取全局的内容 document.getElementById() //通过id属性来获取元素，返回的是一个元素 （Element） //通过id获取对应的元素 var box = document
DOM 概述： DOM 全称（document object model）文档对象模型（文档指定为对应html文档），对应的DOM就是操作HTML文档的（增删改查） DOM结构 document 文档对象 方法 1.获取全局的内容 document.getElementById() //通过id属性来获取元素，返回的是一个元素 （Element） //通过id获取对应的元素 v
一、与 MutationObserver Api的区别 MutationObserver 主要用来监听 DOM 元素的属性和节点变化的，非 DOM 样式尺寸，可查看之前一篇 blog - DOM规范 - MutationObserver接口观察DOM元素的属性和节点变化 ResizeObserver 主要用来监听 DOM 元素的 内容区域 的尺寸变化，可以监听到 E
项目场景：刷新数据，让滚动条保持在最底部 // jquery 实现滚动条在底部 this.$nextTick(() => { let dom = $(.el-table .el-table_body_wrapper) dom.animate({ scrollTop: dom.prop('scrollHeight') }) }) // js实现滚动条位置在最底部 document.getElementById('app').scrollTop =
代码输出结果 async function async1() { console.log("async1 start"); await async2(); console.log("async1 end"); } async function async2() { console.log("async2"); } async1(); console.log('start') 复制代码 输出结果如下： asyn
JS是事件驱动为核心的一门语言 1 事件三要素 事件源、事件、事件驱动程序 事件源：引发后续事件的html标签。 事件：js已经定义好了（见下图）。 事件驱动程序：对样式和html的操作。也就是DOM 代码书写步骤如下：（重要） （1）获取事件源：document.getElementById(“box”); （2）绑定事件： 事件源box.
DOM概念 概念:Document Object Model 文档对象模型 将标记语言文档的各个组成部分 封装为对象 可以使用这些对象 对标记语言文档进行CRUD的动态操作 W3C DOM 标准被分为 3 个不同的部分： 核心 DOM - 针对任何结构化文档的标准模型 Document:文档对象 Element:元素对象 Attribut
nextTick 官方定义：在下次DOM更新循环结束之后执行回调，在修改数据之后立即使用这个方法，获取更新后的DOM。 Vue在更新DOM时是异步执行的。当数据发生变化。Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，在统一进行更新。 举个栗子： HTML结构 <div id="app">
DOM 概述 DOM 全称（document object model）文档对象模型（文档指定为对应html文档） DOM结构 根对象document（文档对象） 元素对象Element （所有的标签元素都是元素） Attribute属性对象（所有标签里面的属性都是属性对象） Text文本对象 全局所有的文本都属于文本对象 docume
一、DOM概述 1.DOM文档对象模型（Document Object Model）将 web 页面与到脚本或编程语言连接起来。通常是指 JavaScript，但将 HTML、SVG 或 XML 文档建模为对象并不是 JavaScript 语言的一部分。DOM 模型用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点 (node)，每个节点都包
搭建本地开发环境 安装nodejs 按照 Create React App 安装指南创建一个新的项目 npx create-react-app react-three-demo 删除掉新项目中 src/ 文件夹下的所有文件。（不要删除整个 src 文件夹，删除里面的源文件。） 安装路由依赖包和threejs依赖包 # tips: 注意版本兼容问题
DOM简单学习 功能:控制html文档的内容 代码:获取页面标签（元素）对象Element document.getElementById("id值"):通过元素的id获取元素对象 操作Element对象： 1.修改属性值： 明确获取的对象是哪一个 查看API文档 找其中有哪些属性可以设置 HTML代码 <!DOCTYPE html> <html> <
什么是虚拟DOM 虚拟DOM是对真实DOM的抽象，它表现为一个JavaScript对象，该对象的属性存储了某个节点所包含的信息，如标签名、标签用到的HTML属性、子元素对象等，来描述一个DOM元素，存储在内存中。每次页面重新渲染时，会先使用VNode类去实例化不同类型的DOM节点，生成vnode实例，然后
函数 函数概述 函数就是具备某个功能的一个工具。是完成某个功能的一段代码。 系统提供了很多函数，但是并不能包含所有的功能，所以有些功能需要我们自己来写----自定义函数。函数定义好以后，就可以像系统函数一样使用了，不用再重复写了。所以经常写的代码，就写一个函数，需要的时候调一下
虚拟dom，是一个js对象，用他来描述节点，每次对象创建时，先创建虚拟dom，在创建真是dom，当对对象进行操作时，会穿件新的虚拟dom，通过新旧的虚拟dom进行diff算法对比。 虚拟dom为什么要设置key? 为了节点的复用，减少重排，便于跟踪每个节点的身份
DOM_Element对象 removeAttribute()：删除指定的属性 setAttribute()：添加新属性 <!--Element对象--> <a>点我试一下</a> <input type="button" value="给a标签设置属性" id="btn_set"> <input type="button" value=&
案例_自动跳转首页 倒计时读秒效果实现 1.定义一个方法，获取span标签，效果span标签体内容，时间- - 2.定义一个定时器，1秒执行一次该方法 在方法中如果时间<=0，则跳转到首页 <html lang="en"> <head> <meta charset="UTF-8"> <title>自动跳转</title> <style>
事件处理函数定义在setup()中，因为模板 ref 必须要在组件挂载之后才可以访问，而现在对于事件处理函数来说，span 这个变量的初始值是 null，所以 Vue 报错。 let span = ref(null)是官方文档获取节点的方式。起始值就是 null，且 ref 在组件挂载之后才可访问，因此，必须要在 onMounted 函数
