前端
深蓝冰河
这个作者很懒,什么都没留下…
展开
-
flex布局
一、Flex 布局是什么?http://www.ruanyifeng.com/blog/2015/07/flex-grammar.htmlFlex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex;}行内元素也可以使用 Flex 布局。.box{ display: inline-flex;}Webkit 内核的浏览器,必须加上-webkit前缀。.原创 2022-03-09 11:43:34 · 141 阅读 · 0 评论 -
vue,的M、V、VM分别代表什么
M、V、VM分别代表什么?M: model,数据部分,即dataV: view,视图,即html部分vm: viewmodel,vue实例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t.原创 2022-03-05 10:27:53 · 4693 阅读 · 0 评论 -
puppeteer自动化及爬虫:连接现有谷歌浏览器、新建窗口
1)安装puppeteer官方文档:https://zhaoqize.github.io/puppeteer-api-zh_CN/#/知乎教程:https://zhuanlan.zhihu.com/p/66296309# 1.仅安装核心,然后用chrome运行,不下载Chromium 【建议方式】cnpm i puppeteer-core# or "yarn add puppeteer-core"# 2.下载完整版本,含chromium,速度慢npm i puppeteer# or "ya原创 2021-05-02 08:49:40 · 1466 阅读 · 1 评论 -
js循环中的暂停:可用于for循环中
第一种写法: 异步实现,可用于for循环感谢 https://blog.csdn.net/qq_38251691/article/details/103303581使用async 将异步方法变为同步方法执行,只有返回 resolve才会触发 await向下执行。可以实现for循环的暂停const sleep = (timeout= 1000)=>new Promise((resolve, reject)=>{ setTimeout(resolve, timeout);});//原创 2021-04-18 12:05:32 · 4458 阅读 · 0 评论 -
快速删除node_modules文件夹
前言当安装了较多模块后,node_modules目录下的文件会很多,直接删除整个目录会很慢,下面介绍些快速删除node_modules目录的方法。方法一:使用rimraf模块的命令在全局安装rimraf模块,然后通过其命令来快速删除node_modules目录:npm install rimraf -grimraf node_modules方法二:使用命令来删除目录Windows下使用rmdir命令首先在cmd窗口中进入到node_modules文件夹所在的路径,接着执行命令:rmdir原创 2021-03-12 11:07:00 · 916 阅读 · 0 评论 -
跨域问题及解决方案:jsonp解决跨域、ajax解决跨域、vue的跨域解决方案
一.什么是跨域跨域问题的出现是因为浏览器的同源策略问题,所谓同源:就是两个页面具有相同的协议(protocol),主机(host)和端口号(port),它是浏览器最核心也是最基本的功能,如果没有同源策略我们的浏览器将会十分的不安全,随时都可能受到攻击。当我们请求一个接口的时候,出现如:Access-Control-Allow-Origin 字眼的时候说明请求跨域了二.如何解决跨域问题1.使用jsonp实现:网页通过script标签向服务器请求json数据,服务器受到请求后,将数据放在一个指定名字原创 2021-03-11 22:46:06 · 421 阅读 · 0 评论 -
vue基础一:计算属性computed基础用法实现单向数据关联、监视器实现单向数据关联、计算属性的get,set用法实现数据双向关联、回调函数三要素及何时用怎样用
https://www.bilibili.com/video/BV1hb411K7Ud?p=61.计算属性computed基础用法:实现单向绑定<div id='app'> 姓<input placeholder="First Name" v-model='firstName'><br/> 名<input placeholder="Last Name" v-model='lastName'><br/> <!-- 1.计算属性的原创 2021-03-10 16:13:44 · 222 阅读 · 0 评论 -
vue管理后台实战一:图形化创建,管理,运行项目、安装element、axios、less
1)图形化初始界面vue ui2)创建–create新项目填写项目名、git 初始记录下一步3)预设:选择手动,功能里打开如下5个:choose vue versionbabel (必须)router (路由)Lint / Formatter(格式校验)使用配置文件(babelrc-将插件的配置保存在各自的配置文件 (比如 ‘.babelrc’) 中)4)配置项如下:Eslint standard config(标准配置)Lint and save:每次保存时检查代码格式5原创 2021-02-01 17:29:52 · 235 阅读 · 0 评论 -
Object.keys, defineProperty()
1.Object.keys(obj)2.Object.defineProperty(obj,key,{configur})<script> // Object.defineProperty() 定义新属性或修改原有的属性 var obj = { id: 1, pname: '小米', price: 1999 }; // 1. 以前的对象添加和修改属性的方式原创 2021-01-08 16:43:40 · 109 阅读 · 0 评论 -
js高级:forEach()循环商品数组内的对象写入表格、filter()过滤返回价格区间内的商品、some()返回一条查询的数组内商品名
1.<!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-UA-Compatible" content="ie=edge"> <title&g原创 2021-01-07 15:56:26 · 283 阅读 · 0 评论 -
js产品详情:鼠标经过放大镜效果
1.detail.html<script src="js/detail.js"></script><!-- 预览区域 --> <div class="preview_wrap fl"> <div class="preview_img"> <img src="upload/s3.png" alt="">原创 2021-01-06 15:29:13 · 510 阅读 · 0 评论 -
js offsetTop,left实战:拖动时的模态框:鼠标拖动自写弹窗位移
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .login-header { width: 100%; text-align: center; height: 30px;原创 2021-01-05 20:22:50 · 143 阅读 · 0 评论 -
jsDOM:节点操作:增、删、改、查、属性操作
七、节点操作一般地,节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)这三个基本属性。元素节点 nodeType 为 1属性节点 nodeType 为 2文本节点 nodeType 为 3 (文本节点包含文字、空格、换行等)我们在实际开发中,节点操作主要操作的是元素节点1.父级节点node.parentNodeparentNode 属性可返回某节点的父节点,注意是最近的一个父节点如果指定的节点没有父节点则返回 null2.子节点原创 2021-01-03 17:53:16 · 891 阅读 · 0 评论 -
设置自定义属性:setAttribute、获取自定义属性两种方法:getAttribute(‘data-index‘),div.dataset[‘index‘] / div.dataset.index
<div getTime="20" data-index="2" data-list-name="andy"></div> <script> var div = document.querySelector('div'); // console.log(div.getTime); console.log(div.getAttribute('getTime')); div.setAttribut...原创 2021-01-01 12:11:06 · 1546 阅读 · 0 评论 -
tab标签点击切换不同内容js2种实现方式:利用隐藏条件tabs[i] items[i] 一 一对应顺序相同实现、利用setAttribute/getAttribute实现
1)优化实现:利用隐藏条件实现js代码:tab优化版:找到所有标签:tabs找到所有内容:items点击当前标签tabs[i]时:3.1 先把所有tabs样式类为置空,再把当前tab样式类名置为current即:所有tabs[i].style.className=’’,再把当前tabs[i].className=‘current’,3.2 同时:找到对应itemsi:置item[i].style.display=‘block’,其它置none// 先 找到所有标签元素va.原创 2021-01-01 12:04:01 · 662 阅读 · 3 评论 -
js的DOM:获取元素属性,修改元素属性实例:排它按钮、自动换背景色、鼠标经过表格行变色、多选框的全选/反选 等
一、获取元素属性,修改元素属性实例1)排它思想:一组按钮,点一个,把其颜色设置成粉色,其它按钮设置无色<button>按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><button>按钮5</button><script> // 1. 获取所有按钮元素原创 2020-12-30 21:01:57 · 466 阅读 · 0 评论 -
js的DOM:获取元素4方法,事件三要素,修改元素内容,修改元素属性,修改元素样式
一、获取元素1)document.getElementById()<div id="time">2019-9-9</div><script>// 1. 因为我们文档页面从上往下加载,所以先得有标签 所以我们script写到标签的下面// 2. get 获得 element 元素 by 通过 驼峰命名法 // 3. 参数 id是大小写敏感的字符串// 4. 返回的是一个元素对象var timer = document.getElementById('time原创 2020-12-30 18:31:48 · 1090 阅读 · 0 评论 -
数据类型分类:基本类型(简单类型),值类型、复杂类型(引用类型):object、空类型:undefined,null
一、原始数据类型: number,string,boolean,undefined, null,object1)基本类型(简单类型),值类型: number,string,boolean1.值类型的值在哪一块空间中存储? 栈中存储2.值类型之间传递,传递的是值3. 值类型作为函数的参数,传递的是值2)复杂类型(引用类型):object引用类型之间传递,传递的是地址(引用)引用类型作为函数的参数,传递的是地址引用类型的值在哪一块空间中存储?对象在堆上存储,地址在栈上存储var原创 2020-12-28 20:53:56 · 659 阅读 · 0 评论 -
js内置对象:String 基本包装类型、
一、基本包装类型// 基本包装类型var str = 'andy';console.log(str.length);// 对象 才有 属性和方法 复杂数据类型才有 属性和方法 // 简单数据类型为什么会有length 属性呢? // 基本包装类型: 就是把简单数据类型 包装成为了 复杂数据类型 // (1) 把简单数据类型包装为复杂数据类型 var temp = new String('andy');// (2) 把临时变量的值 给 strstr = temp;// (3) 销毁原创 2020-12-28 16:40:58 · 147 阅读 · 0 评论 -
js内置对象:数组对象Array
创建数组2种方法var arr1=[] //[]var arr2=new Array() //[]var arr3=new Array(2) //[ <2 empty items> ]console.log(arr1,arr2,arr3) var arr4=new Array(2,3) //[2,3]console.log(arr4)2.检测是否为数组2种方法var arr=[2,3]//1.传统方法console.log(arr instanceof Array原创 2020-12-27 15:03:08 · 182 阅读 · 0 评论 -
js内置对象Date:时间对象是构造函数所以要new、格式化年月日 星期、获取时间戳3种方式、倒计时
时间对象是构造函数所以要newvar date=new Date()console.log(date) //2020-12-26T12:45:34.823Zvar date1=new Date(2020,12,26) //2021-01-25T16:00:00.000Zvar date2=new Date('2020-12-26 20:20:22') //2020-12-26T12:20:22.000Zconsole.log(date1)console.log(date2)格式化年月日原创 2020-12-26 22:01:29 · 484 阅读 · 0 评论 -
js内置对象:Math常用方法、取两数间随机整数函数、随机点名、猜数字
一、Math查内置对象使用方法mdn:https://developer.mozilla.org/zh-CN1)max/min PI ceil floor round random随机取两数之间整数 随机点名console.log(Math.max(1,3,4,5,6))console.log(Math.min(1,3,4,5,6))console.log(Math.PI)console.log(Math.ceil(1.33)) //向上取整console.log(Math.floor(1.原创 2020-12-26 17:38:26 · 379 阅读 · 0 评论 -
js对象:变量、属性、函数、方法的区别 利用 new Object 创建对象;为什么需要使用构造函数;利用构造函数创建对象;构造函数和对象;new关键字执行过程;遍历对象
一、1)变量、属性、函数、方法的区别变量和属性的相同点 他们都是用来存储数据的// 变量 单独声明并赋值 使用的时候直接写变量名 单独存在// 属性 在对象里面的不需要声明的 使用的时候必须是 对象.属性函数和方法的相同点 都是实现某种功能 做某件事// 函数是单独声明 并且调用的 函数名() 单独存在的// 方法 在对象里面 调用的时候 对象.方法()var num = 10;var obj = { age: 18, fn: function() {}}原创 2020-12-26 16:01:44 · 458 阅读 · 0 评论 -
js作用域、预解析
一、全局作用域、局部作用域1)全局/局部 作用域JavaScript作用域 : 就是代码名字(变量)在某个范围内起作用和效果目的是为了提高程序的可靠性更重要的是减少命名冲突js的作用域(es6)之前 : 全局作用域 局部作用域全局作用域: 整个script标签 或者是一个单独的js文件局部作用域(函数作用域) 在函数内部就是局部作用域 这个代码的名字只在函数内部起效果和作用 var num = 10; var num = 30; con原创 2020-12-26 15:33:47 · 84 阅读 · 0 评论 -
js for循环相关:打印多行多列、打印正三角形、打印倒三角形、打印乘法表、i--的写法
输出多行多列// 输出5行5列的星星var str=''for(let i=1; i<=5; i++){//行数 for(let j=1; j<=5; j++){//列数 str=str+"★" } str=str+'\n'//每完成一行加个换行}console.log(str)★★★★★★★★★★★★★★★★★★★★★★★★★输出正三角// 输出5行,每行加1个星星(正三角)var str=''for(let i=1;原创 2020-12-23 17:42:32 · 2163 阅读 · 0 评论 -
webpack二:webpack的五个核心概念、css/less样式的处理配置方法+打包、样式处理相关库安装
一、webpack 五个核心概念1. Entry入口(Entry)指示 webpack 以哪个文件为入口起点开始打包, 分析构建内部依赖图。2. Output输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去, 以及如何命名。3. LoaderLoader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解JavaScript)4. Plugins插件(Plugins)可以用于执行范围更广的任务。插件的范围包括,从打原创 2020-12-21 16:28:15 · 363 阅读 · 2 评论 -
webpack一:项目初始化、安装webpack/webpack-cli、第一次打包、webpack本身只能处理js/json文件、webpack作用总结
一、项目初始化、安装webpack/webpack-cli、第一次打包1)项目初始化npm init输入项目名,其它默认即可命令完成后会在项目下生成一个package.json:package name: (webpack) webpack1version: (1.0.0)description:entry point: (index.js)test command:git repository:keywords:author:license: (ISC)About to w原创 2020-12-19 15:35:53 · 1803 阅读 · 7 评论 -
vue外卖二十六:打包并生成报告以优化代码库【完结】
一、打包并生成报告命令vue 脚手架提供了一个用于可视化分析打包文件的包 webpack-bundle-analyzer和配置命令如下:完成后会在根目录下生成一个build文件夹,即打包文件npm run build --report之后会生成一个报告:可查看哪些包比较大,从而进行修改,如下图,面积越大说明对应库体积较大,可进行换库,或其它优化操作;...原创 2020-12-16 20:51:08 · 212 阅读 · 0 评论 -
vue外卖二十五:优化:路由懒加载,实现打包时拆分app.js为多个、图片懒加载、
一、路由懒加载,实现打包时拆分app.js为多个当完成项目进行打包后npm run build,会把自己写的所有js代码放入【app.js】里;npm run serve/npm run dev开发运行时,则在内存中打包成app.js;当各个页面的js代码逻辑非常多时,会造成运行慢,卡此时,使用路由懒加载写法,打包时,可把app.js根据不同页面拆分成多个如1.js、2.js等等。开发运行时也会打包拆分成1.js。。。一般只在主页面上用此方法使用懒加载效果如下:懒加载写法 route原创 2020-12-16 20:38:39 · 2081 阅读 · 0 评论 -
vue外卖二十四:功能完善:时间戳格式化filter、缓存路由组件对象、路由后退push改replace,解决多嵌套路由页面点返回多次无法一次退出到上一个页面民
一、时间戳格式化filter评价列表页面的发布时间:1469281964000,格式化为人可看懂的时间1)新建文件并创建一个filter实例 src/filter/index.jsimport Vue from 'vue'// 【1】将时间戳转日期格式的过滤器Vue.filter('date-format', (dataStr) => { var time = new Date(dataStr); function timeAdd0(str) {原创 2020-12-16 17:35:08 · 198 阅读 · 0 评论 -
vue外卖二十三:搜索页:搜索商家列表ajax请求编写+放入vuex+获取、有数据时显示数据,无数据时显示暂无结果、li标签换成店铺访问链接,tag把router-link转Li+to传参2种写法
一、搜索商家列表ajax请求编写+放入vuex+获取1)准备及获取state page/search/search.vue<!-- 【3】阻止默认提交事件,用search方法代替 --> <form class="search_form" @submit.prevent="search"> <!--【1】绑定数据 --> <input type="search" placeholder="请输入商家名称" class="searc原创 2020-12-16 17:02:49 · 707 阅读 · 0 评论 -
vue外卖二十二:商家详情-商家列表
<template> <div class="shop-info"> <div class="info-content"> <section class="section"> <h3 class="section-title">配送信息</h3> <div class="delivery"> <div> <s原创 2020-12-16 11:02:31 · 630 阅读 · 0 评论 -
vue外卖二十一:商家详情-评价列表-条件过滤显示评价:只显示好评/差评+显示只带内容评价、用getters生成好评数量新状态
一、基本数据标识设计shop/ratings/ratings.vue1)data数据设计data(){ return{ showText:true, //条件1:只显示带文字的评价 ratingType:2, //条件2:评价显示类型:0满意,1不满意,2全部 } }2)事件及样式类设计知识点:绑定样式可写成::class="{on:showText}其中on为样式,showText为数据也可写成::class="showT原创 2020-12-15 14:53:24 · 650 阅读 · 0 评论 -
vue外卖二十:商家详情-评价列表:评价列表接口模拟-vuex获取完整数据链流程、滑动better-scroll
一、评价列表接口模拟-获取完整数据链流程1)数据模拟mockjs src/mock/mockServer.js/*使用mockjs提供mock数据接口 */import Mock from 'mockjs'import data from './data.json'// 返回goods的接口Mock.mock('/shop_goods', {code:0, data: data.goods})// 【1】返回ratings的ajax请求接口,为0表示成功,data.ratings,在da原创 2020-12-14 18:23:24 · 302 阅读 · 0 评论 -
vue外卖十九:商家详情-底部购物车组件,购物车相关vuex状态设计、相关计算、清空购物车+滚动购物车
一、购物车基础1)购物车状态设计cartFoods+mutationstore/state.js// 所有要管理的状态数据:从页面需求分析出来,最好和api/index.js里的命名相同export default{ latitude: 40.10038, // 纬度 longitude: 116.36867, // 经度 address: {}, //地址相关信息对象 categorys: [], // 食品分类数组 shops: [], // 商家数组 userI原创 2020-12-12 20:41:46 · 1211 阅读 · 0 评论 -
vue外卖十八:商家详情-食物详情:用ref获取食物详情组件的方法来显示/隐藏子组件、props向子组件传当前食物对象用于显示、@click.stop阻止外层元素的点击事件,让当前点击事件始终有效
1)编写显示隐藏当前组件显示/隐藏方法<template><!-- v-if显示隐藏当前组件--> <div class="food" v-if="isShow">methods: { toggleShow () { this.isShow = !this.isShow } },2)结合ref调用子组件的显示隐藏方法src/pages/shops/goods/goods.vue知识点:1.ref标示.原创 2020-12-11 18:31:03 · 356 阅读 · 0 评论 -
vue外卖十七:商家详情-cartControl组件:购物车加减商品组件及功能
一、基础页面1.创建静态页面+接收props传值src/components/CartControl/cartControl.vue<template> <div class="cartcontrol"> <div class="iconfont icon-remove_circle_outline"></div> <div class="cart-count">1</div> <div cla原创 2020-12-09 16:50:57 · 841 阅读 · 0 评论 -
vue外卖十六:商家-食物列表:用滑动库better-scroll滑动列表、收集列表位移、各子列表top值
一、基础页面+基本滑动功能1)基础页面+逻辑(见附件)2)滑动库:better-scroll官方文档:https://better-scroll.github.io/docs/zh-CN/guidegit :https://github.com/ustbhuangyi/better-scroll2.1安装cnpm install @better-scroll/core --save// oryarn add @better-scroll/core2.2使用shop/goods/g原创 2020-12-07 18:17:10 · 494 阅读 · 1 评论 -
# JavaScript中的对象转数组Array.prototype.slice.call()方法详解
JavaScript中的对象转数组Array.prototype.slice.call()方法详解JavaScript中的Array.prototype.slice.call(arguments)能将有length属性的对象转换为数组(特别注意: 这个对象一定要有length属性). 但有一个例外,IE下的节点集合它不能转换(因为IE下的dom对象是以com对象的形式实现,js对象和com对象不能进行转换)首先,我们来看看JavaScript中的slice用法在JavaScript中Array是一个类原创 2020-12-06 20:31:15 · 356 阅读 · 0 评论 -
sublime3控制台直接编译运行js
首先安装nodejs,cmd运行 node -v 查看是否安装成功然后:工具——编译系统——新建编译系统,在出来的文件内输入如下代码,最后保存,名字js或随便什么都可,位置默认即可最后运行:ctrl+b即可出现结果{ "cmd": ["node", "$file"], "selector": "source.js"}...原创 2020-12-06 17:03:31 · 147 阅读 · 0 评论