![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端笔记
我今年六岁
这个作者很懒,什么都没留下…
展开
-
随手记-记录一些技术点
promise generator是微任务。setTimeout是宏任务。微任务先于宏任务执行。原创 2023-02-08 12:07:16 · 115 阅读 · 0 评论 -
【学习之路】js数组中some和every以及map和filter以及reduce
some()该方法接收一个函数,迭代数组中的每个元素,直到返回truefunction fuc(num){return num>2}let arr = [1,2,3,4]arr.some(fuc) // true// arr.every((item)=>{// item-每个元素// todo// })例子中执行到3时,num>2满足,some返回true就不再向后执行了every()该方法接收一个函数,迭代数组中的每个元素,直到返回falsef原创 2022-02-21 17:38:14 · 265 阅读 · 0 评论 -
【学习之路】axios之axios.CancelToken
写法:接受一个回调函数作为参数new axios.CancelToken(cancel=>{ // cancel是取消本次请的方法 if(xxx) { cancel() }else { // TODO }})一般用法用于发出多个相同请求时,取消重复请求使用场景使用数组存放需要发送的请求,发请求前判断该请求数组中是否有当前请求,有的话该请求取消,没有的话,将请求添加进请求数组中,请求完成时释放请求...原创 2022-02-08 14:20:08 · 2859 阅读 · 2 评论 -
小程序中使用npm
在小程序根目录中初始化npm init注意 init时当前文件所在的文件夹名不能含有中文2. 安装 npm 包:npm install构建 npm勾选“使用 npm 模块”选项原创 2021-05-07 13:59:58 · 136 阅读 · 0 评论 -
从webpack开始创建一个新的react项目
创建一个react项目使用npm init -y 初始化一个package.json创建src文件夹(项目文件)和text文件夹(测试代码等)src中创建index.html以及index.js安装webpackcnpm i webpack webpack-cli -D创建webpack.config.js写入module.exports = { mode: "development", //可选的值为:`development` 和 `production`原创 2020-11-05 10:28:39 · 207 阅读 · 1 评论 -
创建一个angular项目、组件以及服务
创建项目ng new 项目名称在选项中选择y以及less创建组件ng g component component/newsng g 可查看可创建的类目component/news 为目录使用命令行创建,根模块会自动引入并且配置创建服务 ng g service services/storage在app.moudles.ts里面引入创建的服务并且声明 import { StorageService } from './services/storage.service';原创 2020-10-12 11:20:12 · 168 阅读 · 0 评论 -
数据下载成文件-js简易版
添加链接描述原创 2020-07-08 09:53:59 · 172 阅读 · 0 评论 -
css文本超出显示省略号一行以及多行
超出显示省略,一行,多行原创 2020-04-15 13:55:18 · 128 阅读 · 0 评论 -
pack.json 的^和~的区别
webpack 项目的package.json 的版本说明在版本说明前面还有个符号:’^’(插入符号)和’~’(波浪符号),他们之间的区别:例如:‘~’(波浪符号):他会更新到当前minor version(也就是中间的那位数字)中最新的版本。放到我们的例子中就是:“exif-js”: “~2.3.0”,这个库会去匹配更新到2.3.x的最新版本,如果出了一个新的版本为2.4.0,则不会自动...原创 2019-10-24 18:53:51 · 1627 阅读 · 0 评论 -
学习记录---git的使用
GIT基础版本管理 — 记录文件改变的方式,以便将来查阅特定版本的文件内容git诞生于Linux系统 git bash 可以使原本Linux的命令允许在Windows中,进而可以使用git在Windows中当使用git执行merge操作,会弹出一个新窗口 这个新窗口其实是linux中的文本编辑窗口,类似于Windows中的记事本。这个linux中的记事本叫vi可以使用 vi 文件名打...原创 2019-07-27 10:29:47 · 97 阅读 · 0 评论 -
vue组件开发之组件插槽
组件插槽作用父组件向子组件传递内容基本用法插槽位置 Vue.component('alert-box',{ template:` <div class="demo-alert-box"> <strong>Error!</strong> <slot></slot>...原创 2019-08-03 15:42:18 · 881 阅读 · 0 评论 -
vue组件开发之组件之间的数据交互
组件键数据交互父组件向子组件传值组件内部通过props接收传递过来的值Vue.component('menu-item',{props:['title',...],//里面的值都是从父组件中传递过来的template:'<div>{{title}}</div>' })父组件通过属性将值传递给子组件 <menu-item title='来自父组件的...原创 2019-08-03 15:34:08 · 746 阅读 · 0 评论 -
Vue组件开发的基本思想和使用
Vue组件开发、将不同的功能封装到不同的组件中,再将组件组个起来,实现完整的功能开发思想标准 分治 重用 组合组件化规范Web Components自定义组件存在的问题方式不容易多次使用组件可能会导致冲突Web Components 是通过创建封装好功能的定制元素解决上述问题 但是目前这个组件没有被浏览器广泛的支持,vue实现了上述规范的部分组件使用全局组件注册语法–...原创 2019-08-03 15:27:32 · 456 阅读 · 0 评论 -
vue基础语法之样式绑定
样式绑定class样式处理对象语法{类名:属性,…}属性一般是以is开头的 作为标志位 是布尔类型的<div v-bind:class='{ active:isActive ,...}'></div>数组语法通常适用于需要加多个类名的场景 或者是需要取消类样式<div v-bind:class='[activeClass, errorClass]'...原创 2019-07-30 09:33:51 · 120 阅读 · 0 评论 -
vue基础语法之属性绑定
属性绑定(要想在属性中使用值 必须在属性的前面加这个指令才行)v-bind指令用法<a v-bind:href='url'>跳转</a>缩写形式(:)<a :href='url'>跳转</a>代码示例<div id="app"><!-- 必须加v-bind,要不然后面的链接地址出不来 --><a ...原创 2019-07-30 09:29:27 · 383 阅读 · 0 评论 -
vue常用特性之表单操作
表单操作表单提交要禁用submit的默认提交行为 在submit的事件中this指向的是forminput 单行文本通过v-model进行双向绑定值textarea 多行文本通过v-model进行双向绑定值select 下拉单选和多选(添加multiple=‘true’)给select添加v-model value添加在option中radio 单选框通过v-model进行双...原创 2019-08-02 09:32:17 · 142 阅读 · 0 评论 -
vue基础语法之事件绑定
事件绑定处理事件v-on指令用法 <input type='button' v-on:click='num++'>v-on简写形式 <input type='button' @click='num++'>事件函数的调用方式直接绑定函数名称 <input type='button' v-on:click='say'>调用函数 ...原创 2019-07-29 09:19:20 · 253 阅读 · 0 评论 -
学习记录---04ajax---$.ajax()-serialize方法-todo案例-全局事件-NProgress-RESTful风格的API
$.ajax()方法beforeSend:function(){ // 在发送请求前的需要执行的代码 // 可以使用return false取消 请求发送}方法内部会自动将json字符串转换为json对象如果url的请求地址的协议域名端口号和当前文件的地址相同 可以只写路由地址data 可以传对象类型 也可以传地址栏的参数格式post方法时要将contentType转换为js...原创 2019-07-28 08:49:31 · 124 阅读 · 0 评论 -
vue基础语法之修饰符
修饰符事件修饰符在事件后面加.stop阻止冒泡 <a v-on:click.stop='handle'>跳转</a>也可以在函数中阻止事件冒泡 用事件对象中的 `stopPropagation`.prevent阻止默认行为 <a v-on:click.prevent='handle'>跳转</a>也可以在函数中阻...原创 2019-08-02 09:03:35 · 160 阅读 · 0 评论 -
vue基础语法之分支循环结构
分支循环结构分支结构v-ifv-elesv-eles-ifv-show false 隐藏 true显示v-if和v-show的区别`v-if`控制元素是否渲染到页面v-show控制元素是否显示(已经渲染了页面)v-if适用于操作不是很多的情况 隐藏就是把这个元素删除掉(removeChild)v-show 频繁操作 隐藏就是display:none循环结构循环结...原创 2019-08-02 09:12:06 · 393 阅读 · 0 评论 -
Vue常用特性之数组更新检测
常用特性应用场景过滤器 – 格式化日期 很多时候后台传输的日期是毫秒数 需要我们自己转化自定义指令 – 获取表单焦点计算属性 – 统计图书数量监听器 – 验证图书存在性生命周期 – 图书数据处理数组更新检测变异方法(会触发视图更新,因为原数组会发生改变)push()pop()shift()unshift()splice() 删除数组中指定的元素sort()...原创 2019-08-02 09:29:00 · 205 阅读 · 0 评论 -
vue常用特性之生命周期
生命周期主要阶段挂载(初始化相关属性)beforeCreatecreatedbeforeMountmounted页面渲染完成后调用这个钩子函数 在服务器端渲染期间不会被调用更新(元素或组件的变更操作)beforeUpdateupdated销毁(销毁相关属性)beforeDestorydestroyed销毁触发时需要一个特殊的方法 this.$destroy() 会...原创 2019-08-02 09:37:11 · 185 阅读 · 0 评论 -
vue常用特性之计算属性
计算属性{{msg.split('').reverse().join('')}} 这个值是可以使用原生的方法的,意思是将msg字符串分隔成数组,将数据反转后再拼接成字符串表达式的计算逻辑可能会比较复杂,使用计算属性可以使模板内容更加简洁计算属性的用法computed:{ reversedMessage:function(){ return this.msg.split('')...原创 2019-08-02 09:49:31 · 375 阅读 · 0 评论 -
vue常用特性之过滤器
过滤器格式化数据比如将字符串格式化为首字母大写,将日期格式化为指定的格式自定义过滤器 Vue.filter('过滤器名称',function(value){ //过滤器业务逻辑 })过滤器的使用 <div>{{msg|upper}}</div> <div>{{msg|upper|lower}}</div&g...原创 2019-08-02 09:52:52 · 136 阅读 · 0 评论 -
vue常用特性之侦听器
监听器监听数据,数据一旦发生变化就通知监听器所绑定的方法引用场景数据变化时执行异步(定时器、ajax)或者开销较大的操作语法规则 watch:{ firstName:function(val){ //val表示变化之后的值 this.fullName = val + this.lastName; }, ...原创 2019-08-02 10:08:02 · 390 阅读 · 0 评论 -
vue常用特性之自定义指令
自定义指令自定义指令的语法规则使用vue的directive这个api进行添加获取元素焦点Vue.directive('focus', { inserted: function(el) { //el表示指令所绑定的元素 //获取元素焦点 el.focus(); }})函数被称为指令钩子函数自定义指令的用法<input type="tex...原创 2019-08-02 10:11:59 · 582 阅读 · 0 评论 -
学习记录 -- api01--DOM 排他功能 一些事件
JavaScript分三个部分ECMAScripe标准:JS的基本语法DOM:Document Obeject Model----文档对象模型-----操作页面的元素BOM: Browser Object Model-------浏览器对象模型----操作的是浏览器==============================================================...原创 2019-06-22 09:48:42 · 141 阅读 · 0 评论 -
vue基础语法之指令以及 MVVM设计思想
指令指令的本质就是自定义属性 指令的格式 以v-开始比如v-cloakv-cloak指令的用法插值表达式存在的问题:“闪动” 会显示{{msg}}之后值再替换使用v-cloak解决先隐藏,替换好值之后再显示最终的值使用步骤提供样式[v-cloak]{display:none;}在插值表达式所在的标签中添加v-cloak指令数据绑定指令v-text填充存文本比...原创 2019-07-29 09:11:33 · 92 阅读 · 0 评论 -
学习记录---03nodejs---mongo数据库
回调地狱-promise-async-await-promisfy-数据库相关原创 2019-07-07 09:24:51 · 183 阅读 · 0 评论 -
学习记录---02nodejs
node02-package.json-查找规则-服务器端基础-请求参数-路由-静态资源-异步编程-同步API原创 2019-07-06 09:35:45 · 76 阅读 · 0 评论 -
学习记录---06api-顶级对象-offset系列-scroll系列-元素的滚动事件-浏览器卷曲的值-变速动画多个样式多个动画-旋转轮播图的原理-client系列
顶级对象BOM中的顶级对象:windowDOM中的顶级对象DocumentJQuery顶级对象:$ ----> JQuery元素的在style中的样式属性是无法直接通过:对象.style.属性来获取offset系列offsetLeft距离左边的位置(距离最近的具有定位的父级元素的距离 距离包括margin和padding和border 获取不了通过trans...原创 2019-06-24 15:16:41 · 153 阅读 · 0 评论 -
学习记录--05api--一次性定时器-克隆节点-offset通过document获取元素-图片跟着鼠标
一次性定时器window.setTimeout(函数,时间)–返回定时器的id只执行一次清除定时器—主要是清除一次性定时器在内存中占得空间clearTimeout(id名)如果样式的代码在style标签中那个设置,外面是获取不到的如果样式的代码在style属性中那个设置,外面是可以获取到的<标签名 style=“样式的代码”><标签名>offsetLef...原创 2019-06-24 14:34:44 · 120 阅读 · 0 评论 -
学习记录---04api---绑定事件的区别 解绑事件 绑定解绑事件的兼容代码 事件冒泡 事件阶段 绑定多个事件 键盘事件 BOM location history navigator 定时器
绑定事件的区别addEventListener();attachEvent();1.参数个数不同2.addEventListener(); 谷歌火狐IE11支持,IE8不支持attachEvent(); 谷歌火狐IE11不支持,IE8支持3.addEventListener();中的this是当前绑定事件的对象attachEvent();中的this是window为元素解绑事件...原创 2019-06-22 10:37:21 · 115 阅读 · 0 评论 -
学习记录---api03---获取元素节点 获取元素的兼容性代码 元素的相关操作 为元素绑定多个事件
节点:页面中的所有内容(标签,属性,文本(文字,换行,空格,回车)),node节点的属性:(可以使用标签–元素.出来,可以使用属性节点.出来,文本节点.出来)nodeType:节点类型,返回:1-------标签,2---------属性,3------文本nodeName:节点名字,返回:标签节点----大写的标签名字,属性节点-----小写的属性名字,文本节点-----#textnod...原创 2019-06-22 10:20:11 · 166 阅读 · 0 评论 -
学习笔记---api02---焦点事件 鼠标事件 获取元素 自定义属性
onmouseover 鼠标进入事件onmouseout 鼠标移除事件==================================================================获取元素document.getElementsById("node_small").getElementsByTagName("a") [0];//获取id名为node_smal...原创 2019-06-22 09:54:12 · 341 阅读 · 0 评论 -
学习记录--07api---在对象的方法中调用另一个对象-阻止浏览器的默认事件-阻止事件冒泡-鼠标移动时文字不被选中-元素隐藏的方式-本地存储
在对象的方法中调用另一个对象var obj = { sayhi:function() { console.log('1223'); this.eat(); //-------------->这里的this指的是obj对象 } eat:function() { console.log('33456'); }}...原创 2019-06-25 09:08:21 · 113 阅读 · 0 评论 -
学习记录-----JavaScript03笔记---String-Date-Array-基本包装类型
内置对象Date改实例用来处理日期和时间,从1970-01-01开始要使用必须创建实例对象var dt = new Date();console.log(dt);//字符串不传值—当前的时间—当前服务器的时间var dt = new Date("2017-08-12");----"2017/08/12"console.log(dt);//字符串传值就是传入值得时间var d...原创 2019-04-29 09:46:20 · 164 阅读 · 0 评论 -
学习记录---JavaScript02--对象 -创建对象-JSON-内置对象Math
函数:把一些重复的代码封装在一个地方,在需要的时候直接调用这个函数函数的作用:代码重用函数的参数:1.形参:函数定义的时候,函数名字后面的小括号里的变量2.实参:函数调用的时候,函数名字后面的小括号里的变量或者值返回值编程思想面向过程:凡是都要亲力亲为,每件事的具体过程都要知道,注重的过程面向对象:根据需求找对象,所有的事都用对象来做,注重的事结果面向对象特点:封装、...原创 2019-04-29 09:20:34 · 183 阅读 · 0 评论 -
学习记录-------JavaScript01
arguments 此对象可以获取传入的每个参数的值---------伪数组匿名函数命名函数========================================================命名函数------通过函数名调用匿名函数—不能直接调用通过函数表达式----》把一个函数给一个变量var 变量=匿名函数var f1 = function() {}如果是...原创 2019-04-17 23:16:24 · 136 阅读 · 0 评论 -
记录学习-----前端笔记03
CSS高级鼠标样式 cursor小白 default小手 pointer文本 text移动 move轮廓线例如input点击会有蓝色光圈outline : 1px solid #ccc;和border不冲突一般都不要轮廓线outline : 0(none);防止拖拽文本域防止文本域的大小改变页面布局resize: none;文本域可以改边框margin 0 au...原创 2019-03-29 14:11:31 · 254 阅读 · 0 评论