![](https://img-blog.csdnimg.cn/20190903150211649.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端
HTML&CSS 、JQuery、Vue
Elltor
刘启春的专栏
展开
-
记一次前端技术分享
这是在团队的第二次分享,第一次分享的是加密技术,这次分享些前端知识,即使做为后端开发工程师也应该了解些前端知识。原创 2021-11-18 23:37:18 · 2570 阅读 · 0 评论 -
js回调函数的使用
在第一次学js的时候,很多人估计对回调函数很蒙,今天有空梳理总结下回调函数,算是一次学习,算是一次总结,也算是一次分享。回调函数执行流程说明:fun是被调用的函数,在调用fun函数时传递一个被回调的函数callback,1、2、3、4为执行步骤,箭头指向为调用。执行流程:1)在代码中,fun首先被执行2)fun函数执行,js的执行转移到fun函数内部,fun函数内部的语句从上往下执行3)在fun函数中调用callback4)在调用fun函数时传入的函数(callback)被执行5)执行ca原创 2020-08-30 14:26:07 · 3607 阅读 · 0 评论 -
ES6箭头函数的使用
箭头函数是一种定义函数的方式,功能基本同function,它以对象字面量定义函数,相比于function表达更为简洁。特点: 表达简洁 作用域是块级,即每一对花括号就是一个作用域 使用方式示例//定义无参数函数var fun = ()=> { //todo}//定义有参数的函数varfun = (num1 )=>{ ...原创 2019-12-04 11:48:41 · 108 阅读 · 0 评论 -
JS数组常用方法及其遍历
数组是一种特殊类型的对象。在 JavaScript 中对数组使用 typeof 运算符会返回 “object”。JS数组实现了多种数据结构,它还具有栈和队列的功能。创建一个数组//1var arr = ["data1","data2","data3"];//2var arr = new Array();//arr为一个空数组var arr = new Array("data1","data2","data3");创建数组时避免 new Array(),没有必要使用 JavaScript原创 2020-07-08 15:41:06 · 334 阅读 · 0 评论 -
【Vue】学习笔记三:动画、过渡
使用过渡类名[使用第三方 CSS 动画库](https://cn.vuejs.org/v2/guide/transitions.html#自定义过渡类名)使用动画钩子函数[v-for 的列表过渡](https://cn.vuejs.org/v2/guide/transitions.html#列表的进入和离开过渡)列表的排序过渡原创 2019-11-27 09:38:13 · 176 阅读 · 0 评论 -
【Vue】学习笔记二:基本属性使用总结
`基本的代码结构`和`插值表达式`、`v-cloak``v-text`和`v-html`的区别`v-bind`——属性绑定`跑马灯效果`demo`v-on`和`事件修饰符``v-model`——`双向数据绑定`计算器demo——v-model双向数据绑定示例`v-for` & `key`——遍历/迭代`v-if` & `v-show`——显示、隐藏原创 2019-11-08 23:39:06 · 211 阅读 · 0 评论 -
【Vue】学习笔记六:watch和computed
文章目录@[TOC]`watch`属性的使用`computed`计算属性`watch`、`computed`和`methods`之间的对比watch属性的使用小demo:想要实现 名 和 姓 两个文本框的内容改变,则全名的文本框中的值也跟着改变, 一般我们可以在两个输入的文本框中绑定键盘事件,当触发键盘事件在调用拼接‘名’和‘姓’的函数即可实现。以下是watch属性的应用监听data中...原创 2020-02-02 17:50:43 · 161 阅读 · 0 评论 -
初写Vue项目时的几个注意点
在刚学Vue时我有点手足无措, 从一中编程方式中切换到另一种编程方法对大部分人来说是比较难的. 今天我作为一个学过Vue基础的人给刚学Vue的人抽离公共组件一个组件属于当前页面还是属于公共页面组件与其他组件配合使用(你暂且理解为嵌套使用)组件之间的通信项目中,组件之间的数据交换是频繁的,使用正确合理的方式可以让组件数据交换更加便捷高效,通常有这几种方式。一般来说父组件向传递的数据较多、较杂。而子组件处理完父组件传递过来的数据后可能给父组件一些反馈,总的来说把交互写好是个小难点。多页面之原创 2020-05-14 21:43:02 · 383 阅读 · 1 评论 -
【Vue】学习笔记十一:练手项目总结
文章目录项目的结构封装组件封装封装插件插件的使用心得组织接口中的数据心得出现的问题汇总CSS移动端兼容问题父子组件传值问题data、props、computed的合理使用watch、computed项目的结构[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PgpCVLX5-1580737022631)(en-resource://database/2597:0)...原创 2020-02-03 21:39:48 · 444 阅读 · 1 评论 -
【Vue】学习笔记十:Vuex——状态管理工具
文章目录Vuex状态管理是什么?管理什么状态先看一看定义的vuex基本结构官方流程图使用getters、actions的映射VuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension ,提供了诸如零配置的 ...原创 2020-02-03 12:00:22 · 420 阅读 · 0 评论 -
Nodejs10安装教程详解
在安装nodejs时装了五六遍,当时的感觉就是想拍键盘,今天写这篇博客希望安装nodejs的人少走些弯路,把时间用在学习或工作时。目录: 一、教程环境二、下载nodejs三、nodejs安装步骤四、当时安装遇到的坑原创 2019-11-27 11:52:29 · 9645 阅读 · 3 评论 -
【Vue】学习笔记一:了解和入门
什么是Vue.js为什么要学习流行框架框架和库的区别Node(后端)中的 MVC 与 前端中的 MVVM 之间的区别Vue.js 基本代码 和 MVVM 之间的对应关系Vue之 - `基本的代码结构`和`插值表达式`、`v-cloak`Vue指令之`v-text`和`v-html`Vue指令之`v-bind`的三种用法Vue指令之`v-on`和`跑马灯效果`Vue指令之`v-on的缩写`和`事件修饰符`事件修饰符:Vue指令之`v-model`和`双向数据绑定`简易计算器案例原创 2019-11-06 23:56:15 · 212 阅读 · 0 评论 -
【vue】学习笔记七:vue实例生命周期、数据方法
文章目录@[TOC]生命周期流程图创建期间的生命周期函数运行期间的生命周期函数销毁期间的生命周期函数特殊生命周期钩子常用vue实例数据与方法datapropsmethodscomponentswatch —— 侦听属性computed —— 计算属性filters私有过滤器mixins —— 混入生命周期流程图来自Vue官网:https://cn.vuejs.org/v2/guide/in...原创 2020-02-02 17:56:09 · 258 阅读 · 0 评论 -
vue中不使用v-model进行父子组件双向数据绑定
v-model数据绑定原理:v-model封装了v-bind和v-on两个指令,当值改变时首先通过v-on触发事件并改变组件的值,然后使用v-bind将输入框的值保存起来。在高版本的vue【测试为2.6+】中,不需要使用v-bind属性来保存值。样例说明:父组件data中的num1、num2绑定给了子组件,在子组件的输入框中改变子组件值,同时会利用输入框的input事件改变子组件da...原创 2020-01-14 09:59:40 · 968 阅读 · 0 评论 -
【vue】学习笔记五:路由
路由在 vue 中使用 vue-router设置路由高亮设置路由切换动效在路由规则中定义参数使用 `children` 属性实现路由嵌套命名视图实现经典布局原创 2019-12-04 17:49:59 · 178 阅读 · 0 评论 -
【Vue】学习笔记四:组件
组件全局组件定义的三种方式组件中展示数据和响应事件【重点】为什么组件中的data属性必须定义为一个方法并返回一个对象使用`components`属性定义局部子组件使用`flag`标识符结合`v-if`和`v-else`切换组件使用`:is`属性来切换不同的子组件,并添加切换动画父组件向子组件传值子组件向父组件传值使用 `this.$refs` 来获取元素和组件原创 2019-11-27 10:27:15 · 166 阅读 · 0 评论 -
【vue】学习笔记八:vue-resource 实现 get, post, jsonp请求
vue-resource插件开源地址https://github.com/pagekit/vue-resourceps:除了 vue-resource 之外,还可以使用 axios 的第三方包实现实现数据的请求之前的学习中,如何发起数据请求?常见的数据请求类型? get post jsonpJSONP的实现原理由于浏览器的安全性限制,不允许AJAX访问 协议不同、域...原创 2020-02-02 17:59:07 · 208 阅读 · 0 评论 -
【Vue】学习笔记九:ES6 Promise、axios网络请求封装
文章目录:Promise简介作用Promist的三种状态封装Promiseaxios常用网络请求方式配置项结合Promise进行网络请求封装拦截器Promise简介Promise是ES6(ES2015)中的一个非常好用的工具类。The Promise object is used for asynchronous computations. A Promise represe...原创 2020-02-03 10:20:16 · 693 阅读 · 1 评论 -
【jQuery】学习笔记(二)
jQuery学习笔记二。目录:jQuery的holdReady(boolean)方法、选择器、层级关系选择器、基于标签状态的选择器、原生选择器可以在jQuery中使用吗、jQuery中的内容选择器有哪些?使用场景是什么?、parent的方法和:parent选择器有什么区别?、、parents方法和parent有什么区别?、什么是属性?、如何操作属性?、什么是属性节点?、如何操作属性节点?、属性和属性节点的区别?、在设置属性的时候如何选择prop()或attr()、prop()方法获取和设置的区别是什么?……原创 2019-10-13 20:38:08 · 204 阅读 · 0 评论 -
【jQuery】非常适合jQuery练手的小游戏
目录前言预览HTML代码CSS代码JS/jQuery代码前言非常适合练手小游戏,主要使用jQuery实现dom操作和动画效果。通过练习这个小游戏我对JS的了解更加深入了,也熟悉了jQuery事件、动画、回调函数的应用。预览开始界面游戏简介游戏中重新开始界面HTML代码<!DOCTYPE html><html la...原创 2019-10-17 23:59:43 · 4005 阅读 · 0 评论 -
【jQuery】jQuery入口函数传入不同参数测试
也许大家每天都用jQuery,但是否分析过jQuery入口函数传入各个值后的返回值,下面是测试的过程及总结。传入""、null 、undefined、NaN、0、false 空对象,返回值均为jQuery对象jQuery.fn.init字符串,一般是选择器,返回匹配的对象(封装的jQuery对象)。HTML代码片段:会将创建好的DOM元素存储到jQuery对象中返回选择器, 会将找到的所有元素存储到jQuery对象中返回。数组, 会将数组存储的元素一次存储到jQuery对象中。原创 2019-10-13 20:55:24 · 303 阅读 · 0 评论 -
【jQuery】学习笔记(一)
jQuery学习笔记一。目录:jQuery入口函数、释放jQuery的$符、jQuery对象、什么是伪数组,伪数组的特征,与数组(Array)的区别?如何辨别真数组和伪数组?静态方法,实例方法、什么是对象的原型对象?jQuery的each()方法、jQuery中的each方法有几个形式,分别应用于什么场景?、jQuery中map()方法、jQuery中each()方法和map()方法的区别、jQuery中map()与原生JS中的map()的区别……原创 2019-10-09 22:18:01 · 152 阅读 · 0 评论 -
【jQuery】学习笔记(三)
jQuery学习笔记三。文章目录:jQuery事件、jQuery绑定事件的方式、jQuery事件的移除、注册事件、jQuery时间冒泡、功能标签的默认行为 a、button、自动触发事件trigger()、triggerHander()的区别、jQuery事件命名空间、什么是事件委托?事件委托使用的方法delegate("selector","eventType",fn)、jQuery事件、jQuery动画、jQuery动画队列、jQuery淡入淡出动画、jQuery自定义动画、在原来基础上的累加属性。原创 2019-10-16 20:18:46 · 221 阅读 · 0 评论 -
分析href、src、url的区别
href、src、URL都是用来引用的,还有CSS中的url()函数,看似他们完成的工作相同,但仔细分析是有区别的,了解他们的区别可以帮助我们更好的设计网页。原创 2019-08-26 11:38:51 · 4062 阅读 · 0 评论 -
伪元素与伪类的使用
伪元素伪类听名字可能就会产生迷惑,其实从名称上我们也可以获取一些信息,伪元素——顾名思义是一个元素,伪类——与类class有关系,不是一个元素!在CSS1和CSS2中对伪类和伪选择器没有做出很明显的区别定义,而二者在语法是一样的,都是以:开头,这造成很多人会将某些伪元素误认为是伪类,如:before,:after;而在CSS3给出的定义中,二者区别更为明显,也更容易理解。伪元素伪元素是...原创 2019-08-26 11:24:22 · 286 阅读 · 0 评论 -
清除HTML元素浮动带来的影响
一般使用浮动后都要清除,否则后面的元素可能会出现问题。清除浮动并不是指让元素自身没有浮动效果,而是消除元素浮动对其他元素的影响。清除浮动的方法有很多,方式也各有不同。清除浮动大致有两种方式:一通过添加一个元素设置属性清除;二通过设置父级元素的属性清除。原创 2019-08-26 10:47:20 · 3089 阅读 · 0 评论 -
HTML5标签和CSS选择器汇总
HTML5标签和CSS选择器汇总原创 2019-08-26 09:57:02 · 786 阅读 · 0 评论 -
id与class的区别
相同点:1)都可以用来选择元素2)都有区分元素的作用不同点:1)id唯一,类名不唯一2)一般在使用CSS渲染时使用类选择器,而在js中获取元素通常使用id3)id可用做锚点,class不可以4)在CSS中类选择器以.开头,而id选择器以#开头...原创 2019-08-26 09:41:21 · 287 阅读 · 0 评论 -
用CSS开启硬件加速来提高网站性能
你知道我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能吗?现在大多数电脑的显卡都支持硬件加速。鉴于此,我们可以发挥GPU的力量,从而使我们的网站或应用表现的更为流畅。在桌面端和移动端用CSS开启硬件加速CSS animations, transforms 以及 transitions 不会自动开启GPU加速,...转载 2019-08-26 09:32:07 · 159 阅读 · 0 评论 -
HTML元素定位方式——相对定位、绝对定位、固定定位、浮动定位
布局排版是网页设计的基础,熟练使用各种定位写起网页来会更得心应手。静态定位当添加一个HTML元素,不设置定位方式默认为静态定位(position:static),静态定位属于文档流(排列方式就像文本,一行一行排列,文字多出会换行)。相对定位相对定位(position:relative)是相对于自己之前的位置进行定位,如果不改变top、bottom、left、right与文档流元素无...原创 2019-08-26 14:23:54 · 5156 阅读 · 0 评论 -
margin的合并性
margin的合并性指上下两个块级元素的外边距会重合,而且只有上下的会出现这种合并现象,而且当两个块级元素的外边距重合时,两元素的间距是外边距大的那个元素的间距。ps:这学长普及的知识,虽然元素的上下外边距合并没什么重要的,但通这些可以看出学长对细节前段知识的掌握,吾辈仍需努力。...原创 2019-08-26 14:40:10 · 184 阅读 · 2 评论 -
CSS原理,如何解析?
我们每天都在与CSS打交道,那么CSS的原理是什么呢?10个人里面9个人都不能准确地答出来吧!一、浏览器渲染首先来回顾一下浏览器的渲染过程,先上图:正如上图所展示的,我们浏览器渲染过程分为了两条主线:其一,HTML Parser 生成的 DOM 树;其二,CSS Parser 生成的 Style Rules ;转载 2019-08-26 14:47:52 · 2092 阅读 · 0 评论 -
学习总结——网页设计最佳方式
什么是网页的最佳设计方式,每个学前端可能都会这样问自己吧,时代在进步,技术在发展,没有什么是最佳的最好的,只有相对来说比较好的。我曾经读《重构——改善既有代码》时作者在书中写到:我不能告诉你你什么时候需要重构代码,我只能以我这么多年的经验给你说一些不好代码的表现,那些代码的“坏味道”。说实话,没有人知道什么才是最佳的、怎么做才是最正确的,我也不知到怎样才算是最佳网页设计,但是通过这么多天的学习我可...原创 2019-08-26 15:37:41 · 230 阅读 · 0 评论 -
HTML基础知识总结
原创 2019-08-27 08:49:11 · 159 阅读 · 0 评论 -
一些表单设计建议
1.不确定答案可以建议用户输入,而不是让用户选择。例如,姓名、地址、电话等常用信息,使用输入的方式手机回避使用选择的方式收集更加自然且简单。2.对于容易记错的答案不妨让用户选择,此时就不适合让让用户输入,如,国家、年、月、日、星座等,采用形式可以使用单选按钮、复选按钮、列表框、下拉菜单等。3.为控件设置默认值,建议采用一些说明性的文字或常用值4.对于单选、复的选项或下拉列表框,设计控件的value值或显示值应从用户的角度考虑,应该以方便、简单、避免出现歧义或误解为基础……原创 2019-08-27 09:13:27 · 258 阅读 · 0 评论 -
CSS3@media查询的使用
MediaQueries能元素在不同的条件下使用不同的样式,使页面在不同的终端设备下达到不同的渲染效果。@media查询是CSS3新增的,比之前的media查询使时方便多了,使响应式网页设计更加方便。优点:不用创建另外的CSS文件、语法简单使用方便。缺点:浏览器支持较晚,详细支持情况请看下方表格。注意:使用Media Queries必须要使用“@media”开头,然后指定媒体类型(也可以称...原创 2019-08-27 10:45:48 · 435 阅读 · 0 评论 -
Flex布局
在我看书学习flex布局有疑惑后,在网上搜到了这篇文章,讲的很详细,一遍就差不多了就懂flex布局了,感谢原作者!上上下下读五六遍,在其中纠正了一些错别字、加粗了一些文字、添加了一些标点,会使文章读起来更顺畅些,以后要像这样写博客。转载地址:https://www.cnblogs.com/dreamperson/p/9367008.html博主主页:https://www.cnblog...转载 2019-08-27 15:24:07 · 596 阅读 · 0 评论 -
禁用a标签的单击事件响应
a标签默认有各种状态,例如:光标悬浮在a标签上时(hover)、光标按下时(active)、光标按下后即访问过(visited)、默认状态(link),a标签默认能响应鼠标单击,当光标单击是默认打开href中的链接。因为a标签特殊状态以及可以响应单击事件的原因,在js中使用onclick事件时会无效或造成标签闪烁,如果不取消a表签的单击事件,在单击a标签时、单击a标签后文字都会显示不同的颜色,这颜...原创 2019-08-24 17:34:32 · 2076 阅读 · 0 评论