前端工程学习
文章平均质量分 86
全栈工程师第二步,系统学习一波前端知识体系。
在地球迷路的怪兽
此时情绪此时天,无事小神仙。
展开
-
Uni-App急速上手
UniApp介绍快速上手新建项目Hello-Uni,然后先尝试运行在浏览器中:效果:运行在VX小程序中:一开始会让你配置微信开发者工具的位置,就将你微信开发者工具的文件存储路径填入就可以了:然后还要做两个操作,一个是首先确定一下你的微信开发者工具已经安装好并且登录了,另一个是一定要打开微信开发者的代理服务端口:然后才能正常启动:再来看一下如何将我们的这个项目放在安卓APP(IOS同理)上运行起来,但是这前提是你得先给你的电脑连接上一个手机,这个就不演示了,可以自己去试试。项目原创 2022-05-07 21:22:55 · 446 阅读 · 0 评论 -
前端必会三种CSS布局
概述大概布局情形如下:上面的说法可能有点抽象,我们通过京东商城来进一步了解一下布局:头部可以看到是通栏的布局,网站的主体是放在一个盒子里的,然后这个盒子设置在水平方向居中的位置,接下来的内容就放在这个盒子里面来进行布局。可以看见该盒子里面的布局都是一行两列一行三列多行多列等等等等的布局,即我们本篇文章要讲的。只要掌握了这三种布局方式,搭建一个完整网页是没有问题的。正文一般的PC端网站宽度是1280px,这里方便我们用宽度为1000px。另外如果我们不设置的话,默认浏览器会存在8px的边原创 2022-04-11 19:46:59 · 3457 阅读 · 3 评论 -
element-plus组件库快速上手教程
前言一般我们开发单页面应用(关于单页面应用是什么在本专栏的另一篇文章中有介绍)时,特别是针对和我一样打算走后端开发的同学,对于前端只有了解的程度,但是做项目时经常会要自己写前端的东西,所以本文的主旨就是让各位和我一样的后端程序员能快速使用element-ui提供的网页布局快速搭建网页结构。正文打开element-plus的官网可以看到,在container布局容器这一栏中,有很多常见的网页格式,这里我们以下图的网页布局为例,示范如何快速搭建网页布局。为了让网页的布局占满全屏,一般在开始布局之前,原创 2021-10-11 12:53:13 · 8336 阅读 · 2 评论 -
Vue3后端程序员极速入门
前言因为我就是主攻后端的程序员,前端感觉就是知道个大概就行,所以就是自己学着些皮毛罢了,想掌握Vue的同学们建议看其他人的文章嗷。Vue基本使用我感觉这个很基础了,我就随便贴两张图,这些不是重点。...原创 2021-10-10 15:35:09 · 3568 阅读 · 0 评论 -
Vue2学习之路由与路由导航
关于main.js中的一个小点在我们的main.js中,有这么一行代码,我们之前没讲它是干嘛用的:这一行代码设置为true(默认也是true)的话,则会在Vue运行时,终端会呈现一个提示:它会提醒你如果要上线产品的话一定要打开生产模式。说白了就是没啥用处,不过就是解释一下这是干嘛用的。嘿嘿。ESLint这个插件就是用来约束我们日常编写JavaScript代码风格用的,不是特别重要,进了公司可能会用的比较多,如果你是一个前端开发者的话。axios再深入首先切记,在Vue项目中使用axios原创 2021-11-25 15:01:16 · 739 阅读 · 0 评论 -
Vue2学习之动态组件、插槽与自定义指令
动态组件动态组件指的是动态切换组件的显示与隐藏。如何实现动态组件渲染先写好实验环境:我们怎么理解这个<component>?它其实就是个占位符,给组件占位用的,我们要展示哪个组件,我们就让这个component去指定要展示的组件名称就可以了。使用keep-alive保持状态啥叫无法保持组件的状态?就像下面这样,我们一开始在Left组件中让它加了几个1,:然后现在我们切换了Right组件,当我们再切换回来的时候,Left组件不再是之前我们写到的7了:这就是组件无法保原创 2021-11-25 12:56:59 · 350 阅读 · 0 评论 -
Vue2学习之生命周期与组件之间数据共享
Vue组件的实例对象每一个.vue文件都是模板文件,且并不是直接交给浏览器去解析和渲染的,而是经过package.json里面中的一个依赖包(图中红圈部分)替我们把vue文件编译解析成JavaScript文件才得以在浏览器中运行的。另外还需要知道一点就是,每次在使用vue组件的时候,其实都相当于是new了一个该组件的实例对象,比如:组件的生命周期与生命周期函数(重要的)Vue提供的这些函数可以供程序员在对应组件的当前状态做出对应的代码操作(比如在组件创建前要干啥干啥,在组件销毁后要干啥干啥等),原创 2021-11-24 22:46:02 · 392 阅读 · 0 评论 -
Vue2学习之组件与props
组件什么是组件化开发组件化开发指的是:根据封装的思想,把页面上可重用的 UI 结构封装为组件,从而方便项目的开发和维护。vue中的组件开发vue 是一个支持组件化开发的前端框架。vue 中规定:组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。vue组件的三个组成部分template这里有一个需要注意的点是,在整个template标签当中,只能包含一个根元素,如果有多个根元素,则报错。所以建议的写法是创建一个组件,那么就应该在template标签原创 2021-11-24 17:23:27 · 632 阅读 · 0 评论 -
Vue2学习之侦听器、计算属性、axios、Vue-cli及其目录结构
过滤器了解就行了,Vue3里面这部分以及被砍掉了,不再使用了。所以这里也就不介绍了,如果有用到再去找相应的资源进行学习就行了。侦听器 watch什么是watch侦听器watch 侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作。语法格式如下:注意:要监听哪个数据的变化,就把数据名作为方法名即可。使用watch检测用户名是否可用immediate选项deep选项计算属性计算属性的特点:1、虽然计算属性在声明的时候被定义为方法,但是计算属性本质上还是一个属性原创 2021-11-24 12:10:18 · 633 阅读 · 0 评论 -
Vue2学习入门之Vue简介以及指令基础
前言正式学习Vue之前,我们先给我们的Chrome浏览器安装一个vue-devtools的调试工具,这就不说了自己去装吧。Vue简介啥是VueVue的特性主要是两个方面:1、数据驱动视图2、双向数据绑定数据驱动视图双向数据绑定MVVMMVVM的工作原理Vue的版本Vue的基本使用基本使用步骤基本代码与MVVM的对应关系:Vue的指令与过滤器指令的概念内容渲染指令v-text(几乎不用)注意:v-text指令会覆盖元素内默认的值。所以一般我们都原创 2021-11-23 16:38:13 · 576 阅读 · 0 评论 -
Vue学习之前端工程化与webpack
学习Vue的前置知识必备前提:1、HTML+CSS+JavaScript。2、WebAPI(DOM和BOM)。3、Ajax。可有可无的前提:Node.js正文学习目标小白眼中的前端开发VS实际前端开发什么是前端工程化前端工程化解决方案早期那个就了解就行了,早被淘汰了,然后parcel主要是应用于开发第三方包的时候用的比较多,所以前端工程化主要还是通过webpack解决。webpack什么是webpack概念:webpack是前端项目工程化的具体解决方案。主要功能:它提供原创 2021-11-23 13:48:35 · 1771 阅读 · 1 评论 -
Vue前置知识之ES6模块化与异步编程高级用法
前端模块化规范的分类在 ES6 模块化规范诞生之前,JavaScript 社区已经尝试并提出了 AMD、CMD、CommonJS 等模块化规范。但是,这些由社区提出的模块化标准,还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化标准,例如:⚫ AMD 和 CMD 适用于浏览器端的 Javascript 模块化⚫ CommonJS 适用于服务器端的 Javascript 模块化太多的模块化规范给开发者增加了学习的难度与开发的成本。因此,大一统的 ES6 模块化规范诞生了!什么是 ES6原创 2021-11-22 14:58:47 · 1128 阅读 · 0 评论 -
ES6语法规范
啥是ES6ES的全程ECMAScript,是由ECMA国际标准化组织指定的一项脚本语言的标准化规范。ES6实际上是一个泛指,泛指ES2015及后续的版本。为啥要学ES6废话。ES6 新增语法letES6中新增的用于声明变量的关键字。let声明的变量只在所处于的块级作用域有效。上面的代码中。if后面的大括号即一个块级作用域。所以所谓的块级作用域就是一个大括号所囊括的作用域即块级作用域。注意:使用let关键字声明的变量才具有块级作用域,使用var声明的变量不具备块级作用域特性。上原创 2021-11-21 23:03:25 · 3885 阅读 · 0 评论 -
JavaScript进阶之严格模式、闭包与正则表达式
严格模式什么是严格模式开启严格模式严格模式可以应用到整个脚本或个别函数中。因此在使用时,我们可以将严格模式分为脚本开启严格模式和为函数开启严格模式两种情况。严格模式中的变化严格模式对JavaScript的语法和行为都做了一些相应的改变。高阶函数函数也可以作为参数值传递。闭包什么是闭包闭包(closure)指有权访问另一个函数作用域中变量的函数。----《JavaScript高级程序设计》简单理解就是,一个作用域可以访问另外一个函数内部的局部变量。示例:在上面程序中原创 2021-11-21 21:48:15 · 331 阅读 · 0 评论 -
JavaScript进阶之继承、ES5新增方法以及函数高级
继承ES6之前并没有给我们提供extends继承。我们可以通过构造函数+原型对象模拟实现继承,被称为组合继承。call()调用这个函数,并且修改函数运行时的this指向示例:传递的第一个参数就是用以修改this指向用的,后面的参数就是正常的传参就行。用这个特性,我们就可以实现组合继承。下面是属性的继承:方法的继承要稍显复杂:类的本质ES6之前通过构造函数+原型实现面向对象编程;ES6之后通过类实现面向对象编程。但其实类的本质还是一个function,即函数,所以我们可以简单原创 2021-11-21 20:15:23 · 1151 阅读 · 0 评论 -
JavaScript进阶之面向对象、构造函数和原型
面向对象这就不用多说了吧,Java中都学过。ES6中的类和对象创建类类constructor构造函数constructor()方法是类的构造函数(默认方法),用于传递参数,返回实例对象,通过new命令生成对象实例时,自动调用该方法。如果没有显示定义,类内部会自动给我们创建一个constructor(),就是无参构造器。注意点:1、通过class关键字来创建类,类名我们习惯性首字母大写2、类里面有个constructor函数,可以接收传递过来的参数,同时返回实例对象3、construc原创 2021-11-21 17:23:47 · 1155 阅读 · 2 评论 -
JavaScript学习之网页特效系列
1. 元素偏移量 offset 系列1.1 offset 概述offset 翻译过来就是偏移量, 我们使用 offset 系列相关属性可以动态的得到该元素的位置(偏移)、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小(宽度高度) 注意: 返回的数值都不带单位offset 翻译过来就是偏移量, 我们使用 offset 系列相关属性可以动态的得到该元素的位置(偏移)、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小(宽度高度)1.2 offset 与原创 2021-11-20 21:07:22 · 77 阅读 · 0 评论 -
JavaScript学习之BOM
1. BOM 概述1.1 什么是 BOMBOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是Netscape 浏览器标准的一部分。1.2 BOM 的构成window 对象是浏览器的顶级对象,它具有双重角色。它是 JS原创 2021-11-20 20:09:02 · 693 阅读 · 0 评论 -
JavaScript学习之事件高级
1、注册事件1.1 注册事件概述给元素添加事件,称为注册事件或者绑定事件。注册事件有两种方式:传统方式和方法监听注册方式。1.2 addEventListener 事件监听方式 eventTarget.addEventListener(type, listener[, useCapture])eventTarget.addEventListener()方法将指定的监听器注册到 eventTarget(目标对象)上,当该对象触发指定的事件时,就会执行事件处理函数。该方法接收三个参数: t原创 2021-11-20 15:26:30 · 92 阅读 · 0 评论 -
JavaScript学习之DOM详解
1、DOM1.1 什么是 DOM文档对象模型(Document Object Model,简称 DOM),是 W3C 组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。 W3C 已经定义了一系列的 DOM 接口,通过这些 DOM 接口可以改变网页的内容、结构和样式。1.2 DOM树 文档:一个页面就是一个文档,DOM 中使用 document 表示 元素:页面中的所有标签都是元素,DOM 中使用 element 表示 节点:网页中的所有内容都是节点(标签、属性、文本、注释原创 2021-11-20 13:56:17 · 1519 阅读 · 0 评论 -
JavaScript学习之基础第二部分
1、数组注意:数组中可以存放任意类型的数据,例如字符串,数组,布尔值等。获取数组元素:格式如下:数组名[索引下标] ,下标一样是从0开始的,和Java中一样。获取数组长度:数组名.lengthJavaScript中修改数组长度可以直接修改length值做到。2、JavaScript函数2.1 声明函数// 声明函数function 函数名() { //函数体代码} function 是声明函数的关键字,必须小写 由于函数一般是为了实现某个功能才定义的, 所以通常我们将函数名原创 2021-11-19 16:38:36 · 786 阅读 · 0 评论 -
JavaScript学习之编程基础部分
前言因为我是后端程序员,所以学前端有些知识是相通的,所以在我学习JavaScript的时候有些内容我会直接跳过,只会记下一些JavaScript特有的东西。1、初始JavaScript1.1 JavaScript 是什么 布兰登·艾奇(Brendan Eich,1961年~)。 神奇的大哥用10天完成 JavaScript 设计。 最初命名为 LiveScript,后来在与 Sun 合作之后将其改名为 JavaScript。1.1 JavaScript 是什么 JavaScript原创 2021-11-19 13:49:00 · 892 阅读 · 0 评论 -
JavaScript后端极速入门
JavaScript基础概念:一门客户端脚本语言运行在客户端浏览器中的,每一个浏览器都有JavaScript的解析引擎。脚本语言:不需要编译,直接就可以被浏览器解析执行了功能:可以用来增强用户和html页面的交互过程,可以用来控制html元素,让页面有一些动态的效果,增强用户的体验。JavaScript发展史1、1992年,Nombase公司,开发出第一门客户端脚本语言,专门用于表单的校验,命名为:C- -,企图蹭C++热点。后来觉得不行,又改成了ScriptEase,蹭下面两家的热点。2原创 2021-09-11 14:57:03 · 2509 阅读 · 1 评论 -
CSS学习
CSS:页面美化和布局控制1、概念:Cascading Style Sheets 层叠样式表层叠:多个样式可以作用在同一个html的元素上,同时生效2、好处:1、功能强大2、将内容展示和样式控制分离1)降低耦合度 2)让分工协作更容易3)提高开发效率3、CSS的使用:CSS和HTML结合方式1)内联样式(了解,不推荐使用)<!--内联样式(了解一下不推荐使用): 在标签内使用style属性指定CSS代码 --> <div sty原创 2021-09-09 15:03:54 · 97 阅读 · 3 评论 -
HTML5
概念快速入门标签学习原创 2021-09-08 12:32:25 · 97 阅读 · 2 评论