前端
文章平均质量分 70
_东极
少年锦时
展开
-
前端(二十二):vue-element-admin以及 vue-admin-template
文章目录vue-element-adminvue-admin-templatevue-element-admin该开源项目定位于后台集成方案, vue-element-admin当做工具箱,然后通过vue-admin-template来进行组配下载项目git clone https://github.com/PanJiaChen/vue-element-admin.gitnpm installnpm run devvue-admin-template轻量化模板git clone http原创 2021-07-06 09:28:37 · 1054 阅读 · 0 评论 -
前端(二十一):webpack
文章目录简介安装JS打包css文件打包简介Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件,减少了页面的请求。安装全局安装npm install -g webpack webpack-cli安装后查看版本号webpack -vJS打包创建src文件夹下common.jsexports.info = function (s原创 2021-07-04 18:59:15 · 303 阅读 · 0 评论 -
前端(二十):Babel转码
文章目录简介安装Babel的使用简介Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行执行。安装Babel提供babel-cli工具,用于命令行转码npm install --global babel-cli查看是否安装成功babel --versionBabel的使用创建文件1.jslet input = [1, 2, 3]input = input.map((item) => item + 1)console.log(input)创原创 2021-07-02 15:47:16 · 299 阅读 · 0 评论 -
前端(十八):Vue模板语法,计算属性
文章目录模板语法文本原始 HTMLAttribute计算属性计算属性的 setter模板语法文本通过{{}}来实现数据绑定,但是当标签被设置v-once,数据只会在第一次加载绑定原始 HTML双大括号会将数据解释为普通文本,为了输出真正的 HTML,你需要使用 v-htmlAttribute通过v-bind来绑定attributev-on来监听DOM事件v-bind的缩写:<a v-bind:href="url">...</a>等同<a :href="u原创 2021-06-29 16:34:08 · 363 阅读 · 0 评论 -
前端(十七):Vue实例
文章目录实例数据与方法实例生命周期钩子实例每一个vue都是通过Vue函数来创建一个vue实例var vm = new Vue({ // 选项})数据与方法当一个Vue实例被创建时,它将data对象中所有的property加入到Vue的响应式系统中,当这些property的值发生改变时,视图将会产生响应,匹配更新为新的值//数据对象var data1 = { a: 1 }//将该对象加入到一个Vue实例中var vm = new Vue({ data: data1})//获取原创 2021-06-29 15:24:25 · 527 阅读 · 0 评论 -
前端(十六):Vue初步了解
文章目录前言vue.js是什么起步条件与循环前言学习新的技术以及语言,首当前冲的学习方式肯定是官网,别人的博客以及视频可以帮助你加速理解,vue官网:https://cn.vuejs.org/v2/guide/vue.js是什么所有的框架都是帮助你整合资源,简化开发者的工作量,框架就像工具,人的聪明主要是会发明创造并使用工具用的好的单车变摩托vue 是一套用于构建用户界面的渐进式框架,Vue 被设计为可以自底向上逐层应用,只关注图层,并且与其他组件兼容性好起步<script src原创 2021-06-29 14:58:36 · 276 阅读 · 0 评论 -
前端(十五):JS相关问题总结
文章目录数据类型分类数据类型分类基本类型number: 数值string:字符boolean:布尔undefined: 未定义null:空对象引用类型Object : 对象array:数组function : 特别对象类型原创 2021-06-29 08:29:56 · 207 阅读 · 0 评论 -
前端(十四):BOM(Navigator、History、Location)以及定时器
文章目录BOM定时器BOMbom是浏览器对象模型,通过js操作浏览器来完成对浏览器的操作对象Window:代表的是整个浏览器的窗口,同时window也是网页中的全局对象。Navigator:代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器。Location:代表当前浏览器的地址栏信息,通过Location可以获取地址栏信息,或者操作浏览器跳转页面。History:代表浏览器历史记录,可以通过该对象来操作浏览器的历史记录。由于隐私原因,该对象不能获取到具体的历史记录,只能操作浏览器向前原创 2021-06-28 16:57:41 · 286 阅读 · 0 评论 -
前端(十三):JS事件委派、事件绑定、事件传播、滚轮事件、键盘事件、键盘移动div
文章目录事件的委派事件的绑定事件的传播拖拽事件的委派事件的委派:指将事件统一绑定给元素的共同的祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件。<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"&g原创 2021-06-28 16:38:11 · 365 阅读 · 0 评论 -
前端(十二):JS的DOM操作添加删除修改
文章目录添加和删除通过JS修改元素的样式添加和删除删除:文本框中的数据使用的是span元素,对应的parentNode为tr,因此使用parentNode.removeChild来删除其tr添加:通过document.createElement创建元素,锁定td的位置,然后通过appendChild来添加tr,再对其tr中添加createTextNode<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR原创 2021-06-28 15:26:12 · 1019 阅读 · 0 评论 -
前端(十一):JS的DOM操作
文章目录获取元素节点获取元素节点的子节点获取父节点和兄弟节点案例获取元素节点通过document对象调用getElementById():通过id属性获取一个元素节点对象。getElementsByTagName():通过标签名获取一组元素节点对象。getElementsByName():通过name属性获取一组元素节点对象。获取元素节点的子节点通过具体的元素节点调用getElementsByTagName():方法,返回当前节点的指定标签名后代节点。childNodes:属性,表示原创 2021-06-25 13:24:32 · 291 阅读 · 1 评论 -
前端(十一):过渡与动画
文章目录过渡属性值动画过渡通过过渡可以指定一个属性发生变化时的切换方式通过过渡可以创建一些非常好的效果,提升用户的体验属性值transition-property:指定要执行过渡的属性多个属性间使用,隔开;如果所有属性都需要过渡,则使用all关键字;大部分属性都支持过渡效果;注意过渡时必须是从一个有效数值向另外一个有效数值进行过渡;transition-duration:指定过渡效果的持续时间时间单位:s和ms(1s=1000ms)transition-delay:过渡效果的原创 2021-06-24 14:02:16 · 396 阅读 · 0 评论 -
前端(十):表格
文章目录表格长表格表格的样式表单文本框密码框提交按钮单选框多选框下拉列表按钮表格在table中使用tr表示表格中的一行,有几个tr就有几行在tr中使用td表示一个单元格,有几个td就有几个单元格rowspan 纵向的合并单元格colspan 横向的合并单元格<table border="1" width="50%" align=" center"> <!--在table中使用tr表示表格中的一行,有几个tr就有几行--> <tr>原创 2021-06-24 11:18:38 · 262 阅读 · 0 评论 -
前端(九):背景
文章目录background-color 设置背景颜色background-image 设置背景图片如果背景图片大小小于元素,则背景图片会自动在元素中平铺将元素铺满如果背景图片大小大于元素,则背景图片一部分会无法完全显示如果背景图片大小等于元素,则背景图片会直接正常显示background-repeat 设置背景图片的重复方式repeat 默认值,背景图片沿着x轴和y轴双方向重复repeat-x 背景图片沿着x轴方向重复repeat-y 背景图片沿着y轴方向重复no-repeat原创 2021-06-24 10:19:44 · 193 阅读 · 0 评论 -
前端(七):高度塌陷与BFC
文章目录定位的简介定位相对定位偏移量(offset)相对定位的特点绝对定位包含块水平方向的布局水平居中垂直方向的布局水平垂直居中固定定位粘滞定位几种定位的对比元素层级定位的简介想要实现传统方式.box2 { width: 200px; height: 200px; background-color: yellow; /* 左外边距、上外边距 */ margin-left: 200px; margin-top: -200px;}.box3 {原创 2021-06-23 17:30:15 · 341 阅读 · 1 评论 -
前端(六):高度塌陷与BFC
文章目录高度塌陷BFCclearafterclearfix高度塌陷在浮动布局中,父元素的高度默认是被子元素撑开的当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离将会无法撑起父元素的高度,导致父元素的高度丢失父元素高度丢失以后,其下的元素会自动上移,导致页面的布局混乱BFCBFC(Block Formatting Context)块级格式化环境BFC是一个CSS中的一个隐含的属性,可以为一个元素开启BFC开启BFC该元素会变成一个独立的布局区域元素开启BFC后的特点:不会被浮原创 2021-06-23 14:31:45 · 268 阅读 · 0 评论 -
前端(五):浮动
文章目录简介特点脱离文档流的特点块元素:行内元素:简单布局w3school导航条简介通过浮动可以使一个元素向其父元素的左侧或右侧移动使用float属性来设置于元素的浮动none 默认值,元素不浮动left 元素向左浮动right 元素向右浮动注意元素设置浮动以后,水平布局的等式便不需要强制成立元素设置浮动以后,会完全从文档流中脱离,不再占用文档流的位置,所以元素下边的还在文档流中的元素会自动向上移动特点浮动元素会完全脱离文档流,不再占据文档流中的位置设置浮动以后,元素会向父元素的原创 2021-06-23 14:05:52 · 409 阅读 · 0 评论 -
前端小案例:田径场
文章目录盒子大小轮廓阴影圆角圆椭圆盒子大小默认情况下,盒子可见框的大小由内容区,内边距和边框共同决定box-sizing用来设置盒子尺寸的计算方式(设置width和height的作用).box { width: 200px; height: 200px; background-color: yellow; border: 10px red solid; /* box-sizing: content-box; */ box-sizing: border-原创 2021-06-23 13:29:02 · 337 阅读 · 0 评论 -
前端(四):样式继承与其他概念
文章目录文档流块元素行内元素盒子模型内容区(content)边框(border)内边距(padding)外边距(margin)水平方向布局垂直方向布局行内元素的盒模型文档流文档流是网页的基础我们所创建的元素默认都是在文档流中进行排列在文档流中不在文档流中(脱离文档流)块元素块元素会在页面中独占一行默认宽度是父元素的全部(会把父元素撑满)默认高度是被内容撑开(子元素)行内元素行内元素不会独占页面的一行,只占自身的大小行内元素在页面中左向右水平排列(书写习惯一致)如果一行之中不能原创 2021-06-22 17:10:35 · 288 阅读 · 0 评论 -
前端(三):样式继承与其他概念
文章目录继承选择器的权重长度单位颜色单位继承样式的继承,我们为一个元素设置的样式,同时也会应用到它的后代元素上注意,并不是所有的样式都会被继承:选择器的权重当我们通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值时,此时就发生了样式的冲突。选择器权重内联样式1, 0, 0, 0ID选择器0, 1, 0, 0类和伪类选择器0, 0, 1, 0元素选择器0, 0, 0, 1通配选择器0, 0, 0, 0继承的样式没有优先级原创 2021-06-22 14:53:50 · 278 阅读 · 0 评论 -
前端(二):CSS语法与选择器
文章目录1. CSS简介层叠样式表内联样式(行内样式)内部样式表外部样式表CSS基本语法注释基本语法选择器声明块通配选择器元素选择器类选择器ID选择器属性选择器复合选择器1. CSS简介层叠样式表CSS用来设置网页中元素的样式内联样式(行内样式)在标签内部通过style属性来设置元素的样式<p style="color:red;font-size:60px;">内联样式(行内样式)</p>样式只能对一个标签生效内部样式表将样式编写到head中的style标签里然后原创 2021-06-22 14:05:32 · 384 阅读 · 1 评论 -
前端(一):字符与语义标签
文章目录字符实体与语义标签meta标签语义标签块元素行元素HTML5 新元素布局标签有序列表超链接图片内联格式音频视频字符实体与语义标签在HTML中不能直接书写一些特殊符号,需要进行转义meta标签<meta charset="utf8" version='1'/><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes"/原创 2021-06-22 13:14:05 · 336 阅读 · 0 评论