- 博客(197)
- 收藏
- 关注
RSS订阅
原创 web前端进阶教程目录
web前端的学习的入门并不难，但是在学习和应用的过程中，你会发现各种新知识和新技术层出不穷，似乎没有止境，本教程从体系化的角度去设计，希望从高处着眼，用生活化的角度去理解。
2019-02-21 11:05:23
2526
1
原创 前端命令npm 、 cnpm、 pnpm、yarn 、 npx、nvm的区别
大名鼎鼎的npm(Node Package Manager)是随同NodeJS一起安装的包管理工具，NPM本身也是Node.js的一个模块。yarn 、 cnpm 、 npx 、 pnpm都是基于npm的包管理器，是基于npm包管理器的一些变种。解决了早期npm的一些缺点，例如下载速度慢，不能离线下载等。nvm是Node.js版本管理器。
2023-08-23 10:57:11
753
原创 网页打印与导出word实现在A4纸上相同效果
在工作中遇到这样一个需求，客户要求： 1、实现在浏览器中打印和导出到word中，要求浏览器打印出来的效果和word中打印的效果基本一致。假设word中取边距为上下2.54cm，左右3.18cm，即向下边距1英寸，左右边距约1.25英寸，按96pdi计算，上下边距96px,左右边距约为120px。通过以上计算后可得A4纸96dpi下的分辨率约为793.7px×1122.5px，向下取整为宽793像素和高1122像素，这是我们在制作网页的时候需要的像素。浏览器打印机和导出word支持的样式,由于网页。
2023-02-28 20:51:22
3453
1
原创 vue3.2单文件组件 ＜script setup＞ 语法糖常用写法
是在单文件组件中使用组合式 API 的编译时语法糖,使用时，任何在其中声明的顶层的绑定 (包括变量，函数声明，以及 import 导入的内容) 都能在模板中直接使用。
2022-11-15 14:38:08
766
原创 TypeScript起步
TypeScript 由微软开发的编程语言，是JavaScript的一个超集，是添加了类型系统的 JavaScript可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。在学习TypeScript之前，请保证先熟悉了JS基础、ES6和NPM的简单实用。一、全局安装typescriptnpm install -g typescript安装完成后就可以使用 tsc命令来执行 TypeScript 的代码// 查看版本号tsc -v通常使用 .ts 作
2022-09-26 13:16:01
541
原创 TypeScript的数据类型基础
interface可以实现声明合并，type不行type可以使用联合类型或者交叉类型，interface不行TypeScript 之 交叉类型与联合类型联合类型表示取值可以为多种类型中的一种，使用 分割每个类型函数中使用：约束取值以上1 | 2, true | false, ‘click’ | ‘scroll’ | 'mousemove’被称为字面量类型，分别为数字、布尔、字符串字面量类型，可以用来约束取值只能是其中几个值中的一个。TypeScript里常用的泛型工具类型泛型工具类
2022-09-13 17:29:06
440
原创 vs code开发Vue2项目的配置参考
安装ESLint + Prettier项目根目录下存在文件ESLint的配置文件.eslintrc.jsmodule.exports = { root: true, env: { node: true, }, extends: [ "plugin:vue/essential", "eslint:recommended", "plugin:prettier/recommended", ], parserOptions: { parser:
2022-05-17 15:26:56
936
原创 Vue2项目中配置ESLint和Prettier
ESLint是js代码的质量检查工具，同时也具备一定的代码风格的格式化能力。Prettier是一个代码风格的约束工具，Prettier能约束JS、JSX、TypeScript、Vue、CSS、Less、SCSS、HTML、JSON、Markdown等代码风格。由于ESLint定义了一些js的代码格式化的约束，导致其与Prettier存在一些冲突。如：ESLint默认语句结尾不加分号，Prettier默认语句结尾加分号；ESLint默认强制使用单引号，Prettier默认使用双引号；ESLint.
2022-05-17 14:37:25
10505
1
原创 VS Code快捷键
常用快捷键显示所有命令： Ctrl+shift+P或F1,弹出命令行转到文件： Ctrl+P开始调试：F5切换终端：Ctrl + `查找替换查找: Ctrl+F查找替换: Ctrl+H在文件中查找：Ctrl+shift+F在文件中查找替换：Ctrl+shift+H编辑器与窗口管理新建文件: Ctrl+N文件之间切换: Ctrl+Tab打开一个新的VS Code编辑器: Ctrl+Shift+N关闭当前窗口: Ctrl+W关闭当前的VS Code编辑器:
2022-05-17 13:36:12
299
原创 Node.js环境安装与配置
Node.js环境安装Node.js 就是运行在服务端的 JavaScript，Node.js默认安装目录为 “C:\Program Files\nodejs”,这里修改为"D:\nodejs"最新版本：https://nodejs.org/en/ 或者 http://nodejs.cn/能够下载到最新版的node指定版本：https://nodejs.org/dist/ ,https://npm.taobao.org/mirrors/node/可以下载指定版本的nodeNode.js的卸载方法
2022-03-07 10:10:18
385
原创 vue3中slot插槽的使用
slot又称插槽,通常用于父子组件之间，用于父组件向子组件`传递模板内容`，在子组件中可以设定可以放置插槽的名称和要传递给父组件的子组件数据，在父组件中向子组件通过指令声明插槽和接收子组件传递的数据。
2022-02-21 13:04:39
6024
原创 async-validator详细用法
sync-validator是一个表单的异步验证的第三方库。传入验证规则对象，可以新建一个验证器对象。验证器对象的`validate`方法用于验证数据是否符合验证规则。
2022-01-30 09:20:39
33046
原创 深入Vue的computed属性
Vue模板的表达式语法仅支持单个表达式，用于简单运算；对于复杂的逻辑计算应当使用计算属性computed。computed可以依赖（计算）props、data、vuex的数据，即可以声明了一个计算属性，令其响应props/data/vuex的数据变化，返回一个经过某种计算的结果。
2021-09-23 17:01:08
4928
原创 在Vue中自定义指令
指令在定义的时候，名称前面不需要加 v- 前缀，在调用的时候，需要在指令名称前加上 v- 前缀来进行调用。自定义指令的注册分为全局自定义指令和局部指令。
2021-08-27 10:21:26
234
原创 前端实现WebSocket即时通讯
要实现客户端与服务器端的通信，最常接触的是http（https）协议，http通信只能是客户端发起请求，服务器响应。服务器不能主动向客户端传递消息。HTTP 协议无法做到服务器主动向客户端推送信息，2008年诞生的WebSocket 协议可以实现客户端与服务器端的双向对话，即：服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息。WebSocket 协议的底层协议也是TCP协议WebSocket 协议的标识符为ws,加密后为wssWebSocket 协议没有同源限制，即WebSocke
2021-07-19 09:44:56
9012
1
原创 JS对象属性描述符对象
JS中Object对象的静态方法getOwnPropertyDescriptor可以返回指定对象的指定属性的描述,该描述是一个对象，称为属性描述符对象。属性描述符是 ECMAScript 5 新增的语法，它就是一个内部对象，用来描述对象的属性的特性。属性和方法说明configurable可配置性 ，是否可以使用delete删除属性，以及是否可以修改属性描述符的特性，默认值为trueenumerable可枚举性，是否出现在对象的属性枚举中，比如是否可以通过for-in循环返回
2021-07-08 12:20:08
191
1
原创 vue-router的addRoute方法实现权限控制
在项目实践中，往往需要用户登录后由后端返回用户的权限，来动态配置路由,vue-router提供了两个方法router.addRoutes(),router.addRoute()可以进行动态路由配置，这里需要注意的是vue-router的options属性并不是响应式的，在添加（修改）路由规则后，router.options.routes属性不会改变，目前，如果需要更新router.options.routes，则需要手动更改。
2021-04-28 14:22:19
18106
1
原创 js常用正则表达式
史上最全常用正则表达式大全 很多不太懂正则的朋友，在遇到需要用正则校验数据时，往往是在网上去找很久，结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下，在这里分享一下。给自己留个底，也给朋友们做个参考。一、校验数字的表达式 1. 数字：^[0-9]*$2. n位的数字：^\d{n}$3. 至少n位的数字：^\d...
2021-04-09 09:44:27
862
原创 Vue项目（Vue cli3）中的配置文件
package.json定义了项目所需要的各种模块，以及项目的配置信息。全局 CLI 配置文件 vue.config.jsvue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。常用配置项：配置项说明类型默认值更多publicPath设置部署应用包时的基本 URLString‘/’详情outputDir设置项目打包生成的文件的存储目录String‘dist’详情a
2021-04-02 16:14:05
2000
原创 Vue组件（三）-内置组件component、transition、 transition-group、keep-alive、slot
Vue 的内置组件component组件动态绑定组件,根据数据不同更换不同的组件,component通过属性is的值可以渲染不同的组件。<component :is="currentTabComponent"></component>transition组件为组件的载入和切换提供动画效果transition-group组件作为多个元素/组件的过渡效果keep-alive组件能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。包裹动态组件时，会缓存不活动的组件
2021-03-19 10:08:10
1118
原创 Vue组件（五）- 组件的继承mixins、extends、provide、inject
provide和inject是成对出现的,用于父组件向子孙组件传递数据
2021-02-08 09:13:51
1521
原创 Node.js Path模块笔记
Path模块提供了一些用于处理文件路径的小工具，可以通过以下方式引入该模块：const path = require("path")console.log(Object.keys(path))引入后得到一个对象，对象的属性（包含方法）见下图：我用的系统是windows,这里值记录windows系统的执行结果方法path.normalize(path)规范化路径,并解析 ‘…’ 和 ‘.’ 片段。console.log(path.normalize('../data//users.js
2021-02-01 13:48:21
148
转载 图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
Jquery 兼容写法jQuery event 事件对象，包含有 event.offsetX， event.clientX，event.pageX，event.screenX等属性（firefox 浏览器中， offsetX 为 undefined）。firefox 获取 offsetX / offsetY 的值，需要通过 event 对象的属性 originalEvent。$(function(){ $("#box").mousedown(function(event){ c...
2020-10-23 11:03:47
187
原创 JavaScript 调试助手 - console对象
相信对Console对象大家已经不会陌生了，我们常常调用它来调试js代码,在浏览器中按F12调出开发者工具，可以看到Console面板，在js中使用console对象，结果会输出到Console面板，也可以在此面板直接输入js代码，回车后代码就会执行。console对象是宿主对象，IE8及以下浏览器不支持console对象。输出信息log()info()warn()error()table()group()和groupEnd()groupCollapsed()和groupEnd()d
2020-09-09 20:31:11
542
原创 Vue简介和知识体系
Vue是做什么的是用于构建用户界面的渐进式框架是一个轻量级的JavaScript MVVM库，是做到了数据双向绑定的框架。VUe.js的核心思想是数据驱动和组件化渐进式含义是：主张最少。每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。Vue的版本Vue已经有了三个版本，目前最常用的是Vue2Vue的安装在网页中用<script src="https://cdn.jsdelivr.net
2020-09-07 11:42:56
406
原创 Vue中定义模板的几种方法
1、字符串模板Vue实例的模板可以在Vue实例的选项template中定义，属性值的本质是一个字符串，如果组件的template过长难以阅读，可以将模板写在script标签中，或者使用Vue提供的内联模板功能,将组件模板设置在组件之外。<div id="app"></div>new Vue({ el: '#app', data: { message: 'Hello Vue!' }, template:`<p>{{
2020-09-06 11:29:41
1191
原创 前端简单理解MVC、MVP、MVVM框架
一切从前后端分离开始理解MVVM框架要先从前后端分离说起，传统前端先写一个静态页面，写好后，让后端去套模板，前端无法独立调试代码，这样做导致无论前端还是后端对页面的维护都非常困难，用户体验很差。前后端分离是指前端专注于客户端，复杂渲染页面和显示数据；后端专注做数据的操作；前后端通过接口交互，交互方式是前端发送异步请求后端给，后端接受请求返回数据，前端接受数据并使用数据。前后端分离后，前端才开始需要工程化才需要软件设计模式，这就有了MVC 和MVVM框架。MVC 框架MVC 即 Model-View
2020-09-04 10:01:39
843
原创 JS中数组查询的方法indexOf()、lastIndexOf()、includes()、find()、findIndex()、filter()、every()
JS中涉及到数组查询的方法见下表：方法描述参数返回值indexOf()搜索数组中的元素，并返回它所在的位置。要搜索的元素 ，查找的起始位置元素第一次出现的索引lastIndexOf()搜索数组中的元素，并返回它最后出现的位置要搜索的元素 ，查找的起始位置元素最后一次出现的索引includes()判断一个数组是否包含一个指定的值要查找的元素值Booleanfind()返回符合传入测试（函数）条件的数组元素函数,this符合条件的第一个元素的值
2020-09-03 12:02:30
5514
原创 vue.config.js常用配置项
常用配置项：配置项说明类型默认值更多publicPath设置部署应用包时的基本 URLString‘/’详情outputDir设置项目打包生成的文件的存储目录String‘dist’详情assetsDir指定放置打包生成的静态资源 (js、css、img、fonts) 的目录(相对于outputDir)String‘’详情indexPath设置生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径
2020-08-31 10:02:24
260
原创 VS Code开发Vue项目常用插件
VS Code是免费软件，直接到官网下载安装即可，如果选用这款编辑器，建议花点时间实习一下这款软件，安装必要的插件，会大大提供编码效率。笔者从从前使用webstorm做前端项目，下面记录在项目实践中的一些配置。
2020-08-29 10:40:31
8165
1
原创 vue-router中当前路由对象属性
Vue项目中如果引入了Vue router实例,就可以在Vue实例中通过$route访问到当前匹配到的路由对象。$route对象代表着当前路由对象，属性包括：path:String,当前路由对象的名称|当前路由对象的路径，会被解析为绝对路径queryObject,|路由中携带的查询参数paramsObject,包含路由中的动态片段和全匹配片段的键值对。matched:Array,包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。即匹配到的所有的 RouteRecord 对象ful
2020-08-26 20:07:21
1566
原创 移动端页面布局经验谈
介绍移动端布局常用方法之前，推荐回顾一下这3篇博文。移动端布局-分辨率和视口网页的响应式布局与媒体查询一步步学习Flex弹性布局在做移动端布局时，html的header中加上这段代码<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">移动端布局时，首先要确认一下需求，即是否需要兼容PC端，即两端适配，这是移动端布局的比较麻烦的情况，这时候我通常用响应式布局和媒体查询来
2020-08-23 15:38:24
385
原创 浅谈前端工程化（二）Gulp和Webpack构建项目
前端构建前端构建其实是工程化、自动化思想在前端开发中的体现，将一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。过去，前端一直在各种为战，不停的造轮子，前端只会一种语言js,js只能在浏览器运行，前端工程化无从谈起，在node出现之后，各种前端构建工具才如雨后春笋般层出不穷。前端构建可以实现如下内容：代码转换：将 TypeScript/es6 编译成JavaScript、将 SCSS 编译成 CSS等。文件优化：压缩JavaScript、CSS、HTML 代码，压缩合并图片等。代码
2020-08-12 13:57:43
413
原创 浅谈前端工程化（一）Nodejs和NPM
在前面所有的文章中，我们都是在围绕网页的三部分，结构（HTML）、表现(CSS)、行为(JS)分离的方式来介绍的,传统的前端，就是在html文件中引入css文件和js文件（包含jQuery之类的js库），来实现web应用的一部分，通常包括：页面的静态实现，即所谓的切图或者DIV+CSS页面实现使用js及其插件完成页面的动态效果表单提交、数据验证或使用ajax与后端交互数据这时候前端在WEB项目中，并不涉及太多的业务逻辑，通常代码最后要交给后端来实现与服务器的交互，前端的岗位在项目中通常是面目模糊
2020-08-10 11:47:24
1166
原创 Vue cli4构建一个简单的CRM项目(一)
在windows系统搭建VUE环境(安装vue-cli4)中我们使用默认配置创建一个项目hello-world，这次我们首先用图形化界面来创建一个项目。在命令行中输入下面的命令打开一个浏览器窗口vue ui安装这个页面的引导我们来创建一个项目hello-word2,在预设中选择手动配置项目，在功能中做如下选择在配置中做如下选择点击创建项目然后等待即可。...
2020-03-12 11:26:21
688
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人