web前端
文章平均质量分 80
自从看了抖音以后,被抖音骗来学习前端了,希望大家可以多多指导
程序猿玖月柒
喜欢IT,喜欢编程,希望可以在此找到一些志同道合的朋友。(也喜欢她吼吼吼)
展开
-
哇!超炫酷的echarts图表,你心动了吗????
项目介绍:前端采用的是:vue+echarts后端采用的是:koa2项目源码已上传至码云:后台: https://gitee.com/jiuyueqi/koa_serve前台:https://gitee.com/jiuyueqi/vision基础知识点可以看我的往期博客(已置顶):https://blog.csdn.net/weixin_45257157/article/details/106300587欣赏一下效果图吧!!!分块图1.中国地图2.销量趋势图3.销售统计原创 2021-02-19 23:54:05 · 1452 阅读 · 0 评论 -
最新vue+vant移动端电商项目
今天为大家带来一个Vue+VantUi完成的一个一个移动端电商项目,供大家学习和参考.源码已上传到码云上面https://gitee.com/jiuyueqi/vyx,如果有需要源码或者接口文档的欢迎评论区留言,看到后会第一时间进行回复!!!废话不多说先上效果图下面开始让我为大家介绍一下该项目用到的知识点及核心代码一、Vant官网地址:https://youzan.github.io/vant/#/zh-CN/quickstart通过vscode打开项目,使用 ctrl+~ 打开终端。我们通原创 2021-02-16 20:55:08 · 8252 阅读 · 38 评论 -
都2021年了,你还在用Ajax吗?快来一起学习更加优雅的axios吧!
在Vue的项目当中,引入Jquery库,然后进行Ajax请求无疑的浪费成本与性能的,所以还有什么更好的方式吗??? 答案当然是Yes.今天就让我带着大家一起了解一下Axios吧!!!一、Restful风格接口Restful风格的API是一种软件架构风格,设计风格而不是标准,只是提供了一组设计原则和约束条件。它主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。在Restful风格中,用户请求的url使用同一个url而用请求方式:get,post,de原创 2021-02-09 11:15:33 · 2730 阅读 · 1 评论 -
前端必备技能Vue-router
众所周知vue是前端三大框架之一,在国内拥有非常大的市场,而进行Vue的学习,router(路由)是必不可少的,那么接下来就让我给大家介绍一下吧!如果有用,欢迎大家点赞,收藏一起学习…SPA什么是SPA?Single Page Application,中文:单页应用。以下两个链接请用浏览器的手机模拟器打开:单页应用有很多,比如:https://m.huxiu.com/非单页应用也是以往的开发习惯,比如:https://36kr.com/Vue-router(路由)一、什么是路由?说起路由你原创 2021-02-09 11:08:25 · 518 阅读 · 0 评论 -
优雅的状态管理工具--Vuex
Vuex1、什么是Vuex?官方定义:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。说得直白点,vuex就是vue.js中管理数据状态的一个库,通过创建一个集中的数据存储,供程序中所有组件访问。一个数据只要放在了vuex中,当前项目所有的组件都可以直接访问这个数据。vuex有以下常用的几个核心属性概念:StateGetterMutationActionModule具原创 2021-02-08 17:18:26 · 290 阅读 · 2 评论 -
Vue基础(四)
一、插槽1. 为什么使用slotslot翻译为插槽,组件的插槽:组件的插槽也是为了让我们封装的组件更加具有扩展性。让使用者可以决定组件内容的一些内容到底展示什么。京东头部导航栏例子:2. 如何在组件中使用slot呢?如何去封装这类的组件呢?它们也很多区别,但是也有很多共性。如果,我们每一个单独去封装一个组件,显然不合适:比如每个页面都返回,这部分内容我们就要重复去封装。但是,如果我们封装成一个,好像也不合理:有些左侧是菜单,有些是返回,有些中间是搜索,有些是文字,等等如原创 2021-02-07 21:24:25 · 296 阅读 · 0 评论 -
Vue基础(三)
一、Vue指令vue框架特点:双向数据绑定与组件化开发1.1、(重点) 深入双向数据绑定原理Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。Vue里面是怎么做到的的呢?其实就是使用了Object.defineProperty 把Vue内的属性全部转成 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是 Vue 不支持 IE8 以及更低版本浏览原创 2021-02-06 16:38:50 · 350 阅读 · 0 评论 -
Vue+Bootstrap实现简易学生管理系统
利用vue和bootstrap做了一个比较简易的学生管理系统!!!废话不多说先来看看效果图附上源代码:<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="widt原创 2021-02-06 12:06:12 · 2724 阅读 · 2 评论 -
Vue基础(二)
一、模板语法的插值操作(其他不常用指令)v-html 往标签内部插入html文本v-text 往标签内部插入普通文本(解析不了标签)v-pre 在界面上直接展示胡子语法v-cloak 隐藏数据渲染到页面之前,胡子语法在界面上的展示 <div id="app"> <!-- <p>{{str1}}</p> --> <!-- v-html 让浏览器认识str1中的html标签 --原创 2021-02-06 00:03:10 · 1387 阅读 · 1 评论 -
Vue基础(一)
一、Vue简介Vue (读音 /vjuː/,类似于 view),不要读错。面试的时候大家一定要独对音调,不要读成V U E.虽然好像并没有什么卵用,不过显得专业!!!专业就是MoneyVue是一个渐进式的前端框架,什么是渐进式的呢? VUE全家桶 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中,或者如果你希望将更多的业务逻辑使用Vue实现,那么Vue的核心库以及其生态系统。比如Core+Vue-router+Vuex+axios,也可以满足你各种各样的需求。Vue的特点和Web开发原创 2021-02-05 18:27:42 · 3305 阅读 · 7 评论 -
前端面试题-Promise
之前写过vue相关的面试题(如果有需要可以查看历史博客),今天更新前端面试题promise相关的.希望大家可以多多支持!!!// 面试题1 setTimeout(()=>{ console.log(1) },0) Promise.resolve().then(()=>{ console.log(2) }) Promise.resolve().then(()=>{ console.log(4) }) co原创 2021-02-04 23:15:54 · 871 阅读 · 4 评论 -
Promise从入门到深入
Promise从入门到深入1. 准备1.1. 函数对象与实例对象1. 函数对象: 将函数作为对象使用时, 简称为函数对象2. 实例对象: new 函数产生的对象, 简称为对象1.2. 回调函数的分类1. 同步回调: 理解: 立即执行, 完全执行完了才结束, 不会放入回调队列中 例子: 数组遍历相关的回调函数 / Promise的excutor函数2. 异步回调: 理解: 不会立即执行, 会放入回调队列中将来执行 例子: 定时器回调 / ajax回调 / P原创 2021-02-04 22:13:08 · 227 阅读 · 2 评论 -
JavaScript高级(三)
ES62个新的关键字let/const块作用域没有变量提升不能重复定义值不可变变量的解构赋值将包含多个数据的对象(数组)一次赋值给多个变量数据源: 对象/数组目标: {a, b}/[a, b]各种数据类型的扩展console.log('--------------------es6--------------------------------'); let obj2 = {username:'kobe', age: 43}; let {username, a原创 2021-02-03 21:13:05 · 296 阅读 · 0 评论 -
JavaScript高级(二)
楼主今天主要分享一下ES5的一些补充内容,后面会继续写ES6的部分,希望大家多多点赞支持!理解ES全称: ECMAScriptjs语言的规范我们用的js是它的实现js的组成ECMAScript(js基础)扩展–>浏览器端BOMDOM扩展–>服务器端Node.jsES5严格模式运行模式: 正常(混杂)模式与严格模式应用上严格式: ‘strict mode’;作用:使得Javascript在更严格的条件下运行消除Javascript语法原创 2021-02-02 19:58:01 · 367 阅读 · 2 评论 -
JavaScript高级(一)
js高级函数函数函数也是对象函数具备行为,可以被调用用来减少代码量,复用,隔离变量,减少命名污染函数分类普通的函数构造函数IIFE(匿名函数自调用/立即执行函数)回调函数(事件的回调,定时器的回调)函数的this理解this:关键字变量this的指向问题函数this不是函数定义的时候决定的函数this指向谁看如何调用当前的函数this指向分类函数自调用: window构造函数(new function): 当前构造函数的实例对象对象.方法()原创 2021-02-01 21:06:08 · 2043 阅读 · 4 评论 -
2020年,令人惊叹的Echarts!
马上要毕业了,楼主也是一个弟弟,一直在苦苦的寻求一份工作,一直在刷和做公司给的面试题,就在前天一个前端岗位给我出了一题,我靠!利用bootstrap和echarts画出他给的图,楼主虽然以前也学习过echarts,但还是一时间懵逼,所以特意去复习总结了一遍希望对大家有所帮助!废话不多说先上效果图看完效果图,我在给大家详细的解释一下我们完成这个图所需要的具体的操作与技术吧!1.可视化面板介绍应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据原创 2020-05-23 15:47:20 · 13414 阅读 · 26 评论 -
2020年前端面试题(二)之VUE篇
1.常用的vue指令有哪些: v-if v-else v-on v-bind v-show v-model2.浏览器页面之前如何传参queryurl?a=xxx&b=yyyquery+pathquery+nameparams注册:url/:id请求:url/123params+nameprops布尔值对象函数meta路由元信息3.父子组件互相调用方法父组件主动获取子组件的数据和方法:1.调用子组件的时候定义一个r原创 2020-05-19 15:12:49 · 13366 阅读 · 13 评论 -
2020最新前端面试题(一)
由于最近一直在忙,没有时间写博客,最近面试了多家公司这是其中一家的面试题分享给大家,其中有一些题目我也不会做,希望大家可以评论或者私信交流一下!1.下面代码执行后 dvar c=1,d=1;for(;c<3;c++){d+=++c;}d=3;2.请补充代码var a=[{x:1},{x:2},{x:3}];//1) 给a数组最前面插入{x:0}var a=[{x:1},{x:2},{x:3}];a.unshift({x:0});//2) 给a数组最后追加 {x:6}var a原创 2020-05-17 17:52:59 · 2895 阅读 · 5 评论 -
Vue基础之常用特性
Vue常用特性表单基本操作1.获取单选框中的值通过v-model2.获取复选框中的值通过v-model和获取单选框中的值一样复选框 checkbox 这种的组合时 data 中的 hobby 我们要定义成数组 否则无法实现多选3.获取下拉框和文本框中的值通过v-model <div id="app"> <form actio...原创 2020-03-18 22:59:16 · 770 阅读 · 7 评论 -
Vue基础之模板语法
Vue 是什么?Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合使用Vue将helloworld 渲染到页面上 <div id="app"> <div>{{msg}}</div> <div>{{1...原创 2020-03-17 22:15:21 · 708 阅读 · 5 评论 -
JS中的模板引擎
1. 模板引擎文档:http://aui.github.io/art-template/zh-cn/Github: https://github.com/aui/art-template1.1 Ajax 项目中存在的问题数据和HTML字符串拼接导致代码混乱,拼接容易出错,增加修改难度。业务逻辑和用户界面混合,代码不易维护。for (var i = 0; i < res...原创 2020-03-16 20:46:08 · 847 阅读 · 2 评论 -
Git初体验
1. Git基础1.1 版本管理1.1.1 什么是版本管理版本管理是一种记录文件变化的方式,以便将来查阅特定版本的文件内容。1.1.2 人为维护文档版本的问题文档数量多且命名不清晰导致文档版本混乱每次编辑文档需要复制,不方便多人同时编辑同一个文档,容易产生覆盖1.2 Git 是什么Git是一个版本管理控制系统(缩写VCS),它可以在任何时间点,将文档的状态作为更新...原创 2020-03-15 23:32:36 · 446 阅读 · 4 评论 -
Node.js+express实现博客管理项目
前言: 经过一段时间的前端学习,终于到了开始做一些项目来进行自我检验的时候了.下面我把本次项目的内容和过程加以总结,希望可以得到大家的支持,有需要源码的可以关注我私信,或者留邮箱地址.1. 项目环境搭建1.1 项目介绍博客的内容展示页面博客的管理页面1.2 项目需要的文件夹及用到的技术主要技术1.express框架...原创 2020-03-10 18:55:49 · 2324 阅读 · 7 评论 -
2020年前端人员必备的工具和插件
工具1.vs code vs code是一个轻量级的开发工具,里面可以写很多语言的代码,像c/c++,java,python,前端js等等,而且因为它是一个完全免费且自带中文版的开发工具所以选择他的人非常的多,笔者也是一直在使用;2.webstorm webstorm是jb公司旗下的产品,其产品比较专业,除了webstor...原创 2020-02-29 22:24:03 · 954 阅读 · 1 评论 -
JavaScript ES6新特性
今天要给大家介绍的是es6,相信学习前端方面的同学朋友们都知道es6是非常重要的一个版块,虽然目前依旧是es5的天下,但是es6已经开始越来越完善,使用越来越广泛,下面就给大姐详细的介绍一下!ES6相关概念ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r...原创 2020-02-29 21:43:43 · 775 阅读 · 0 评论 -
JS中的正则表达式
经过一段时间的前端学习,发现了自己的很多短板,正则表达式在python,java,中都学习过了,现在回顾js中的正则发现又忘记的差不多了,所以今天特意的做了一些总结!走过路过的小伙伴们记得点个赞呦!!!1.正则表达式概述正则表达式( Regular Expression )是用于匹配字符串中字符组合的模式。在JavaScript中,正则表达式也是对象。正则表通常被用来检索、替换那些符合某个模...原创 2020-02-28 23:47:55 · 326 阅读 · 2 评论 -
王者荣耀卡片
效果展示如上 下面加上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl...原创 2020-02-21 18:23:49 · 733 阅读 · 0 评论 -
jQuery-01
1.1. jQuery 介绍1.1.1 JavaScript 库 JavaScript库:即 library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。简单理解: 就是一个JS 文件,里面对我们原生js代码进行了封装,存放到里面。这样我们可以快速高效的...原创 2020-02-20 22:50:59 · 224 阅读 · 0 评论 -
JavaScript基础-常见的内置对象
1 - 内置对象1.1 内置对象 JavaScript 中的对象分为3种:自定义对象 、内置对象、 浏览器对象 前面两种对象是JS 基础 内容,属于 ECMAScript; 第三个浏览器对象属于 JS 独有的, JS API 讲解内置对象就是指 JS 语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法),内置对象最大的优点就是帮助我们快...原创 2020-02-11 23:00:22 · 298 阅读 · 0 评论 -
JavaScript基础-数组与函数
1 - 数组1.1 数组的概念数组可以把一组相关的数据一起存放,并提供方便的访问(获取)方式。数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。1.2 创建数组JS 中创建数组有两种方式:利用 new 创建数组var 数组名 = new Array() ;var arr = new Arra...原创 2020-02-08 18:17:45 · 276 阅读 · 0 评论 -
JavaScript基础-循环
1 - 循环1.1 for循环语法结构for(初始化变量; 条件表达式; 操作表达式 ){//循环体}| 名称 | 作用 || ---------- | ------------------------------------------------...原创 2020-02-07 21:16:46 · 241 阅读 · 0 评论 -
JavaScript基础-运算符
1 - 运算符(操作符)1.1 运算符的分类运算符(operator)也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。JavaScript中常用的运算符有:算数运算符递增和递减运算符比较运算符逻辑运算符赋值运算符1.2 算数运算符算术运算符概述概念:算术运算使用的符号,用于执行两个变量或值的算术运算。[外链图片转存失败,源站可能有防盗链机制,建议将...原创 2020-02-06 20:15:28 · 346 阅读 · 0 评论 -
JavaScript基础-变量
1 - 编程语言1.1 编程编程:就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程。计算机程序:就是计算机所执行的一系列的指令集合,而程序全部都是用我们所掌握的语言来编写的,所以人们要控制计算机一定要通过计算机语言向计算机发出命令。1.2 计算机语言计算机语言指用于人与计算机之间通讯的语言,它是人与计算机之间传递信息的媒介。...原创 2020-02-06 15:10:48 · 328 阅读 · 0 评论 -
响应式布局
移动端WEB开发之响应式布局1.0 响应式开发原理1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。设备的划分情况:小于768的为超小屏幕(手机)768~992之间的为小屏设备(平板)992~1200的中等屏幕(桌面显示器)大于1200的宽屏设备(大桌面显示器)1.2 响应式布局容器响应式需要一个父级做为布局容器,来配合子...原创 2020-02-05 16:12:38 · 291 阅读 · 1 评论 -
flex伸缩布局
每日作业-移动端第二天训练案例1训练描述如下图:利用flex布局实现,左右两侧宽度100px固定,中间宽度根据屏幕宽度自适应要求: (1):使用flex布局方式 (2):不允许使用margin、padding等方式实现 (3):不允许使用定位实现训练提示1、首先外面套个大盒子;设置宽、高并且开启flex布局2、子盒子结构基本分为三部分左侧、中间、右侧...原创 2020-01-10 17:23:57 · 591 阅读 · 0 评论 -
流式布局
移动web开发流式布局1.0 移动端基础1.1浏览器现状PC端常见浏览器:360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。移动端常见浏览器:UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,以及其他杂牌浏览器。国内的UC和QQ,百度等手机浏览器都是根据Webkit修改过来的内核,国内尚无自主...原创 2020-01-09 21:04:19 · 230 阅读 · 0 评论 -
HTML5+CSS3
cHTML5 第三天一、 认识 3D 转换3D 的特点近大远小物体和面遮挡不可见三维坐标系x 轴:水平向右 – 注意:x 轴右边是正值,左边是负值y 轴:垂直向下 – 注意:y 轴下面是正值,上面是负值z 轴:垂直屏幕 – 注意:往外边的是正值,往里面的是负值二、3D 转换3D 转换知识要点3D 位移:translate3d(...原创 2020-01-07 16:01:18 · 259 阅读 · 0 评论 -
HTML5+CSS3
HTML5 第二天一、rotate2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转使用步骤:给元素添加转换属性 transform属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度div{ transform: rotate(0deg);}二、三角代码演示二、设置元素旋转中心点(tran...原创 2019-12-29 20:29:55 · 642 阅读 · 0 评论 -
HTML5CSS3
HTML5 第一天一、什么是 HTML5HTML5 的概念与定义定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML两个概念:是一个新版本的 HTML 语言,定义了新的标签、特性和属性拥有一个强大的技术集,这些技术集是指: HTML5 、CSS3 、javascript, 这也是广义上的 HTML5HTML5 ...原创 2019-12-28 18:23:18 · 718 阅读 · 0 评论 -
纯HTML、CSS完成品优购电商项目
前言:经过一段时间HTML、CSS的学习准备话费时间做一个小项目来检验一下自己的学习成果。希望可以得到支持!1.品优购项目介绍项目名称:品优购项目描述:品优购是一个电商网站,我们要完成首页、列表页、详情页、注册页的制作。2.项目背景现阶段电商类类网站很流行,很多同学毕业之余都会进入电商类企业工作,同时电商类的网站需要的技术也是比较复杂。3.设计目标保证浏览器ie7以上,火狐,360...原创 2019-12-27 18:07:13 · 4155 阅读 · 5 评论