从零开始的前端程序员
从零开始
那个小屋
这个作者很懒,什么都没留下…
展开
-
Flex布局(弹性盒子布局)
Flex布局(弹性盒子布局)详情:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html开启 flex 布局:display:flex;行内元素开启flex布局:display: inline-flex;容器属性flex-direction 决定主轴方向flex-wrap 定义项目在一条主轴上排列不下该如何排列flex-flow 是flex-direction和flex-wrap的复合写法justify-content 定义项目原创 2020-09-17 20:45:36 · 309 阅读 · 0 评论 -
requestAnimationFrame 客户端存储 历史记录 worker
requestAnimationFrame1、页面刷新前执行一次2、1000ms 60fps -> 16ms3、cancelAnimationFrame4、用法和 setTimeout类似5、兼容性requestAnimationFrame(f)cancelAnimationFrame(id)//requestAnimFramewindow.requestAnimFrame = (function(){return window.requestAnimationFrame ||w原创 2020-09-06 23:02:17 · 158 阅读 · 0 评论 -
Git日常应知应会
初始化git init(初始化git)vue-cli创建项目时可选择自动初始化git status (检查)git add .(全部提交到本地仓库缓存区)git commit -m "提交说明" (全部保存到本地仓库)再次git status没问题就进行下一步创建远程仓库GitHub/码云关联本地与远程仓库(远程仓库地址:关联到哪个地址上传到哪里)保存提交到远程仓库开新分支每次更新项目就创建一个新的分支git checkout -b newname(分支名)查看当前所有分支git原创 2020-09-06 22:26:36 · 78 阅读 · 0 评论 -
HTML5应知应会
HTML5什么是HTML5?HTML5 的概念与定义定义:HTML5 定义了 HTML 标准的最新版本,是对 HTML 的第五次重大修改,号称下一代的 HTML两个概念:是一个新版本的 HTML 语言,定义了新的标签、特性和属性拥有一个强大的技术集,这些技术集是指: HTML5 、CSS3 、javascript, 这也是广义上的 HTML5HTML5 拓展了哪些内容语义化标签本地存储兼容特性2D、3D动画、过渡CSS3 特性性能与集成HTML5 新增原创 2020-09-04 22:48:01 · 140 阅读 · 0 评论 -
CSS3应知应会
CSS3兼容手册:http://www.runoob.com/cssref/css3-browsersupport.html兼容写法:新增样式:圆角、阴影border-radius: 20px; box-shadow: 10px 5px 4px red;渐变背景色、断点换行、开发者自备字体线性渐变:linear; background: linear-gradient(90deg,red 10%, green 100%);径向渐变:radial; background: radial-gr原创 2020-09-04 22:47:01 · 141 阅读 · 0 评论 -
CSS应知应会
css的作用添加页面样式,美化页面css的引入方式行间样式、内嵌样式、外链样式css选择器基础选择器ID选择器:# 权重:100类选择器:. 权重:10元素选择器:div 权重:1通配符选择器:* 权重:0css复合选择器后代选择器 ul li子元素选择器 ul>li交集选择器 li.red 选中即是li元素,又带有red类名的元素并集选择器 div, ul, .red 同时选中这三个元素伪类选择器 :hover链接伪类选择器a:lin原创 2020-09-04 11:33:13 · 434 阅读 · 0 评论 -
HTML应知应会
web标准构成:解构、样式、行为HTML超文本标记语言<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body></html>标签元素双标签单标签标签语义化常用标签排版标签:h1-h6 p <原创 2020-09-03 22:56:46 · 160 阅读 · 0 评论 -
jQuery应知应会
什么是jQuery?jquery是JavaScript的一个库,是一个封装好的特定的集合主要是为了快速操作DOM,里面基本上是函数方法移动端是用zepto,简化版的jquery,新增了一些移动端api它的宗旨是“写的更少,做的更多”“write less, do more”jQuery的优点是什么?轻量级的库只有几十kb跨浏览器兼容链式编程,隐式迭代对事件、样式、动画支持,大大简化了DOM操作支持第三方插件:如树形菜单、日期控件、轮播图免费、开源如何使用jQuery?页面引原创 2020-09-03 17:51:04 · 175 阅读 · 0 评论 -
vue基础组件的自动化全局注册
vue基础组件的自动化全局注册可能你的许多组件只是包裹了一个输入框或按钮之类的元素,是相对通用的。我们有时候会把它们称为基础组件,它们会在各个组件中被频繁的用到。所以会导致很多组件里都会有一个包含基础组件的长列表:import BaseButton from './BaseButton.vue'import BaseIcon from './BaseIcon.vue'import BaseInput from './BaseInput.vue'export default { compon转载 2020-08-12 15:05:18 · 317 阅读 · 1 评论 -
简单模拟Vue虚拟DOM
简单模拟Vue虚拟DOM <script> // 简单模拟Vue虚拟DOM function vElement(tageName, prop, children) { //判断调用者是否为vElement的实例 if(!(this instanceof vElement)) { return new vElement(tageName, prop, children)原创 2020-08-10 17:36:17 · 199 阅读 · 0 评论 -
vuex 数据管理
数据管理 {ignore}在实际的开发中,经常会遇到多个组件共享一个数据的场景面对这种场景,会产生至少以下两个问题:多个组件如何共享同一份数据?如果某个组件修改了数据,如何让其他组件知道?面对这种问题,一个可行的解决办法,就是让数据提升所谓数据提升,就是把数据提升到更加顶层的组件,让顶层的组件通过属性下发数据,而当组件想改变数据的时候,又通过事件一层层向上传递使用这种方式,虽然可以解决问题,但是带来了更多的问题:书写特别繁琐依赖极其混乱:某些组件本来并不需要一些数据,但是由于它的原创 2020-08-01 15:57:12 · 329 阅读 · 0 评论 -
vue路由 vue-router 应知应会
vue路由一个站点由很多页面组成,需要在不同的页面之间切换在vue中,可以把每个页面看作是一个组件,页面的切换,实际上就是组件的切换显示除了可以手动的实现组件切换,还可以利用vue路由安装vue路由的核心功能,就是根据不同的页面地址,切换到不同的组件进行显示要实现这一点,需要用到vue-router库在页面上引入vue-router库创建一个VueRouter对象vue-router库提供了一个构造函数VueRouter,通过它可以创建一个对象var router = new Vu原创 2020-08-01 15:54:03 · 211 阅读 · 0 评论 -
vue组件事件、组件插槽、v-model
深入组件 {ignore}属性约束参考官网描述组件事件组件之间经常都会发生消息的传递,我们称之为组件通信prop是组件通信的一种,消息从父组件传递到子组件但还有一些场景,就是子组件中发生了一件事,可是它没有能力处理这件事,需要使用它的人来处理,此时,就需要事件 event例如,倒计时组件停止了,可是停止之后干嘛呢?在不同的场景要做不同的事情,可能什么也不做,可能在页面上显示倒计时结束了,也可能把计时器组件销毁掉,也可能另一个组件会变化?无论是哪种情况,都超出了计时器组件的控制能力所以,计时原创 2020-07-30 12:53:36 · 310 阅读 · 0 评论 -
vscode中,vue模板字符串``中自动闭合html标签及提示
vscode中,vue模板字符串``中自动闭合html标签及提示按F1打开搜索栏并清空输入:settings.json添加如下代码即可 "emmet.triggerExpansionOnTab": true, "emmet.showAbbreviationSuggestions": true, "emmet.showExpandedAbbreviation": "always", "emmet.includeLanguages": { "javascript":原创 2020-07-29 00:40:28 · 2748 阅读 · 3 评论 -
vue组件
vue组件知识准备ES6的模块化知识ajax网络请求fetch apipromise apiasync awaitajax请求地址:http://yuanjin.tech:5005/api/movie?page=页码&limit=页容量组件概念一个完整的网页是复杂的,如果将其作为一个整体来进行开发,将会遇到下面的困难代码凌乱臃肿不易协作难以复用vue推荐使用一种更加精细的控制方案——组件化开发所谓组件化,即把一个页面中区域功能细分,每一个区域成为一个组件原创 2020-07-27 17:13:17 · 138 阅读 · 0 评论 -
vue入门
vue入门前言能够使用vue开发大部分应用的常见功能对vue的核心原理有一定认识需要的知识html+css知识javascript知识部分ES6知识(本节课需要用到字符串模板、速写方法、速写属性)vue是什么?vue的官网:https://cn.vuejs.org/vue是一个渐进式的javascript框架渐进式:vue可以和其他传统(比如jquery)前端技术融合,这意味着你可以向已有工程中逐步植入vue,而无须全部重写javascript框架:基于JS语言书写而成的框架原创 2020-07-27 00:36:47 · 114 阅读 · 0 评论 -
主流浏览器及其内核
主流浏览器及其内核IE TridentChrome Webkit/blinkSafari WebkitFirefox GeckoOpera Presto原创 2020-07-27 00:32:04 · 69 阅读 · 0 评论 -
date( )日期对象 定时器
date( )日期对象 定时器var date = new Date( );var time = date.getTime( );/new Date( ).getTime( );定时器定时器是全局对象window上的方法,内部函数this指向window //每隔1000毫秒就执行一次内部代码 setInterval(function () {}, 1000); var timer = setInterval(function () {原创 2020-07-05 22:41:53 · 318 阅读 · 0 评论 -
ES5严格模式
ES5严格模式浏览器基于es3和es5的新增方法执行js代码es3和es5产生冲突的部分如何解决?默认使用es3方法,主动开启es5严格模式后,它们的冲突部分使用es5方法启用es5严格模式//写在页面的最顶端,启动的是全局es5严格模式//写在函数内部的最顶端,启动的是局部es5严格模式(推荐)“use strict”;不再兼容es3的一些不规则语法。使用全新的es5规范就是一行字符串,不会对不兼容严格模式的浏览器产生影响不支持 with , arguments.callee , fu原创 2020-07-05 22:40:13 · 104 阅读 · 0 评论 -
代码调试 try....catch 错误信息
代码调试 try…catch 错误信息//在try里面发生错误,不会执行错误后的try里的代码,try外面代码继续执行//try里代码不出错catch里代码不会执行,出错则执行catchtry{ console.log('a') console.log(b) console.log('c')}catch(e) { //error error.message error.name ---> errot console.log(e.name + '' + e.message);}con原创 2020-07-05 22:38:32 · 614 阅读 · 0 评论 -
对象、对象枚举、包装类
创建对象1.对象字面量/对象直接量var obj = {key : value,name : ‘king’,}2.构造函数系统自带的构造函数 new Object( )var obj = new Object( );obj.name = ‘king’;obj.age = 20;自定义构造函数 名字使用大驼峰 function Car(color) { this.color = color; this.name = 'BMW原创 2020-07-05 22:37:14 · 140 阅读 · 0 评论 -
数组、类数组、typeof 类型转换
数组的定义字面量 var arr = [1,2,3,a,g,d,first,undefined…];构造方法 var arr = new Array(length/content);数组的读写arr[num]arr[num]数组中常用方法改变原数组 在原数组上操作.push(num1,num2,num3…) 在数组的最后添加数据.pop( ) 把数组最后一位剪切.shift( ).unshift(num1,num2,num3… ) 在数组的前面添加数据.reverse( ) 将该数组原创 2020-07-05 22:32:18 · 948 阅读 · 0 评论 -
if、switch与for 三目运算符
if判断语句 if (条件) { 满足条件执行的语句 } else if 要条件互斥 if (条件) { 满足条件执行的语句 } else if (条件) { 满足条件执行的语句 } else { 以上条件都不满足时执行的语句 }弹窗输入框: var n = parseInt(window.prompt(‘inpu原创 2020-07-05 22:25:29 · 486 阅读 · 0 评论 -
JS克隆
克隆深度克隆遍历对象 for(var prop in obj)判断是不是原始值 typeof() object判断是数组还是对象 instanceof toString constructor建立相应的数组或对象递归 function deepClone(origin, target) { var target = target || {}, toStr = Object.prototype.toString,原创 2020-07-05 22:17:26 · 114 阅读 · 0 评论 -
this、arguments call 和 apply
this函数预编译过程 this ——> window全局作用域里 this ——>windowcall/apply 可以改变函数运行时this指向obj.func( ); func( )里面的this指向objargumentsarguments.callee //找到函数的引用 就是函数的名字func.callercall 和 apply 改变this指向改变this指向call和apply的区别是传参列表不同call 需要把实参按照形参的个数传进去apply 需要传原创 2020-07-05 22:13:50 · 149 阅读 · 0 评论 -
闭包、作用域、作用域链、立即执行函数
闭包、作用域、作用域链、立即执行函数js运行三部曲:通篇扫描 语法分析任何未经声明就赋值的变量和全局变量都归window所有预编译预编译发生在函数执行的前一刻预编译四部曲:函数创建AO 全局创建GO 过程一样创建AO对象(AO执行期上下文)找到形参和变量声明,将它们作为AO属性名,值为undefined将实参和形参统一在函数体里找函数声明,值赋予函数体解释执行作用域、作用域链[[scope]]指的是作用域,其中储存了运行期上下文的集合。每个js函数都是一个对象,就有些可以访问有些原创 2020-07-05 22:11:08 · 140 阅读 · 0 评论 -
命名空间
命名空间管理变量,防止污染全局变量,适用于模块化开发。 var init = (function () { var name = 'abc'; function callName() { console.log(name); } return function () { callName(); }原创 2020-07-05 22:01:22 · 68 阅读 · 0 评论 -
原型、原型链、继承
原型、原型链、继承原型定义: 原型是function对象的一个属性,它定义了构造函数制造的对象的公共祖先,它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象,可以继承该原型的属性和方法。原型也是对象。利用原型的特点和概念,可以提取共有属性。对象如何查看原型 ——> 隐式属性 __proto__对象如何查看对象的构造函数 ——> constructor原型链原型链的构成原型链上属性的增删改查绝大多数对象的最终都会继承自Object.prototypeObjec原创 2020-07-05 22:00:05 · 138 阅读 · 0 评论 -
函数function
函数function定义函数://函数命名规则小驼峰式,形参function fun(参数1,参数2,…) {//函数体};函数表达式://匿名函数表达式(函数表达式)var fun = function ( ) { }//命名函数表达式var fun = function abc( ) { }函数调用://实参fun(参数1,参数2,…);参数//形参function sum(a,b ) {//arguments保存实参,sum保存形参,实参形参不用一样多if(sum.原创 2020-07-05 21:53:16 · 318 阅读 · 0 评论 -
JavaScript
JavaScriptJavaScript是一种解释性脚本语言(代码不进行预编译)。主要用来向HTML页面添加交互行为。变量(variable)声明变量 var a;变量赋值 a = 100;打印到页面 document.write(a);//100原始值 stack栈 先进后出number string boolean undefined null引用值 heap堆array object function … date RegExpjs运算符+ - * / % = ( )字符串原创 2020-07-05 21:45:14 · 265 阅读 · 0 评论 -
css层叠样式表
css层叠样式表引入方式及其权重: 行间样式(1000)>内嵌式样式>外联样式选择器及其权重(权重是256进制)!important(Infinity)>ID选择器(100)>class选择器(10)>标签选择器(1)>通配符选择器(0)属性选择器=class选择器=伪类选择器父子选择器 div span {};直接子元素选择器 div > span {};并列选择器 div.demo {};分组选择器 div,span {};伪类选择器 a:h原创 2020-07-05 21:41:14 · 128 阅读 · 0 评论 -
HTML
HTML行、块元素通过display:inline;/block;/inline-block;属性可以相互转换所有带有inline属性的元素都有文字特性块级标签:div p ul ol li h1-h6 table form body //独占一行可指定宽高行级标签:span a strong em del //内容撑起盒子不可指定宽高换行符:<br>分割线: <hr>html编码: &;空格:小于号:<大于号:>a标签上属性在新页面打开链原创 2020-07-05 21:32:28 · 96 阅读 · 0 评论