- 博客(28)
- 收藏
- 关注
RSS订阅原创 Vue3入门01
Vue3入门01本文章通过简单案例来学习Vue3的组合API，了解Vue3的新特性以及使用方法，本文做个人学习用途，不参与商业用途。参考链接：https://composition-api.vuejs.org/zh/setup函数setup 函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点。1.函数调用时机创建组件实例，然后初始化 props ，紧接着就调用setup 函数。从Vue2.x的生命周期钩子的视角来看，它会在 beforeCreate 钩子之前被调用
2020-07-26 17:18:09
329
原创 Vue3入门0：环境搭建
Vue3入门：环境搭建在Vue3Beta测试阶段，想体验下Vue3新语法，尝试自己写demo，可通过这种方式搭建。1.通过命令行安装Vue CLI。npm install -g @vue/cli版本过低可能不行，请安装最新版本2.在合适的目录使用命令行 vue create xxxxx来新建项目vue create hello-world3.在新创建好的项目目录使用命令行 vue add vue-next 完成vue3环境搭建vue add vue-next4.可通过package.
2020-07-26 17:17:55
489
原创 ES6class-构造函数的另一种写法2
1.静态方法类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。例子1:项目中的应用场景,工厂模式当我们需要按需获得需要的构造函数时,我们可以写一个js文件统一管理,在该js文件中导入各种构造函数的js,通过该类的方法来返回需要的构造函数.demo代码: clas...
2019-01-23 23:30:51
319
原创 ES6class-构造函数的另一种写法1
Class基础使用JavaScript 语言中，生成实例对象的传统方法是通过构造函数。在ES6中，提供一种新的方式 class (类)来实现。基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。现在公司用的这种方式，感觉语义是清晰了很多，现在闲暇之余整理一下，免得写代码的时候卡...
2019-01-20 13:01:16
763
原创 JavaScript内存管理与垃圾回收
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Memory_Management内存生命周期不管什么程序语言，内存生命周期基本是一致的：分配你所需要的内存使用分配到的内存（读、写）不需要时将其释放\归还所有语言第二部分都是明确的。第一和第三部分在底层语言中是明确的，但在像JavaScript这些高级语言中，大部分都是隐...
2018-12-14 09:58:06
250
原创 git基础使用笔记
git使用笔记前言@author: zengjiahao@date: 2018/10/28摘取自廖雪峰的官方文档参考地址：https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/00137396287703354d8c6c01c904c7d9ff056ae23da865a00...
2018-11-08 15:54:03
375
原创 Vue生命周期图示
生命周期图示:https://cn.vuejs.org/v2/guide/instance.html#生命周期图示生命周期钩子:https://cn.vuejs.org/v2/api/#选项-生命周期钩子
2018-11-03 21:28:49
2936
1
原创 基于Vue与jQuery模拟饿了么点餐Demo
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&am
2018-11-02 01:35:25
1016
原创 谷歌浏览器chrome的vuejs devtools 插件的安装
1 . 下载chrome扩展插件。在github上下载压缩包并解压到本地，github下载地址：https://github.com/vuejs/vue-devtools记得切换至master分支2. 使用nodejs安装下载完成后打开命令行cmd进入vue-devtools-master文件夹执行 npm install或者cnpm install推荐cnpm install3. ...
2018-10-30 23:55:47
766
原创 nodejs爬网页图片
参考链接：https://segmentfault.com/a/1190000012412007该示例通过nodejs爬取网页图片相关模块：nodejs核心模块https fs第三方模块cheerio类似jquery写法获取所得页面dom元素request发送request请求原理流程：先向服务器发送请求，获取到网页的html对网页html做处理，获取到标题的文本和图片的...
2018-10-29 23:57:33
1195
原创 JavaScript基础整理
JavaScript基础整理前言@author: zengjiahao@date: 2018/10/21内容目录Js基础-01(变量,数据类型,运算符,表达式,Math高级函数)1.js入门概念1.前端三老铁 HTML：确定网页的结构 CSS：确定网页的样式 JavaScript(js):确定网页的行为(交互)2.js语言组成 ECMAScript 确定js的语...
2018-10-21 22:32:26
221
原创 CSS基础笔记
CSS基础整理前言@author: zengjiahao@date: 2018/10/13内容目录文章目录CSS基础整理前言内容目录@[toc]CSS3入门及提高01（样式表、字体、选择器）1.掌握三种css导入方式的优缺点2.字体样式的设置3.掌握字体的连写设置4.四种基础选择器的掌握5.后代选择器的掌握6.子代选择器的掌握7.熟悉CSS的书写规则CSS3入门及提高02（三大特性...
2018-10-15 19:21:32
267
原创 Html知识点整理笔记
Html基础整理前言@author: zengjiahao@date: 2018/10/11内容目录文章目录Html基础整理前言内容目录@[toc]Html5入门及基础01（网页、基础标签、路径）1.web的三大结构组成2.标签的分类与关系3.h系列标签4.p - 段落标签5.文本格式化标签(b、u、i、s)6.标签的属性7.img标签的使用8.a标签的使用9.相对路径的掌握Htm...
2018-10-12 00:59:59
486
原创 canvas入门笔记
canvas绘制平行线以下是绘制平行线的例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s
2018-10-09 11:23:37
324
原创 3D盒子效果以及遇到的bug
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2018-09-16 11:07:26
427
原创 有道云笔记修改背景色和背景图片
因为为了方便,博主还是用了下市面上的笔记软件,毕竟客户端用的还是舒爽一点.最近几个月用了有道云笔记来整理自己的笔记. 但是叻,有道云笔记的产品经理真的不是很懂用户体验,最近一次更新,一进去,整个界面都白的不行,很伤眼睛,笔记中也没有什么夜间模式什么的,仅提供了修改纸张模板,有些还需要升级会员才给用. 毕竟用了几个月,暂时还是先凑合使用一下,毕竟里面的搜索还是很方便的.那么,为了保护自己的眼睛,...
2018-09-01 13:29:25
15056
1
原创 web版2048实现
今天写一写2048小游戏的实现思路.先看效果图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>2048</title></head><lin
2018-08-25 21:56:50
3021
1
原创 原生js简单实现贪吃蛇
js写个简单的贪吃蛇案例,用于复习一下js的原型链呀还有闭包沙箱知识等.<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>标题</title> <style>
2018-08-22 21:44:54
842
1
原创 网站的放大镜实例
本文介绍一下电商网站用的比较多的案例,放大镜案例,先来看看效果吧.需求分析:当鼠标移入进小盒子的时候即左边的盒子,显示出遮罩层还有大盒子,大盒子会出现遮罩层遮挡的部分,达成一个放大的效果当鼠标在小盒子里移动时,大盒子里显示的图片对应的会跟着改变.那我们该如何实现这个效果呢?其实呢,这个案例就是对js事件,还有一些offset家族还有事件对象的三大坐标系(screen,clien...
2018-08-21 16:50:23
337
原创 点餐选择框实例（全选、反选的运用）
/*需求分析：（1）点击上方选择框，让下方所有选择框状态与上方选择框一致（2）点击下方选择框 * 如果所有的选择框都是选中状态，上方选择框选中状态 * 反之，只要有一个选择框不是选中状态，上方选择框未选中状态 思路分析： * 1.获取元素 * 2.注册事件 * 3.事件处理 *//*原生js实现*/&lt;!DOCTYPE html&g...
2018-08-18 02:16:27
329
原创 原生js方式实现全选反选
/**复习一下：原生js的一些知识，全选反选虽然是简单的案例，但是很多地方都能用到。先复习下原理知识点，后面再写一个点餐选择框实例**//**原生js /*需求分析： * （1）点击全选，所有的选择框都是选中状态 * (2)点击全不选择，所有的选择框都是未选中状态 * （3）点击反选，所有的选择框选择状态与自身当前状态相反 /* 思路分析: ...
2018-08-18 00:56:13
3858
原创 使用jQuery实现旋转木马效果
/*该篇博文介绍一下旋转木马的做法,废话不多说,先来看看我们需要实现的效果*/![旋转木马效果](https://img-blog.youkuaiyun.com/20180816205844357?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqaHpqaDg5Mw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA=...
2018-08-16 21:38:03
2659
原创 网站轮播图的实现-平移版
/*关于轮播图，相信大家都不陌生，各大网站上都有它的身影。*那么我们如何实现这样一个东西呢？*希望这篇博文能帮到你*//*上图就是我们今天需要实现的效果先来确认一下我们的需求：需求1：鼠标移入轮播图，显示上一页，下一页的箭头，鼠标移出消失需求2：点击上一页，下一页实现图片切换，导航栏的数字效果跟着变化需求3：点击导航页码，也可以实现图片切换需求4：让他实现自动轮播，鼠标移...
2018-08-16 01:46:41
1832
1
原创 js预解析机制
/*1.默认情况js代码从上往下执行 ----不严谨2.预解析：js编译器在从上往下执行代码之前会把代码看一眼，在预解析的过程中会进行变量的提升3.变量的提升：js在执行代码之前会把变量的声明提升到当前作用域的最顶端 * a.把var变量声明提前，只是声明提前，赋值还是在原地 * b.函数的声明也会提升4.预解析的作用（意义）：让函数在任何地方都可以被调用...
2018-08-15 17:48:13
264
原创 关于js的变量作用链
/*作用域链由来：默认情况下，全局作用域成为0级链，函数可以开辟一个局部作用域，而函数内部又可以声明函数形成新的作用域，以此类推，就形成了作用域链变量在作用域链的访问规则：就近原则 * 当在一个作用域中访问变量时，首先在自身当前作用域寻找变量的声明，如果有声明访问的就是自身作用域的变量 如果没有声明，就在父级作用域中寻找声明，如果没有继续往父级找，一直找到顶级链，如果还没有程序...
2018-08-15 17:37:39
156
原创 开关思想
/*开关思想1.当某种情况的结果只有两种情况（开关思想，声明一个布尔类型的值表示开关）2.随便假设开关一种状态3.验证你的状态 *//*下面以数组去重为例*/<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&
2018-08-15 17:25:31
861
原创 冒泡算法分析
/*冒泡排序核心原理：数字中相邻的两个元素比较大小，然后交换位置冒泡法排序是固定的三个步骤： * 1.外层循环决定比较的轮数： arr.length - 1 * 2.内层循环决定每一轮比较的次数 ： 内层循环次数 = arr.length - 1 - i * 3.比较大小，交换位置/*外层循环：比较的轮数 arr.length-1内层循环：决定每一轮比较的次数...
2018-08-15 17:20:02
583
原创 offset家族与scroll家族
/*1.复习：1.offset家族:获取元素自身的真实宽高和位置（a.获取number类型 b.只能获取不能设置） * offsetWidth/Height:获取元素自身真实的宽高（width + border + padding） * offsetParent: 获取元素最近的定位父级 * offfsetLeft/Top：获取元素自身的左/上外边框与定位父级的左/上内边...
2018-08-15 16:30:02
337
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人