自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

君非道的博客

记录前端成长之路

  • 博客(26)
  • 收藏
  • 关注

原创 快速创建 react 项目

使用Create React App脚手架快速搭建react项目,搭建之前请确保安装了nodejs和npm打开cmd或者bash等命令行,进入到你要创建项目的文件夹,执行下面命令,然后耐心等待npx create-react-app my-test // my-test是项目名称,可以修改成你想要的名字当出现下面命令时就说明项目创建成功这个时候可以看到文件夹中已经有了这个项目执行cd my-test进入项目文件夹,我是在D盘的react文件夹里创建项目的,此时看路径已经进来,可以看到后面有个

2021-10-27 14:39:26 338

原创 给伪元素传参数

基本原理:在 html 标签上添加一个属性,在伪元素的 content 后面用 attr() 取参数// html 代码<div class="test" val='参数'>这是一个div</div>// css 代码.test { position: relative;}.test::before { content: attr(val); // 通过 attr() 接收参数 color: blue; font-size: 20px; positi

2021-10-18 11:23:05 542

原创 用 jquery 或原生 js 添加 hover 属性

用 jquery 给 dom 元素添加 hover// html 代码<div class="test">请把鼠标放在上面</div>/** js 代码* hover 函数接收两个参数,这两个参数也是函数* 第一个参数是鼠标悬浮时触发,第二个参数是鼠标离开时触发*/$('.test').hover(function() { // 鼠标悬浮时触发 $('.test').css('color', 'blue')}, function() { // 鼠标离开时触发

2021-10-18 10:45:09 5658

原创 es6 class 语法(实现继承的语法糖)

es6 class 语法什么是类?使用 class 关键字定义一个类使用 new 关键字实例化一个对象constructor 方法class 与 es5 构造函数的关系1. 生成实例对象的不同方式2.类的 prototype 属性3. 调用类和调用构造函数的区别什么是类?用通俗易懂的话来说,手机就是一个类,而你手的手机就是这个类的对象;电脑是一个类,而你的电脑就是这个类的对象。类里面的属性是可以被对象继承的。类是面向对象语言的一个概念(比如java),js 中生成实例对象的传统方法是通过构造函数,然

2021-10-11 17:38:16 513

原创 vue 路由参数为 Object 时

get 类型的传参用 query 传 Object 类型的参数 // 当前页面 let data = { id: 1234, name: 'test' } this.$router.push({ path: "/addres", query: { data: data } })addres 页面用 this.$route.query.data 接收参数当参数.

2020-08-11 11:49:17 1194

原创 vue 路由传参的两种方式

vue 路由传参虽然有好几种写法,但本质上分为两种,一种是 get 类型的传参,一种是 post 类型的传参。1. get 类型的传参get 类型传参的三种写法:this.$router.push('/addres?id=12345') this.$router.push({ path: "/addres", query: { id: 12345 } }) this.$router.push({ n

2020-08-11 10:30:56 2365

原创 快速入门 vuex 状态管理

最近在项目中遇到了 vuex,大概整理了一下。项目的登录页面和登出页面调用了写在 vuex 里面的登录登出方法,vuex 里面判断了权限相关。因为是不同页面共享状态,所以用 vuex 比较方便。 如果是同页面,那还是父子组件传值更好用。什么是 vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。采用集中式管理组件的状态。核心概念stategettermutat...

2020-03-06 17:46:08 216

原创 简单通俗的 HTTPS 原理

1. 什么是 HTTPShttps 的概念好多人懂,但有些人(比如以前的我)都是云里雾里的,当别人问起来,明明知道却不知怎么说,也只能简单的回答一下流程。其实 https 涉及到了好多,比如网络,浏览器,操作系统,本文也是以最容易理解的方式来讲,如有错误,欢迎提出。http 的全称是超文本传输协议https 的全称是超文本传输安全协议简单来说就就是浏览器和服务器之间通讯需要遵守的规则...

2020-03-04 16:12:27 289

原创 vue 中的数组变动

由于 JavaScript 的限制, Vue 不能检测以下变动的数组:当你直接设置一个项的索引时,例如: vm.items[indexOfItem] = newValue当你修改数组的长度时,例如: vm.items.length = newLength为了避免第一种情况,以下两种方式将达到像 vm.items[indexOfItem] = newValue 的效果, 同时也...

2019-01-16 10:57:47 1097

原创 vue 动态组件

动态组件就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示。在挂载点使用 component 标签,然后使用 is =“组件名”,它会自动去找匹配的组件名,如果有,则显示;看例子:&lt;!-- html部分 --&gt;&lt;div id="app"&gt; &lt;component is="one"&gt;&lt;/component&...

2019-01-11 16:41:10 9976 2

原创 最简单易懂的 vue 插槽教程

一个 slot 标签就是一个插槽,如果没有内容传入,则显示 slot 标签原有的内容,如果有内容插入,则显示插入的内容。匿名插槽(slot 不带 name 属性),看下面例子:&amp;amp;lt;!-- html部分 --&amp;amp;gt;&amp;amp;lt;body&amp;amp;gt; &amp;amp;lt;div id=&amp;quot;app&amp;quot;&amp;amp;gt;

2019-01-09 16:28:42 1852

原创 git 切换分支相互影响的问题

今天爬了一个坑,我在开发分支上做了修改,然后切换到其他分支后发现其他分支也做了修改。原因:如果当前分支所做的修改没有提交的话去其他分支也会看到相同的修改,所以解决这个问题有两个办法。解决办法:用 git add和 git commit提交修改,只要用 git status 检查工作区和暂存区是干净的就可以了。那如果我当前分支上的工作还没做完,不能提交,但又想去其他分支,这时候可以把...

2019-01-04 17:12:14 7798 4

原创 vue 组件中的 data 为什么必须是函数

在说之前我先讲讲深拷贝和浅拷贝在 javascript 里面简单数据类型的拷贝一般使用浅拷贝,复杂类型一般使用深拷贝,请看例子var a = 0;var b = a;b = 1console.log('a···' + a,'b···' + b) //a···0 b···1可以看到我把 a 赋值给了 b ,修改了 b 的值后 a 的值没有变var a = { ...

2018-12-26 23:44:31 7673 3

原创 vue 中 computed 和 method 的区别

计算属性的关键字 computed计算属性用来处理一些逻辑问题很有用,例如给字符串中每个字符中间加符号 -&lt;div id="app"&gt; &lt;p&gt;原始字符串: {{ message }}&lt;/p&gt; &lt;p&gt;加了字符 - 的字符串: {{ addMessage }}&lt;/p&gt;&lt;/div&gt; &lt;sc

2018-12-17 17:42:59 753

原创 使用 vue-lic3 创建 vue 项目

使用 vue-lic3 创建 vue 项目在使用 vue-lic3 创建 vue 项目工程之前首先要确保已经安装了 nodejs,webpackvue-cli 是 vue 的脚手架,可以用配置好的模版快速搭建起一个项目工程,不用自己去配置 webpack 配置文件的基本内容。安装 vue-cli 3.0 版本:通过 npm install -g @vue/cli或 yarn global ...

2018-12-14 16:28:44 2868

原创 git-flow工作流程

git-flow模式会预设两个主分支在仓库中,所有的开发工作都围绕着这两个分支进行,这两个分支也被称为长期分支,它们会存活在整个项目的生命周期中。gitflow工作流程历史分支master 这个分支是用来发布最终产品的,我们不能在master上工作,也不能直接提交修改到master分支上develop 这个分支是进行新功能开发的基础分支,也汇集了所有已经完成的功能功能分支功...

2018-12-11 09:30:52 361

原创 git学习总结

工作区、版本库和暂存区的概念工作区:.git目录所在的文件夹就是工作区版本库:.git文件夹就是git的版本库暂存区:暂存区和分支都在版本库里面。把修改往版本库里面添加的时候是分为两步的,第一步git add把修改添加到暂存区,第二部git commit把暂存区的修改提交到当前分支git常用命令git init 初始化git仓库git add 将修改添加到暂存区git comm...

2018-12-11 09:11:25 145

原创 客户端存储的六种形式

本内容参考和引用了javascript权威指南

2018-10-13 18:47:14 985

原创 2019小米(武汉)校招前端开发面试凉经

小米前端开发面试凉经1.自我介绍2.说一下盒模型(注意说清楚IE盒模型和W3C标准盒模型的区别)3.行内标签和块级标签都有哪些,有什么不同4.HTML5新增标签有哪些5.怎么用CSS实现一个三角形6.用javascript实现斐波那契数列(现场手撕代码)7.说一下浏览器缓存8.输入一个url按下回车后,先会检查是否有本地缓存,如果有则返回本地缓存,那么如果服务器端的信息更新了,通...

2018-10-13 00:31:41 3492 3

原创 排序算法---选择排序(javascript实现)

排序算法—选择排序(javascript实现)1.选择排序步骤从数组中选出值最小(大)的元素放在数组的起始位置从剩下的元素中找出最小(大)的放在第一个元素后面重复上一个步骤,直到所有元素排序完成2.代码实现function selectSort (arr) { var minIndex, tep; for(var i = 0; i &lt; arr.length - 1; ...

2018-10-10 01:09:53 188

原创 CSS实现三角形

CSS实现三角形的思想:div的宽高为0 div的边框三边透明,一边有颜色接下来我会将原理一步一步实现,这样更易于理解。首先创建一个div,给每条边框设置不同的颜色#box { width: 100px; height: 100px; border: 50px solid; border-color: darkblue red salmon de...

2018-10-03 00:03:22 241

原创 快速理解W3C盒模型和IE盒模型的区别

1、CSS盒模型概述CSS 盒模型规定了元素框处理元素内容(content)、内边距(padding)、边框 (border)和 外边距 (margin)的方式. CSS盒模型分为W3C盒模型和IE盒模型 2、通过代码直观感受以下两者区别定义两个div&lt;div id="border-box"&gt;我是IE盒模型(border-box)&lt;/div&gt;&lt...

2018-10-02 20:41:51 2347

原创 排序算法---快速排序

排序算法的基本思想:在数组中选择一个元素作为“基准”。 把所有小于基准的元素放到基准的左边,把所有大于基准的元素放到基准的右边。 使用递归,对左右两个子集重复1、2步骤。 var quickSort = function(arr) { if (arr.length &lt;= 1) { return arr; } var left = []; var right...

2018-10-02 04:38:14 142

原创 javascript数组去重

方法一、利用indexOf()方法indexOf()方法可以用在字符串和数组上,用在字符串上返回某个指定的字符串值在字符串中首次出现的位置,用在数组上返回某个指定数组值在数组中首次出现的下标。var arr = [1,2,2,2,3,3,4];function unique(arr) { var result = []; //用于存储去重后的数组 for(var i =...

2018-10-01 03:38:25 1086

原创 镜像(反转)二叉树

操作给定的二叉树,将其变换为源二叉树的镜像。思路就是调换左右子树,然后使用递归。/* function TreeNode(x) { this.val = x; this.left = null; this.right = null;} */function Mirror(root) { if(root === null) { retur...

2018-09-13 17:06:58 327

原创 一道关于链表的编程题,输入一个链表,输出该链表中倒数第k个结点。

这道题有很多解法,我觉得最经典的一个解法是用两个指针做成一个K长度的尺子,然后让这个尺子在链表上从头到尾移动,当尺子末端到达链表末端的时候,尺子首端指的就是倒数第K个节点。例如:有链表   a b c d e f要拿到倒数第三个节点(也就是d),则可以用两个指针做一个长度为三的尺子(把下划线看作长度为3的尺子),尺子首端是a,末端是c,然后让这个尺子往后移动,当尺子末端到达 f 的时候,尺...

2018-08-19 18:54:31 1051

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除