vue 声明周期 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U
有时候，我们登录的时候会有多个选项，比如切换成手机号邮箱登录，但是当我们点击切换后，改变了样式，input里面的值却没有改变过来 <span v-if="active"> <label>手机号</label> <input type="" name="" id="name" /> </span> <span v-else>
首先vue.js官网比较ref和$refs的用法 ref 被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的 $refs 对象上。 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件； vue.js中文社区文档上的说明已经就比较通俗易懂了，其实我们可以这么理
概念理解 事件的定义：用户与浏览器产生的交互行为（点击、滚动鼠标、键盘操作... 事件句柄：选择监听特定事件并在这些事件发生后进行相应处理 事件流：对事件的处理流程 事件处理方式：给元素添加事件的方式，又称事件句柄、事件侦听器、事件处理程序 事件注册：事件绑定在某个元素上 绑
jquery的基础认知 1.获取元素,设置内容 $("div").text("你好"); //等同于js var divs=document.getElementsByTagName("div"); for(var i=0;i<divs.length;i++){ divs[i].textContent="你好"; } $=jQuery console.log($===jQuery); 3.支持连缀写
Vue中diff算法的理解 diff算法用来计算出Virtual DOM中改变的部分，然后针对该部分进行DOM操作，而不用重新渲染整个页面，渲染整个DOM结构的过程中开销是很大的，需要浏览器对DOM结构进行重绘与回流，而diff算法能够使得操作过程中只更新修改的那部分DOM结构而不更新整个DOM，这样能够最小化
jQuery的杰出的DOM操作能力相信已经深入每一个前端Coder，在使用Vue之前我并不能习惯数据驱动的概念，仍然幻想着把jQuery引入到Vue中，直到深入使用Vue以后才发现，原来许多jQ操作DOM的方法都不需要，数据驱动比手工操作DOM方便快捷许多。尽管如此，Vue仍然给了我们原生DOM控制的能力。 环
简述DOM的分类和节点间的关系 简述如何按层次关系访问节点 用什么方法获取节点的属性值？ style属性和className在改变样式上有什么区别？
DOM全称Document Object Model文档对象模型。JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲地操作web页面 Document（文档）- 整个的HTML网页文档 Object（对象）- 将网页中的每一个部分都转换为了一个对象 Model（模型）- 使用模型来表示对象之间的关系，这样方便我们获取
DOM:Document/Object/Model DOM是一棵树，树上有Node,分为Document（html）、Element（元素）、Text（文本）、Comment（注释）及其他 DOM最主要的功能是：通过 构造函数 把 节点 变成 对象，通过调用对象的 API 来操作对象 ------------------------------------------------------------
虚拟DOM： 概念：用JS对象的形式来模拟页面上DOM嵌套关系。（即虚拟DOM是以JS对象的形式存在的） 本质：用JS对象模拟DOM元素和嵌套关系。 目的：为了实现页面元素的高效更新。 Diff算法：
https://www.cnblogs.com/chengxuyuanaa/p/13347572.html 前言 大家好啊，我是wangly19，一名前端摸鱼小能手。最近忙着开源项目的东西，还有公司项目的迭代问题，导致更新文章的频率有点低了。也来聊聊我在干嘛吧。 第一个事情就是比较我的阉割版UI Design，要开始Vue3.0的开发工作，所以近
一、语言 1）慎用全局变量 当变量暴露在全局作用域中时，由于全局作用域比较复杂，因此查找会比较慢。 并且还有可能污染window对象，覆盖之前所赋的值，发生意想不到的错误。 0 == '' //true 0 == '0' //false 3）简写 简写的方式很多，此处只会列举其中的几种，例如用三目
7.25 面经。怕忘记记录一下比较常见的一些样式问题 1. margin外边距重叠问题：因为bfc的特性，同一个bfc容器的元素会发生，但是两个bfc容器不会 1. 能产生bfc - body 根元素 - 浮动元素：float 除 none 以外的值 - 绝对定位元素：position (a
示例 1 : 追加节点 通过appendChild追加节点。 追加节点一定是把新的节点插在最后面1. 创建新节点2. 获取父节点3. 通过appendChild追加 <div id="parentDiv"> <div id="d1">第一个div</div> <div id="d2">第二个div</div> <div id="d3">第三
示例 1 : 练习-删除行为前的提示 在进行删除操作前，都应该提示用户是否要删除 <script> function deleteRow(link){ var b = confirm("确定删除？") if(!b) return; var table = document.getElementById("heroTable"); var td = link.parentNode; var tr = td
示例 1 : 创建元素节点 通过createElement 创建一个新的元素节点接着把该元素节点，通过appendChild加入到另一个元素节点div1中 <html> <div id="d">Hello HTML DOM</div> <script> function add(){ var hr=document.createElement("hr"); var div1 = document.ge
示例 1 : 删除元素节点 要删除某个元素节点有两步第一：先获取该元素的父节点第二：通过父节点，调用removeChild 删除该节点 <script> function removeDiv(){ var parentDiv = document.getElementById("parentDiv"); var div2= document.getElementById("div2"); pa
示例 1 : 节点关系图 假设html代码如实例中，那么各个元素节点的关系如下:d1 d2 d3 的parentNode是parentDivparentDiv的firstNode是 d1parentDiv的lastNode是d3d2的previousSibling是d1d2的nextSibling是d3parentDiv的children是 d1 d2 d3 <div id="parentDiv">
示例 7 : 加载事件 当整个文档加载成功，或者一个图片加载成功，会触发加载事件当body元素或者img@加载的时候，会触发onload事件 <script> function loadBody(){ document.getElementById("message1").innerHTML="文档加载成功"; } function loadImg(){ document.getElement
DOM，全称Document Object Model，是一个平台和语言都中立的接口，可以使程序和脚本能够动态访问和更新文档的内容、结构以及样式。 在网站页面中有许多页面的元素，当页面到达浏览器时浏览器会为页面创建一个顶级的Document object文档对象，接着生成各个子文档对象，每个页面元素对应一个文
示例 4 : 点击事件 点击事件，由单击，双击按两个事件组成当在组件上单击的时候，会触发onclick事件当在组件上双击的时候，会触发ondblclick事件注1：在组件上，按下空格或则回车键也可以造成单击的效果，但是却不能造成双击的效果注2: 自定义函数不要使用click()，这是保留函数名。 <input
DOM的事件有很多，下表把工作中常用的事件列出来，并进行讲解 示例 1 : 焦点事件 焦点相关的事件，分别有获取焦点和失去焦点当组件获取焦点的时候，会触发onfocus事件当组件失去焦点的时候，会触发onblur事件 <input type="text" onfocus="f()" onblur="b()" id="input1" place
步骤 1 : 隐藏和显示 通过给元素的style.display 赋值，改变显示还是隐藏 <button onclick="hide()">隐藏div</button> <button onclick="show()">显示div</button> <br> <br> <div id="d"> 这是一个div </div&g
示例 1 : 节点名称 nodeName表示一个节点的名字如本例：document.nodeName 文档的节点名，是 固定的#documentdiv1.nodeName 元素的节点名，是对应的标签名 divdiv1.attributes[0].nodeName 属性的节点名，是对应的属性名 iddiv1.childNodes[0].nodeName 内容的节点名，是固定
