- 博客(41)
- 收藏
- 关注
RSS订阅原创 浏览器渲染页面的步骤
渲染流程有四个主要步骤： 解析HTML生成DOM树- 渲染引擎首先解析HTML文档，生成DOM树 DOM树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。DOM树的根节点就是document对象。DOM树的生成过程中可能会被CSS和JS的加载执行阻塞，没有js的理想情况下，html与css会并行解析，分别生成DOM与CSSOM，然后合并成Render Tree，进入Render...
2021-10-21 23:02:33
268
原创 webpack基本操作
安装// 为防止全局安装webpack导致版本冲突，真实项目中以本地安装为主$ npm init -y$ npm install webpack webpack-cli --save-dev零配置使用* 默认会打包SRC目录中的JS文件（入口默认index.js）* 打包完成的目录默认是DIST/MAIN.JS* webpack默认支持CommonJS和ES6 Module的模块规范，依此进行依赖打包$ npx webpack自定义基础配置/* ...
2021-10-10 17:54:43
177
1
原创 Node.js(二) node的核心模块（fs，http，url，path）
1. fs 文件操作模：实现 读写文件 I/O input outputreadFile readdir mkdir rmdir unlink writeFile appendFile 都是异步的 引入fs模块，模块是node内置模块，不要另外安装，直接导入即可let fs = require('fs'); 读取文件 fs.readFile('文件路径','文件编码 一般为utf-8',回调函数(err,data)=>{})// re...
2021-09-30 21:08:45
270
原创 Node.js(一) 介绍node和跨域
1.什么是跨域？跨域 就是针对ajax请求的；对于一般的 img、或者script 脚本请求都不会有跨域的限制;只有前端有跨域的问题 ； 后端没有； 浏览器的同源策略： 一个域下的 js 脚本在未经允许的情况下，不能够访问另一个域的内容。这里的同源的指的是两个域的协议、域名、端口号必须相同，否则则不属于同一个域。同源策略是浏览器的安全机制； 协议 域名 端口号 三者只要有一个不一样 就是跨域解决跨域的方法：jsonp 请求 其实通过 sc...
2021-09-30 20:32:34
195
原创 Vue-router
<body> <div id="app"> <h1>{{name}}</h1> <router-link to="/homeqqq" tag='button'>首页</router-link> <router-link to="/listqqq">列表页</router-link> <keep-alive include='www'&.
2021-09-30 11:43:57
67
转载 axios的配置
const axios=require('axios'); //创建axios对象axios.defaults.baseURL='http://192.168.56.100:8888'; //vue请求后端地址axios.defaults.timeout=1000; //多久超时axios.defaults.withCredentials= true; //携带cookie需要添加/** * 设置请求传递数据的格式（看服务器要求的格式）.
2021-09-21 16:34:33
601
原创 Vuex （实现任意组件之间的数据交互）
<body> <div id="app"> <h1>{{name}}</h1> {{$store.state.color}} <bro1></bro1> <bro2></bro2> </div></body></html><template id='bro1'> <d.
2021-09-19 22:35:58
454
原创 vue自定义指令和动画transition
<body> <div id="app"> <h1 v-color123='col' v-permission='1'>{{name}}</h1> <div v-color123>{{name|money}}</div> <qqq></qqq> </div></body></html><scri...
2021-09-19 22:24:33
241
原创 vue一个关于v-model的面试题
题目要求：页面显示一个字符串以空格隔开例如‘天才 派大星’，下面设置两个input框，改变input的内容，前一个input框绑定字符串空格前的字符，后一个绑定空格后的字符图示：代码如下：<body> <div id="app"> <h1>{{name}}</h1> <!-- <input type="text" v-model='name'> --> ...
2021-09-19 22:21:36
701
原创 vue实现子组件和父组件之间的组件通信问题
拿案例来说明：要求：现要实现一个投票组件，点击支持，支持人数加一，总人数加1；点击反对，反对人数加一，总人数加一；支持率动态变化 支持率 = 支持人数/总人数<head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"> .
2021-09-16 23:37:09
505
原创 全面了解ES6
1.ES6介绍 参考⽂档：https://es6.ruanyifeng.com/ ES6是 JavaScript 语⾔的下⼀代标准，在 2015 年 6 ⽉正式发布。它的⽬标，是使得 JavaScript 语⾔可以⽤来编写复杂的⼤型应⽤程序，成为企业级开发语⾔。之前我们学的是 ES5，是在2011年发布的。ES6 既是⼀个历史名词，也是⼀个泛指，含义是 5.1 版以后的 JavaScript 的下⼀代标准，涵盖了 ES2015、ES2016、ES2017 等等，⽽ ES2015 则是正式...
2021-09-16 16:56:38
117
原创 vue的生命周期函数
上图：<body> <div id="app"> <h3 id="title">{{name}}</h3> </div> <!-- IMPORT JS --> <script src="node_modules/vue/dist/vue.min.js"></script> <script> let vm = new Vue({ el: '#app', ..
2021-09-15 23:15:03
163
1
原创 vue中的组件化开发（全局组件，局部组件，插槽）
组件是可复用的 Vue 实例，且带有一个名字。组件提高开发效率，实现敏捷性开发VUE中的组件分为两种：全局组件/私有组件全局组件：创建组件后直接在页面中调取使用即可私有组件：需要在页面渲染的时候(new Vue)基于components注册一下才能使用全局组件全局组件使用模板Vue.component([name],[options])：[name]是组件的名字： 命名规范遵循两种模式 ...
2021-09-15 23:08:58
373
原创 vue数据驱动原理（object.definePeoperty）和视图驱动原理（v-model）的实现
vue双向数据绑定的实现原理Vue 主要通过以下 4 个步骤来实现数据双向绑定的： 实现一个监听器 Observer：对数据对象进行遍历，包括子属性对象的属性，利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。 实现一个解析器 Compile：解析 Vue 模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更.
2021-09-15 21:52:47
422
原创 vue元素样式class和style的绑定
在项目中基于业务需求动态控制元素样式的时候，需要进行一些特殊的处理静态样式直接编写即可：<div class="box" style="margin: 20px auto;">使用v-bind：来设置行内样式在动态的STYLE中，基于对象方式处理 属性名：修改的样式 属性名使用驼峰命名法 fontSize zIndex ...属性值：设置的样式“值”<div class="static" v-bind:class="{ active: isAct...
2021-09-15 21:38:28
297
原创 vue的计算属性和侦听器（computed&&watch）
计算属性computed模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：<div id="example">{{ message.split('').reverse().join('') }}</div>所以，对于任何复杂逻辑，你都应当使用计算属性代码案例：<body> <div id="app"> <h1>{...
2021-09-15 11:19:30
121
原创 vue过滤器的使用
过滤器可以用在两个地方：双花括号插值（小胡子语法）和v-bind表达式<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 --><div v-bind:id="rawId | formatId"></div>案例使用：<body> <div id="app"> <h1>{{name}}</h1...
2021-09-15 10:55:03
74
原创 vue中的事件处理
vue可以用v-on指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码（或者指定一个封装函数）v-on:实现点击事件处理<div id="app"> <!-- `greet` 是在下面定义的方法名 greet方法也可以传递实参--> <button v-on:click="greet($event)">Greet</button></div>var vm = new Vue({ el: '#ap.
2021-09-15 10:13:13
163
原创 vue 数据更改能触发视图更改原理（Object.defineProperty（）方法）
数组变异方法简单来所，数组变异方法修改vue中数据可以使视图更新数组方法push ， pop ， unshift ，shift ，reverse ，splice ， sort 在vue中 称为数组的变异方法普通数组方法修改vue中的数据，并不会引起视图更新forEach ， map ， filter ， some ， every， find ， reduce ， includes ......
2021-09-14 09:16:36
694
原创 Vue常用指令
vue指令写在标签的行内样式上v-model = '变量' 数据双向绑定 相当于 把 这个变量跟这个表单元素绑定在一起了；变量改变 表单元素的内容跟着改变，内容改变 变量也会跟着更新 v-bind 数据单向绑定，用于动态改变标签内的属性 ，代替 v-bind:src='变量' 是专门用来处理行内属性（src class style ...）的指令 ，v-bi...
2021-09-14 09:08:36
65
原创 在JS中获取元素的具体的样式值
真实项目中，我们需要获取元素的某一个具体样式值元素.style.xxx：只能获取元素的行内样式值（我们必须把样式写在行内上才能获取到，写在样式表中的，我们获取不到）真实项目中，我们自己编写样式基本都不写在行内上只有基于JS设置元素的样式，才有可能设置在行内上 元素.style.xxx=xxxwindow.getComputedStyle&& curEle.currentStyle：获取元素的样式获取元素所有计算过的样式（回流阶段计算的样式信息就是“计算过的样式”）：不
2021-09-13 14:00:35
308
转载 js盒子模型
js中提供一些属性和方法用来描述盒子的样式的clientWidth/clientHeight当前盒子可视区域的宽度和高度 可视区域：内容的宽高+padding*2 clientHeight = height+padding(top&&bottom) clientWidth = height+padding(left&&right) 他们的值和内容是否溢出和是否设置了overflow:hidden没有关系clientTop和clientL...
2021-09-13 13:42:46
327
原创 正则表达式
1.介绍regular expression：RegExp用来处理字符串的规则 只能处理字符串 它是一个规则：可以验证字符串是否符合某个规则（test），也可以把字符串中符合规则的内容捕获到（exec / match…） let str = "good good study , day day up！";let reg = /\d+/;reg.test(str); //=>falsestr = "2019-08-12";reg.exec(str); //=>
2021-09-11 22:38:37
774
原创 css的常用知识点
一.div的居中问题 1.水平居中 1.1给 div 设置一个宽度，然后添加 margin:0 auto 属性 div { width: 200px; margin: 0 auto;} 1.2利用 text-align:center 实现.container { background: rgba(0, 0, 0, 0.5); text-align: cent...
2021-09-07 20:01:58
80
原创 剑指offer 基础算法练习(四)
1.数组中只出现一次的两个数字题目：思路：第一种：indexOf()和lastIndexOf(),只要两个相等，就是只出现一次的数。第二种：使用obj记录下每个数的次数，占空间function FindNumsAppearOnce( array ) { // write code here let len = array.length let obj = {} for(let i = 0; i<len; i++) { if..
2021-09-07 12:17:43
68
原创 JS中日期对象的方法(date)
var date = new Date();console.log(date.getFullYear()); //返回2020,2020年console.log(date.getMonth()); //月 0-11 console.log(date.getDate()); //返回日 1-31console.log(date.getHours()); //返回小时0-23console.log(date.getMinutes()); //分钟0-59console.log(date...
2021-09-07 11:24:45
109
原创 JS中数学对象的方法(Math)
console.log(Math.min(2,4,6,2,1,7));//其中最小的那个数console.log(Math.max(2,4,6,2,1,7));//其中最大的那个数varnum=10.41;console.log(Math.ceil(num));//向上取舍11console.log(Math.floor(num));//向下取舍10console.log(Math.round(num));//四舍五入10console.log(parseInt(num));//10c...
2021-09-07 11:24:02
145
原创 JS中字符串对象的方法(String)
varstr='xiaomiang';console.log(str.length);//获取字符串的长度console.log(str.charAt(2));//返回给定位置的那个字符console.log(str.charCodeAt(2));//返回给定位置的那个字符编码console.log(str.indexOf('a'));//返回给定字符的位置console.log(str.lastIndexOf('a'));//返回给定字符的位置（反向查找）console.log(st...
2021-09-07 11:23:15
116
原创 JavaScript类型转换
1.javascript的数据类型 1.1基本数据类型 number，string，boolean，null，undefined,symbol(ES6新增) 1.2引用数据类型 Object，Array，Function，String, Number等等2.JavaScript 的装箱与拆箱所谓装箱，就是把基本数据类型转换为对应的引用类型的过程。而拆箱与装箱相反，即把引用类型转换为基本的数据类...
2021-09-07 11:16:58
54
原创 valueOf 和 toString方法
valueOf为对象的原始值，通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。如果重写了valueOf和toString方法，在涉及到运算时，会优先调用valueOf方法，涉及到显示时，会优先调用toSting方法如果只重写了valueOf()或者toString()方法，则调用该方法，并将返回值用Number()转换。如果两个方法都重写了，则调用valueOf()，并将返回值用Number()转换。varobj={num:1,toStrin...
2021-09-07 09:40:36
129
原创 二分查找边界问题
二分查找细节详解1.数字在升序数组中出现的次数题目：function GetNumberOfK(data, k){ // write code here var left = 0, right = 0 // 寻找上界 var low = 0, high = data.length -1 while (low <= high) { var mid = low + Math.flo..
2021-09-05 15:41:05
160
原创 动态规划算法
原文：告别动态规划，连刷 40 道题，我总结了这些套路，看不懂你打我（万字长文）1.最长回文字符串思路：补充：es6建立二维数组方法创建长度为len的二维数组，并填写初值为trueconst dp = new Array(len).fill(0).map(i=>new Array(len).fill(true)); 语法解析： Array(len)自然就是定义10个元素的数组 fill()方法将一个数组的所有元素...
2021-09-01 17:47:56
131
原创 剑指offer 基础算法练习(三)
function MoreThanHalfNum_Solution(numbers){ // write code here var obj = {} var num = 1,result for(var i = 0; i < numbers.length; i++) { var temp = numbers[i] if(!obj[temp]) { obj[temp] = num }else {.
2021-08-29 14:07:42
106
原创 熟练使用linux操作系统
【熟练使用linux操作系统】- 部署（命令 scp ssh）> vi hello.js> node hello.js1. 准备工作阿里云（ubuntu16.04）iprootroot密码2. linux1.windows pc操作系统（使用便捷）2.unix 收费3.linux 命令行 【 图形化界面（ubuntu desktop）】，...
2021-08-23 15:41:53
512
原创 css3基础
层叠样式表（link）1) 在html中应用css嵌入到html的头部的style标签内css嵌入到元素style属性内css规则与html结构分离（解耦）css规则可以复用css单独写入到.css文件，通过link引入到html2) 语法注释： /* 注释内容 */语法：选择器 {样式规则}.box {background-color:lightcoral;color: #fff;width: 300px;margin-bottom: 1
2021-08-22 10:31:53
119
原创 html5
前端三要素：js 动画（能说会道 会交流）css 美化（妆容）html 结构（身材）其他技术：jquery echarts (dom)vue/react/angular (html/css/js)脚手架（http://localhost:3000）sass/less （css）移动互联方向大前端（移动端）1. html5超文本标记语言...
2021-08-19 10:58:10
193
转载 剑指offer 基础算法练习(一)
1.二维数组查找问题思路：使用循环，从数组的边角开始查找（例左下角），进行判断。// 在一个二维数组中，每一行都按照从左到右递增的顺序排序，每一列都按照从上到下递增的顺序排序。// 请完成一个函数，输入这样的一个二维数组和一个整数，判断数组中是否含有该整数。 var array = [[0,1,2],[3,4,5],[6,7,8]] function Find (target,array) { var i = 0, j = 0; .
2021-08-16 11:00:02
148
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人