自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

非凡主力

为了祖国的复兴而读书,嘻嘻

原创 vue项目中使用swiper插件

先说说在vue中如何引用swiper1.npm命令安装swipernpm install swiper --save-dev2.在需要用到swiper插件的组件中引入swiper<script>import Swiper from "swiper";</script><style lang="scss" scoped>@import "../....

2020-04-28 22:12:02 282

原创 vue 一级路由二级路由 父子路由高亮

一级路由<template> <div id="app"> <div> <router-link to="/Home">Home</router-link>| <router-link to="/about">About</router-link> </div&g...

2020-04-26 23:43:41 242

原创 配置淘宝镜像

1.使用我们定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:npm install -g cnpm --registry=https://registry.npm.taobao.org2.把npm的register给永久设置过来就好了,这样使用cnpm或者npm就没差别了。(可选可不选)npm config set registry https://regist...

2020-04-25 18:24:13 101

原创 元素 居中 弹出框

实现元素垂直居中的方法很多,相信大家都能说出几种。相对于PC端,移动端的方法会更多点,平时在网上收集了一些,在此贴出来分享给大家,仅供参考。方法1:table-cellhtml结构<div class="box box1"> <span>垂直居中</span></div>CSS.box1{ display: ta...

2020-04-24 22:17:22 43

原创 webpack 入门教程详细教程

webpack中文网:https://www.webpackjs.com/一、webpack是什么? 4.xwebpack是一个现代javascript应用程序的静态模块打包器(module bundler)。webpack简单的说一个模块打包器。二、为什么要使用webpack?webpack能解决什么问题?现在很多的网页都可以看做是功能丰富的应用,他们拥有着复杂的java...

2020-04-17 10:23:57 87

原创 PS - 除去水印,文字

第一步:框选文字部分第二步:选择 - 色彩范围 - 吸管 - 吸取文字颜色 - 颜色容差 (调大)第三步:选择 - 修改 - 扩展 (2像素)第四步:内容识别 (shift + f5)完美去文字...

2020-04-13 23:15:58 76

原创 Vant 的 rem 引用

引入:npm i lib-flexible -Snpm i postcss-pxtorem -Dmain.jsimport "lib-flexible/flexible";项目根目录下创建:postcss.config.js//postcss.config.jsmodule.exports = { plugins: { auto...

2020-04-11 00:57:41 93

原创 移动端点击300ms 延时 FastClick

在vue中使用 // 安装 npm install fastclick -S // 引入 main.js 中 import FastClick from 'fastclick' // 使用 FastClick.attach(document.body);

2020-04-10 10:44:14 34

原创 vue keep-alive 保留切换后的状态,上一个状态,之前状态,tab切换

keep-aliveProps:include - 字符串或正则表达式。只有名称匹配的组件会被缓存。exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。max - 数字。最多可以缓存多少组件实例。用法: 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 相似, 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在组件的父组件链中。当组件在 ...

2020-04-06 17:48:25 305

原创 module.exports 与 exports,export 与 export default 关系和区别

首先我们要明白一个前提,CommonJS模块规范和ES6模块规范完全是两种不同的概念。CommonJS模块规范Node应用由模块组成,采用CommonJS模块规范。根据这个规范,每个文件就是一个模块,有自己的作用域。在一个文件里面定义的变量、函数、类,都是私有的,对其他文件不可见。CommonJS规范规定,每个模块内部,module变量代表当前模块。这个变量是一个对象,它的exports属...

2020-04-06 10:39:30 61

原创 fs 模块

node fs 文件系统1、浏览器js 不允许操作文件。2、服务端node通过fs核心模块文件系统来操作。(增,删,改,查)fs 重点操作文件操作:读取、写入、删除、判断存在性,文件信息目录操作:创建、删除、读取fs 操作都有两个版本:同步版本 (接力赛跑)异步版本 (比赛跑)1、读取文件格式:readFile(异步)readFileSync (同步)readFile(...

2020-03-31 17:42:23 53

原创 vue 全局组件和局部组件

组件分类:全局组件 局部组件​ 全局组件在任何地方都可以使用​ 局部组件只能在当前实例里用全局组件Vue.component("组件名称",{​ data(){​ return {​ msg:"123"​ }​ },​ methods:{​ fn()...

2020-03-30 21:17:39 70

原创 vue-cli3 中 vue.config.js 配置文件

vue.config.js配置文件在使用vue-cli3创建项目后,因为webpack的配置均被隐藏了,当你需要覆盖原有的配置时,则需要在项目的根目录下,新建vue.config.js文件,来配置新的配置。const url = require('url');const queryString = require('querystring');const path = require...

2020-03-28 13:23:53 183

原创 mock.js 教程

一、Mock.js的功能:①基于数据模板生成数据②基于HTML模板生成数据③拦截并模拟ajax请求二、Mock.js的安装:① 下载mock.js文件<script type="text/javascript" src="http://mockjs.com/bower_components/mockjs/dist/mock.js"></script>② np...

2020-03-27 23:12:05 72

原创 vscode 插件

VS Code 写 Markdown — “Markdown Preview Enhanced”

2020-03-27 19:59:28 131

原创 Generator + co

GeneratorGenerator 函数是一个普通函数。区别:function关键字与函数名之间有一个星号。(ES6 没有规定,function关键字与函数名之间的星号,写在哪个位置都能通过。)函数体内部使用yield表达式,定义不同的内部状态(yield在英语里的意思就是“产出”)。调用 Generator 函数后,该函数并不执行,返回的也不是函数运行结果,而是一个指向内部状态的指...

2020-03-25 04:35:35 38

原创 面向对象 OOP

面向对象编程 (Object Oriented Programming)单例设计模式单例模式解决的问题高级单例模式基于单例模式实现模块化开发工厂模式单例设计模式1、表现形式 (对象)var obj = { xxx:xxx};2、作用把描述同一件事务的属性和特性进行 分组,归类(存储在一个堆内存空间中)。因此避免了全局变量之间的冲突和污染var pa...

2020-02-06 22:43:20 56

原创 vue v-model 单选 复选 下拉 表单

v-model表单控件在实际业务较为常见,比如单选、多选、下拉、输入框等,用它们可以完成数据的录入,校验,提交等。例如在输入框上使用时,输入的内容会实时映射到绑定的数据上。使用v-model 后,表单控件显示的值只依赖所绑定的数据,不再关心初始化时的value属性的值。使用v-model...

2020-01-12 09:01:04 131

原创 vue的计算属性computed与侦听器watch

vue的计算属性computed和侦听器watch都是监听数据变化。computed (计算)其在vue单文件组件中就是对数据进行简单的一些逻辑计算,在项目开发中方便我们对原始数据处理。重要的是计算属性基于它的响应式依赖进行缓存的。只有当响应依赖关系变了即值发生变化了才会重新计算。否则,直接利用缓存,这样既避免多次调用函数又提升性能。<div id="app"> {{txt}}...

2020-01-09 09:48:00 85

原创 vue 生命周期

生命周期1.vue的生命周期是什么 ?2.vue生命周期的在项目中的执行顺序3.vue中内置的方法 属性和vue生命周期的运行顺序(data、methods、computed、watch)4.自己构造的方法与vue生命周期的运行顺序5.总结一、vue的生命周期是什么​ vue每个组件都是独立的,每个组件都有一个属于它的生命周期,从一个组件创建、数据初始化、挂载、更新、销毁,这就...

2020-01-08 09:33:30 187

原创 Vue 详解

认识vue.jsvue 是什么官方文档:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。如果你想在深入学习 Vue 之...

2019-12-28 09:16:29 117

原创 node + express + axios 增删改查

const express = require("express");const path = require("path");const fs = require("fs");const app = express();const db = require("./src/mock/data.json");// 对外开放 静态资源目录app.use(express.static(...

2019-12-16 23:38:07 151

原创 node-dev工具和supervisor工具

简介node-dev是一个node.js开发工具,当文件被修改时,它会自动重新启动node进程。使用介绍1、安装npm install -g node-dev2、运行服务node-dev index.js3、Node-dev 可以当有js文件修改后自动去重启nodejs进程, 这样就不用每次ctrl+c 终止在重启了,而且不仅支持js文件, .json .node .coffee...

2019-12-08 22:57:20 79

原创 npm -- nodejs强大的包管理器

npm是什么NPM的全称是Node Package Manager,是随同NodeJS一起安装的包管理和分发工具,它很方便让JavaScript开发者下载、安装、上传以及管理已经安装的包。npm通常是和node.js一起安装的npm,node package manager,是 Node 的模块管理器,功能极其强大。它是 Node 获得成功的重要原因之一。随着一系列基于node...

2019-12-04 21:53:20 228

原创 babel 转码器

初识node1.node定义Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。2.node的特点1.事件驱动2.非阻塞式 I/O3.轻量又高效4.单线程3.Node可以做什么?1.操作文件fs(重点讲)2.操作http服务器(重点讲)3.操作进程(这个月不学习,但是大家要知道)4.理解node环境和浏览器环境的区别1.全局环境下thi...

2019-11-29 11:15:54 101

原创 箭头函数

箭头函数优点:语法简单可以隐式返回匿名函数<script> const number = [5, 6, 13, 0, 1, 18, 23]; const double = number.map(function (number) { return number*2; }); const double2 = number...

2019-10-14 22:11:34 96

原创 JavaScript Array map()方法

Array map()方法定义:对数组中的每个元素进行处理,得到新的数组;特点:不改变原数组;例子:const array = [1, 3, 6, 9];const newArray = array.map(function (value) { return value + 1;});console.log(newArray); // [2, 4, 7, 10]console....

2019-10-14 21:35:25 36

原创 JS 随机数

前言:对象在JavaScript 中被称为引用类型的值。Math 是引用类型的单体内置对象,Math对象提供了很多属性和方法,用于辅助完成复杂的数学计算任务。Math 对象方法方法描述Math.ceil(x)进行上舍入,即向上取整。 例:Math.ceil(25.9) //26 Math.ceil(25.1) //26Math.floor(x)进行向下舍入,即...

2019-10-05 22:57:48 38

原创 Common JS

模块规范CommonJS模块规范主要分为三部分:模块引用、模块定义、模块标识。模块引用 var math = require("math");带路径与不带路径的区别模块引入没有带路径,引用的是当前所在目录下的node_modules目录。模块引入的有其他路径,就需要使用到相对路径或绝对路径。var add = require(’./add.js’)模块定义module对象:在...

2019-09-28 22:03:08 131

原创 送给同学们的话

一转眼,我们分别了,但是总觉得我们好像刚刚进班的第一天,很多人走了,也有人来了,有些人变了,也有些人没变。大家的感情从陌生到熟悉,从疏远到一点点团结起来,一点一滴都铭记我心中,随着同学的调班,离去,我们可能会变得疏远,但希望大家之间的感情还是未曾改变,我们都在改变,我们也无法阻止这些改变,没有永远的在一起,但可以拥有过去的回忆!我相信每一位同学都能对学习重视起来,一心向前。学习是以时间保证的,抓...

2019-09-27 11:00:42 433 10

原创 ES6 知识点总结

let 和 const 命令let 用来声明变量,只在let命令所在的代码块中有效。【代码块:使用花括号包住的内容称为代码块{}】{ let a = 10; var b = 1;}a // ReferenceError: a is not definedb // 1表明:let声明的变量只在它所在的代码块有效。for循环的计数器,就很合适使用let命令。for (let...

2019-08-23 22:46:16 277

原创 移动端 效果案例

效果演示:横向滚动源代码: <div class="wrapper"> <div class="content"> <ul class="ul"> <li><img src="https://p1.meituan.net/128.180/movie/648bbced1...

2019-08-21 11:35:51 346

原创 canvas 刮刮乐效果

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>audio</title> <style type="text/css"> canvas { /* canvas 默认宽高 300*...

2019-08-21 08:40:41 125

原创 css3 动画讲解

前言:在CSS3中,动画效果有俩种方式:第一种:animation 属性通过定义多个关键帧以及定义每个关键帧(@keyframes)中元素的属性值来实现复杂的动画效果。第二种:transition 属性只能通过指定属性的开始值与结束值,然后在这两个属性值之间进行平滑过渡来实现动画效果,因此只能实现简单的动画效果。transition属性功能是相同的,都是通过改变元素的“属性值”来实现动画效果。...

2019-08-06 19:01:34 1530

原创 JS阻止冒泡和取消默认行为

http://caibaojian.com/javascript-stoppropagation-preventdefault.html

2019-07-29 15:30:42 84

原创 canvas 详解

canvas什么是canvas?是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素.canvas标签用来绘制图像,本身就是一个画布,没有绘画能力,所有的绘制都是通过js脚本实现的都能干什么?可以用于绘制图表、制作图片构图或者制作简单的(以及不那么简单的)动画默认大小Canvas 的默认大小为300像素×150像素(宽×高,像素的单位是px)。不能通过c...

2019-07-18 21:44:24 1691

原创 我的草原

我的蒙古马路在你脚下 马蹄声碎那是风的感觉 昔日古战场传奇满天涯 驰骋草原放牧春秋冬夏 风一样驰骋云一样潇洒 你游牧塞北你草原为家———《纪念第一骑兵军团》...

2019-07-18 16:00:54 185

原创 FileReader 文件操作

FileReaderhtml5 中新增的⽂件操作:File:代表⼀个⽂件对象FileList:代表⼀个⽂件列表对象,类数组FileReader:⽤于从⽂件中读取数据FileWriter:⽤于向⽂件中写出数据调⽤ fileReader 对象的⽅法FileReader 实例拥有四个⽅法,其中三个是⽤来读取⽂件,另⼀个是⽤来中断读取的。需要注意的是,⽆论读取成功或是失败,⽅法并不会返...

2019-07-16 14:17:51 1077

原创 Sass

Sass是CSS的扩展语言(预编译语言)。在CSS 语法的基础上增加了变量 、嵌套、混合、导入等高级功能。Sass 使用方式1、新建文件,后缀名为.scssVisual Studio Code 推荐安装插件 (Easy Sass)...

2019-07-05 10:14:04 514

原创 json

什么是 JSON ?JSON : JavaScript Object Notation (JavaScript 对象表示法)JSON : 是轻量级的文本数据交换格式JSON : 独立于语言,支持不同编程语言(PHP,JSP,.NET)JSON 语法规则JSON 语法是 JavaScript 对象表示语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组JS...

2019-06-20 16:13:08 1824 2

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