首页 > TAG信息列表 > createElement

前端JS-Day19

动态创建元素： document.write：直接写入页面流，会导致页面重绘。 innerHTML和createElement相似，但执行效率不同。创建内容时若采取数组形式，innerHTML耗时优于createElement。      DOM重点核心：     DOM对于元素操作：创建、增、删、改、查、属性操作、事件操作。 创建：1.document

vue 调用 sohu开放接口获取IP基本信息

1.搜狐开发api接口地址：https://pv.sou.com/cityjson?ie=utf-8 2.在组件中拼接请求地址 创建element，作为组件 components: { 'remote-js':{ render(createElement) { return createElement('script', { attrs: { type: 'text/javascript', src:

JSDOM操作

div、p是元素节点，content是文本节点，title是属性节点 创建节点 createElement 创建新元素，接受一个参数，即要创建元素的标签名 let div = document.createElement('div') createTextNode 创建一个文本节点 let text = document.createTextNode("content"); createAttribute 创建属

Safari 浏览器下打印PDF, 打印预览显示为空白

重现代码 const iframe = document.createElement('iframe'); iframe.onload = () => { iframe.focus(); iframe.contentWindow.print(); } 解决方法 const iframe = document.createElement('iframe'); iframe.onload = () => { setTimeout(() =>

Vue是怎么渲染template内的标签内容的？

我们在使用Vue做项目时，都会用到脚手架，相应的我们会在template写标签内容。那么你知道为什么会在template写标签吗？这当中经过了怎样的处理呢？ <template> <div id="app"> <div id="nav"> </div> <router-view/> </div> </template> <style lang=

Vue----脚手架

render:h=>h(App)的写法是一步一步由以上精简过来的，render:()=>{},由于箭头函数的简写模式 + createElement是一个传入参数可以写一个简单的名字，于是就有官方的写法

Render函数的用法及理解

上代码 <!-- <template> <div class="container"> <h1>1</h1> </div> </template> --> <!-- 这里就不需要上面的 模板方式，直接通过render函数来生成组件 ---> <script> export default { data () { return { }

前端笔记添加节点时，同时给节点添加内容、属性，innertext和creatTextNode

新创建的元素节点createElement("p")肯定是空内容，这时innerText和createElement后appendChild的效果是一样的。 如果是添加文本节点，innerText是一次性修改，会将标签里所有内容修改，createTextNode可以逐条插入，避免整体的修改。   节点增删改查  createElement("p") appendChild("p

关于render函数

在看尚硅谷的Vue课程的时候，发现他们初始化的项目中main.js中存在一段与自己创建不太一样的代码 //视频中的 new Vue({ render: h => h(App) }).$mount('#app') //自己创建的 vue-cil 版本是2.9.6 new Vue({ el: '#app', router, components: { App }, template: '<App

Web Components系列（三） —— 创建 Custom Elements

前言 根据前面的介绍，我们知道根据是否继承基本 HTML 元素，可以将自定义元素分为两类“ Autonomous custom elements 自主定制元素 Customized built-in elements 自定义内置元素 由此产生了一个疑问：这两者在使用上到底有何区别？ 且让我通过本篇文章试着解释一下这个问题。 Autono

JS实现滚动加载

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <sty

针对小样本和小目标的数据增强方法-Mixup

最近在学习YOLOv4，想换一种数据增强方法来试一下，下方的代码是基于VOC格式的数据集 简单来说，Mixup就是将两张图片，以一种重合浮现（可以理解为一张图片衬于另一张图片上方）的方式，并且生成新的xml文件 两张图片在使用Mixup以前     两张图片在使用Mixup以后   import cv2 import o

YOLOV3 Label（.txt）文件转xml文件

from xml.dom.minidom import Document import os import cv2 def makexml(txtPath,xmlPath,picPath): #读取txt路径，xml保存路径，数据集图片所在路径 dict = {'0': "slit_l",#字典对类型进行转换 '1': "trans_l", &#

弹出层效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button>提示</button> </body> <script src="./js/utils

JavaScript基础学习 创建元素innerHTML和createElement

JavaScript基础学习 创建元素innerHTML和createElement <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devcie-width,initial-scale=1.0">

【无标题】

"use strict"; // Predefined keys for LS const CATEGORY_KEY = "currentCategoryIndex"; const ITEM_KEY = "currentItemIndex"; const WAREHOUSE_KEY = "warehouseData"; class ClothingItem { // TODO: Task 1 name = &q

JavaScript动态创建表格

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动态创建表格

react源码解析5.jsx&核心api

react源码解析5.jsx&核心api 视频讲解（高效学习）：点击学习 课程目录： 1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录结构和调试 5.jsx&核心api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程

博客园目录设置

博客园是没有自带目录功能的，要实现如下的目录功能，我们可以通过个性化定制的方式实现。 申请JS权限 博客园支持自定义 HTML、CSS、JS 文件，不过需要先向博客园申请 JS 权限。 【博客园】->【设置】->【博客设置】： 点击图中地方即可申请 JS 权限（由于这里已经申请通过了，所以展示的

Vue render函数使用

1.render函数作用？？？ 先附上传送门，官网render函数。 render 函数 跟 template 一样都是创建 html 模板的，但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复，这时候就可以用 render 函数。 2render函数使用 render 函数的参数（createElement） createElement 是 rend

vue-09可复用

vue-可复用 ** 过滤器 ** Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管 道”符号指示： <!-- 在双花括号中 --> {{ message | capit

博客园添加导航目录

本文转载自：https://blog.csdn.net/q913777031/article/details/113103404   可以实现 h1-h6 标签级别的目录。 目录展示在博客页面的右上角，效果如下图，也可以直接看 这篇文章 的效果：   安装步骤 1. 博客园申请 JS 权限 2. CSS部分（添加到博客园"设置"下面的"页面定制 CSS 代码"

2021SC@SDUSC amis代码分析(3)

2021SC@SDUSC 文章目录 概述年份视图`YearsView.js``YearView.tsx` 日期视图`TimeView.js` 概述 这周继续上周的分析 年份视图 YearsView.js 'use strict'; var React = require('react'), createClass = require('create-react-class') ; var DateTimePickerYears

为什么要使用JSX

通过 React.createElement 创建层级复杂的虚拟DOM，层级会变得非常复杂 <div> <h1>title</h1> <p>hello react.js</p> </div> React.createElement("div", null, React.createElement("h1", null, "title"),

【源码篇：总结与思考】虚拟节点与DOM Diff算法源码实现

前言 文章内容按照一位老师视频学习而来，我们一起来学习一下 dom diff 吧。 DOM Diff dom diff 其实就是对比两个虚拟节点，然后对比它们的差异。然后再对应真实 dom 上进行一个打补丁操作。我们的目的就是找到其中的差异，然后用最小的代价来操作 dom。因为操作 dom 相对而言比较耗