weixin_44743508-CSDN博客

原创 vue中$nextClick的理解

vue中$nextClick的个人理解在项目中我们经常需要在vue声明周期的creat阶段对DOM进行操作，但是这时候页面的数据还未渲染。因此需要把DOM操作放到Vue.newxClick()之中。使用场景1、在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中2、数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。 getDetail()

2021-07-22 11:09:46 5203

原创表单提交 FormData.append()

表单提交 FormData.append()append()接口会添加新的值到FormData表单之中如果该键存在，则把该值新加到键中如果键不存在，则新增这个键该方法接受3个参数formData.append(name,value,filename)name在个是在服务端的value中包含的数据对应的表单名称value表单的值，可以是string或者是Blob类型（以后端接受的类型为准）filename() 【可选】传给服务器的一个名称，文件名会被放在 “Con

2021-07-20 17:03:06 5425

原创插槽的理解

匿名插槽/单个插槽/默认插槽单个插槽可以放在一个组件的任意位置，且没有name值。一个组件只能有一个匿名插槽。父组件:<template> <div class="father"> <h3>这里是父组件</h3> <child> <div class="tmpl"> <span>item1</span>

2021-07-20 17:02:40 147

原创 vue的数据监听watch

Vue.js中 watch 的用法假设有如下代码：<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p></div>new Vue({ el: '#root', data: { firstName: 'Dawei', lastName:

2021-07-20 17:01:54 133

原创元素定位position

元素定位positionposition属性用来对元素进行定位，其包含5个值staticrelativefixedabsolutestick1、static 默认定位stactic是position的默认值，当省略position的值的时候，浏览器就是用static定位。代码就是按照元素文档流的方式进行布局，不会产生堆叠realative/absolute/fixed都是相对于某个基准点定位，不同点就是基点的不同。2、relative 相对定位relative相对于自己的默认位置

2021-07-20 17:01:17 170

原创 webSocket通信协议

webSocket通信协议webSocket和传统的“轮询”有所不同，体现的最大特点就是，服务器可以主动向客户端发送请求，客户端也可以向服务器发送请求，实现真正的平等对话。其他特点包括建立在 TCP 协议之上，服务器端的实现比较容易。与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。数据格式比较轻量，性能开销小，通信高效。、可以发送文本，也可以发送二进制数据。没有同源限制，客户端可以与任意服务

2021-07-20 17:00:19 249

原创网页特效

网页特效的一些常用的标签offset & style如果只想要获取元素的大小位置，用offset；如果想要给元素更改值，则style更合适京东鼠标移动图片放大案例 var box = document.querySelector('#box'); box.addEventListener('mousemove',function(e){ var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offse

2021-03-17 16:36:51 125

原创 js之arguments详解

js之arguments详解argument是函数运行时的实参列表【区分大小写】实参个数如果多余形参个数，可以通过arguments来访问 function hello(a,b,c){ console.log(arguments); } hello(1,2,3,4)

2021-03-17 16:35:48 99

原创 JS之 Dom操作

js的Dom操作Dom操作获取元素doucment.getElementById()通过ID获取 <div id="time"> 2021-1-1 </div> <script type="text/javascript"> var timer = document.getElementById('time'); console.log(timer); //返回的是 <div id="time"> 2021-1-1 &l

2021-03-17 16:34:53 132

原创 js预解析

js的预解析1、我们js引擎运行分为两步：预处理代码执行（1）预解析时候，会把js代码里面的所有var 和function提升到当前作用域的最前面（2）代码执行按照代码书写的从上往下执行2、预解析分为变量预解析（变量提升）函数预解析（函数提升）（1）变量提升就是把所有的变量声明提升到当前作用域的最前面【只提升声明不提升赋值操作】console.log(num); //打印出来是undefinevar num = 10; //因为把

2021-03-17 16:34:03 38

原创 js简单、复杂数据类型

简单数据类型与复杂数据类型简单数据类型简单数据类型有5种，Number,String,Boolean,undefined,null简单数据类型存放在栈里面，里面直接开辟一个空间，存放的是值复杂数据类型复杂类型，又叫做引用类型，在存储对象是存储的仅仅是地址（引用），因此叫又引用类型复杂类型是通过new关键字创建的对象，如Object,Array,Date等复杂数据类型存放在堆里面，首先在栈里面存放地址（十六进制表示），地址在指向堆里面的实例，真正的对象实例存放在堆空间中函数的形

2021-03-17 16:33:33 87

原创 js的各种对象

js的对象random对象生成随机数可以使用random对象生成随机数function getRandom(min,max){ return Math.floor(Math.random()*(max-min+1))+min; }这个函数有两个入参【分别控制入参的最大值和最小值】Data对象data对象在使用之前必须先new一个构造函数出来当前时间必须实例化var now = new data();console.log(now);如果没有传参，则系统自动返回当前时间。

2021-03-17 16:33:00 77

原创 js的作用域

js的作用域解释就是代码名、或者变量，在某个范围内起作用和效果目的是提高程序可靠性和减少命名冲突。全局作用域就是在整个script标签下面，或者是单独一个js文件出来定义的变量。var num = 10;如果有两次声明，则最后一次声明的起效果在函数内没有声明，直接赋值的变量，也叫全局变量num2 = 100函数的形参也可以当作是局部变量//全局变量：要当浏览器关闭时候才会被销毁 =》占用内存资源//局部变量：当函数执行完毕就会被销毁。 =》节约内存资源js里面没有块级作用域块级

2021-03-17 16:31:03 144

原创 jsDom操作之节点操作

节点操作父节点 parentNode得到离元素最近的父级节点，如果找不到父节点则返回null <script type="text/javascript"> var par = document.querySelector('.par'); console.log(par); console.log(par.parentNode); </script>子节点childNodes 获得元素的所有子节点包括元素节点文本节点等等 &

2021-03-17 16:29:40 106

原创 DOM的重点核心

DOM的重点核心document object model 文档对象模型注册事件（绑定事件）传统注册事件有一个唯一性的特点。同一个注册事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数。事件监听事件 addEventListener()，1、里面的事件是字符串，必须加引号2、同一个元素同一个事件可以添加多个监听器 var divs = document.querySelectorAll('div'); divs[0].addEventListener(

2021-03-17 16:28:18 75

原创 javascript--BOM对象

BOM对象(浏览器对象模型)主要是应用浏览器窗口的交互对象窗口加载 window.onload = function(){}文档内容全部加载才会触发事件（包括文字图像脚本）注意：只能写一次，多个onload只以第一个为准同样可以用事件监听来代替window.addEventListener(‘load’,function(){}) 不限制个数定时器 setTimeout() setTimeval()停止定时器 clearTimeout(timeoutNa

2021-03-17 16:25:45 56

原创 node.js — 文件系统（File System）【学习笔记】

node.js — 文件系统（File System）基本概念学习fs木块的API使用fs模块前，需要引入cost fd=require(‘fs’);特点提供同步异步两种选择同步导致堵塞异步操作完成通过回调返回结果同步与异步同步写入-- fs.writeFileSync()let fs = require('fs')//同步打开文件let fd = fs.openSync('text1','w')//打印出标识idconsole.log(fd);//写入内容le

2021-02-21 14:49:59 186

原创如何在本地运行vue项目，然后打包扔到服务器？（前端向）

一、在本地运行一个vue项目1、前言vue慢慢成为了前端程序员最主流的框架之一，与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合，所以被越来越多人所接受。因此，当我们从github上爬取别人的vue项目之后如何在本地运行呢？那么进入正题。2、安装node.jsNode.js 是一个运行在服务端的框架，它的底层就使用了 V8 引擎，虽然作用与Java的servlet类似，都能开发动态网页。但是Node.js

2020-08-18 22:29:48 5024 1

原创 Flex伸缩盒子详解+实操——容器属性完结

Flex伸缩盒子详解+实操——容器属性完结justify-content属性属性详解：justify-content属性定义了块元素在主轴上排列的方式。justify-content属性定义了5种值：flex-start（默认值）：左对齐flex-end：右对齐center：居中space-between：两端对齐，项目之间的间隔都相等。space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。代码实操index.html<div c

2020-07-17 16:22:51 237

原创 Flex伸缩盒子的实操+详解——flex-wrap属性

Flex伸缩盒子的实操+详解——flex-wrap属性flex-wrap属性定义，如果项目在一条轴线上排不下的话，如何进行换行，或者选择不换行。flex-wrap属性定义了三种值，分别是：nowrap （默认值）如果排不下不进行换行wrap 进行换行，第一行在上面wrap-reverse 进行换行，第一行在下面代码实操首先定义12个高为300px的矩形index.html<body> <div class="box"> <div class="sq

2020-07-03 12:57:48 1511

原创 Flex伸缩盒子的实操+详解

Flex伸缩盒子的实操+详解Flex布局能够针对CSS重难以实现的的类似：垂直居中、线轴排序、交叉轴对齐等进行封装。我们就可以简便、完整、响应式地实现各种页面布局一、 flex-direction属性flex-direction属性决定主轴的方向（即项目的排列方向）。它含有四个值，分别是：row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右端。column：主轴为垂直方向，起点在上沿。column-reverse：主轴为垂直方向，起点在下沿。首

2020-06-22 20:41:13 317

weixin_44743508的博客