- 博客(57)
- 收藏
- 关注
RSS订阅原创 git使用方法补充
提交git add . # ./ 当前目录, 将当前目录下所有文件提交到暂存区git commit -m "feat:提交日志" # 将暂存区的内容提交到本地仓库 (生成提交日志)#git 提交规范说明# - type: feat 新功能（feature）, fix 修补bug, docs 文档修改（documentation）, style 代码格式修改 (注意不是 css 修改,不影响代码运行的变动), refactor 代码重构 (即不是新增功能，也不是
2022-05-22 15:38:28
286
原创 ESLint 插件自动格式化操作手册
ESLint 插件自动格式化操作手册实现按照 ESLint 规则自动格式化需要借助 2 个插件：ESLint （读取 ESLint 配置文件进行语法检测）Prettier ESLint（按照 ESLint 配置文件进行格式化）使用步骤：安装插件修改默认格式化插件找到任意代码文件右键点击代码区域选择「使用…格式化文档」选择「配置默认格式化程序」选择「Prettier ESLint」到此，已经可以实现「Alt + Shift + F」进行自动格式化啦！
2022-05-22 14:28:44
699
原创 全局组件、全局指令、v-model是语法糖、vue2响应式的缺点
全局组件局部组件：在父组件中导入的这个MyCom组件，只能在当前组件中使用import MyCom from './MyCom'export default { components: { MyCom } }全局组件：在main.js中导入import MyCom from './Mycom'// Vue.component(组件名，组件)Vue.component('MyCom', MyCom)全局指令局部指令export default { directives:
2022-05-15 21:07:02
430
原创 一些零碎的知识点
(1)vue-router 3.x版本更新了一个特点,如果编程时导航跳到了相同的路径,会报一个错误:NavigitionDuplicated导航重复,vue-router限制我们不能两次跳转到同一路径,可以通过this.$router.push(patch).catch(e=>e)解决这个报错(2)element-ui 给提供的功能 this.$confirm$开头的方法就地位高一些,一般就是组件自带的$store , $refs , $router , $route , $nextTick
2022-05-15 19:45:47
473
原创 elementUI基本使用总结
常见的vue技术栈组件库● 移动端（Vant, Cube-UI, NutUI ）● PC端 （ element-ui, Ant Design of Vue, iView）● 小程序: uniapp组件库的基本使用流程根据项目的实际情况，进行技术选型： 用什么技术栈，用什么组件库去对应的官方上查文档遇到困难时：a. 在官网上找 常见问题(一般在网页的最底部)b. 在社区/搜索引擎 找答案c. 去提issue ，面对面直接向组件的作者提问d. 改源码小结● vue技术栈有很
2022-05-14 20:55:02
2300
原创 Vuex-辅助函数map
Vuex-辅助函数mapState来使用公共数据当访问某个数据项嵌套太深了,用mapState把公共数据（vuex.store） 映射 到本组件内部的计算属性中mapState的使用步骤映射// 1. 导入辅助函数mapState，它是在vuex中定义的一个工具函数。// es6 按需导入 import { mapState } from 'vuex' import { mapState } from 'vuex'computed: { // 说明1： ...对象 是把对象展开，合并
2022-05-14 20:05:37
571
原创 Vuex基本介绍及语法总结
组件之间通信方案序号组件关系数据通信1父子关系子传父：props ； 父传子：$emit2非父子关系eventBus: $on + $emit3非父子关系vuexVuex是什么Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式， 采用集中式存储管理应用的所有组件的状态，解决多组件数据通信。要点：vue官方搭配，专属使用 (类似于：vue-router)，有专门的调试工具集中式管理数据状态方案 (操作更简洁)data() {
2022-05-12 21:10:16
651
1
原创 history和hash模式区别
路由模式设置修改路由在地址栏的模式router/index.js中:const router = new VueRouter({ routes, mode: "history" // 打包上线后需要后台支持})history和hash模式区别：它们都实现页面的跳转功能（跳转页面）它们的区别体现在3个方面:a.外观 : history模式的path路径不带#号，hash有#号b.原理 : hash模式使用onhashchange , history使用pushState , 导致
2022-05-12 20:17:12
377
原创 路由守卫之全局前置守卫与全局后置守卫
全局前置守卫pageA -----守卫----> pageB路由跳转之前, 会触发一个函数语法：router.beforeEach((to, from, next) => {})案例:在跳转路由前, 判断用户登陆了才能去<我的音乐>页面, 未登录弹窗提示回到发现音乐页面实现：● 在router/index.js 路由对象上使用固定方法beforeEach// 路由守卫// 每次页面跳转，都会执行这个回调router.beforeEach((to,
2022-05-12 19:41:51
696
原创 单页应用和多页应用、路由、 window.onhashchange、路由使用、vue-router、router-view、router-link、router-link-exact-active
单页应用和多页应用、路由、 window.onhashchange、路由使用、vue-router、router-view、router-link、router-link-exact-active、页面跳转传参、vue路由传参的方式、路由-重定向、路由404、编程式导航、this.$router.push('/路由路径')、路由嵌套 children......
2022-05-11 20:40:27
697
原创 同桌bug之this指向
错误示范:mounted() { window.onhashchange = function(){ console.log(window.location.hash) const { hash } = window.location if (hash === '#/index') { this.comName = 'MyIndex' } else if (hash === '#/movie') { this.comN
2022-05-11 15:36:58
121
原创 生命周期函数父组件和子组件8个钩子函数执行顺序
生命周期函数父组件和子组件8个钩子函数执行顺序打开页面时如图所示,先执行父组件的beforeCreate ,created ,beforeMount ,再执行子组件的beforeCreate ,created ,beforeMount ,然后执行子组件的mounted ,最后执行父组件的mounted子组件里更新由父传子的数据时销毁子组件...
2022-05-10 11:46:32
105
原创 组件进阶-props校验、动态组件、组件进阶-keep-alive组件、指定缓存、默认插槽slot、具名插槽、作用域插槽、自定义指令
组件进阶-props校验props校验普通格式： props: [“propA”, “propB”]。没有类型检查高阶格式：props: { // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true
2022-05-09 19:36:01
474
原创 vue组件生命周期、axios、$refs使用、nextTick
vue组件生命周期一个组件从 创建 到 销毁 的整个过程就是生命周期生命周期函数(钩子函数)vue 框架内置函数，随着组件的生命周期，自动按次序执行作用：特定的时间点，执行某些特定的操作场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据阶段!!!:● 初始化 → 创建组件 → beforeCreate 、created● 挂载 → 渲染显示组件 → beforeMount 、mouted● 更新 → 修改了变量 → 触发视图刷新 →
2022-05-08 19:30:32
675
1
原创 vue组件化开发、vue组件封装使用步骤、scoped实现组件的私有样式、vue组件通信、父传子、子传父
vue组件化开发组件是可复用的 Vue 实例, 封装标签, 样式和JS代码vue组件分类：页面组件页面下的功能组件组件化开发 ：一个页面(.vue)可能有一个或多个组件(.vue)组成完整的页面功能● 封装的思想，把页面上 可重用的部分 封装为 组件，从而方便项目的 开发 和 维护一个页面， 可以拆分成一个个组件，一个组件就是一个整体, 每个组件可以有自己独立的 结构（template） 样式(style) 和 行为(script) (html, css和js)小结● 现代前端开发
2022-05-07 20:57:24
1109
3
原创 动态class、动态style、计算属性、过滤器filters、监听器watch、深度监听
动态class目标用v-bind给标签class设置动态的值语法● 格式1：<标签 :class="变量" />● 格式2：<标签 :class="{类名1: 布尔值, 类名2: 布尔值}" />○ 如果布尔值为true，就添加对应的类名说明：可以和静态class共存<style> #app{width:500px;margin:50px auto;border:3px solid red;} .box{
2022-05-07 20:11:48
1700
1
原创 如何最小化重绘和回流
什么是重绘和回流重绘:当元素的一部分属性发生改变,如外观.背景.颜色等不会引起布局变化,只需要浏览器根据元素的新属性重新绘制,是元素呈现的外观叫做重绘.回流:当render树中的一部分或者全部因为大小边距等问题发生改变而需要DOM重新计算的过程重绘不一定回流(比如颜色的改变),回流必然导致重绘(比如改变网页位置)方法:1.需要对元素进行复杂的操作时,可以先隐藏(display:‘none’),操作完成后再现身2.需要创建多个DOM节点时,使用DocumentFragment创建完后一次性的加入d
2022-05-05 20:51:25
319
原创 哪些年同桌遇到的bug③
[Vue warn]: Error in v-on handler: “TypeError: “name” is read-only”methods: { del(idx) { this.list.splice(idx, 1) }, add() { const { good, list } = this // 1.判断 const { name, price } = good if (name == '') return
2022-05-05 20:46:38
359
原创 vue脚手架_基础API、Vue基本概念、vue-cli 脚手架、vue指令
vue脚手架_基础API安装：vue-devtools学习和调试vue必备之利器 - 官方插件安装：打开Chrome浏览器 =>点击浏览器右上角小图标，按图示操作2.进入扩展程序菜单 => 把vue-dev-tool-5.3.crx文件拖入网页中进行添加安装3.安装完成后，固定显示插件Vue基本概念Vue是什么vue是一个渐进式的javascript框架库: 封装的属性或方法 (例axios.js, jquery.js)， 框架: 拥有自己的规则和元素, 比库强大
2022-05-04 10:14:30
982
原创 又是给怨种同桌找bug的一天
报错1:vue.runtime.esm.js?c320:619 [Vue warn]: Duplicate keys detected: ‘0’. This may cause an update error.错误原因 :一个ul里面循环了两个li ,两个的key 都为idx,导致第一个li在循环时产生了key=“0”,而第二个也会有key=“0”,以至于key="0"被重复检测报错解决办法 : 将两个不同的li循环包在不同ul中报错2:错误原因 : 报错3:错误原因 : 只能有
2022-05-03 19:58:19
90
原创 webpack使用说明
webpackwebpack基本介绍webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)现代 javascript 应用程序的 静态模块打包器 (module bundler)● 静态: 文件资源● 模块: node环境, 引入文件, 遵守模块化语法除了合并代码, 还可以翻译和压缩代码● less/sass -> css● ES6/7/8 -> ES5● html/css/js -> 压缩合并小结
2022-05-02 22:45:21
1309
原创 那些年我怨种同桌遇到的bug②
怨种同桌今天又突然call我问问题了,题目如下:问以下代码的执行结果是什么?console.log(1)setTimeout(function() { console.log(2) new Promise(function(resolve) { console.log(3) resolve() }).then(function() { console.log(4) })})new Promise(function(resolve) { console.
2022-05-02 21:16:57
78
原创 事件循环eventLoop & 微任务和宏任务
事件循环浏览器本身是一个复杂的系统，它要做的事情非常多，例如： 执行js代码，请求图片资源，解析css，渲染页面，响应鼠标的点击等等。在实现层面，浏览器内部会用不同的功能模块去完成不同的事情。这些不同的模块就体现为进程。...
2022-05-02 21:02:25
1098
原创 promise对象使用介绍
Promise它是一个ES6提出一个新语法，用来优化异步代码的写法。promise：承诺● 生活中，它是用来表述 对将来要发生的事情的肯定。 例如 ： 高中生说，老师，我会考上一所好大学的；销售员说，老板，我一定会签下大单的；程序员说，老妈，我过年一定会带个女朋友回来的。● 在ES6中，它是新增的构造器（Array, Object, Promise），用来优化实现异步操作。在没有它之前，javascript中的异步处理，大多是利用回调函数来实现的。典型的几种如下:（1）setTimeout （2）a
2022-04-30 23:42:20
2755
原创 es6的模块化
模块化的发展es6之前：● amd规范● cmd规范es6之后：● es6模块化○ 每个 js 文件都是一个独立的模块○ 导入其它模块使用 import 关键字○ 向外共享模块使用export关键字● commonJS规范(nodejs)○ 导入其它模块使用 require关键字○ 向外共享模块使用 module.exports关键字在nodejs中搭建学习es6模块化的环境让nodejs支持ES6模块化node.js 中默认支持 CommonJS 模块化规范，如果想基于 nod
2022-04-30 22:27:22
118
原创 跨域错误原因及解决办法CORS&JSONP
跨域把前端代码单独运行，就会报错了。跨域-错误原因及解决思路发起ajax请求的那个页面的地址 和 ajax接口地址 不在同一个域中跨域错误:不同源的ajax请求====> 报跨域的错误浏览器向web服务器发起http请求时 ，如果同时满足以下三个条件时，就会出现跨域问题，从而导致ajax请求失败：（1）请求响应双方url不同源。双方url：发出请求所在的页面 与 所请求的资源的url同源是指：协议相同，域名相同，端口相同 都相同。以下就是不同源的：从http://127.
2022-04-29 20:11:56
9965
原创 服务器、用http 模块写一个简单的web服务器、content-type、statusCode、二次请求、Express、托管静态资源、路由和接口、接口、get接口、post接口、RESTful
服务器相关概念服务器是提供网络服务的机器，通过安装特殊的软件（或者是运行某段特殊的代码）来提供服务。服务器 = 电脑 + 能给其它电脑/设备提供服务的软件客户端与服务器：提供服务的是服务器，享受服务的是客户端服务器的类型根据服务不同，服务器的类型也不同：● web服务器。安装apache, tomcat, iis, 或者在nodejs环境写代码 来提供:图片浏览，新闻浏览…等服务的服务器。● ftp服务器。安装serv-U软件，为其它电脑提供文件下载，共享服务。● 数据库服务器。安装
2022-04-28 20:47:57
942
原创 npm包从创建到发布、删除包、更新包、require加载规则、npm 常用命令
npm项目初始化在本地磁盘上创建一个空项目，取文件夹名为myNpm。注意请先去npm网官去确定一下，这个项目名是否已经被占用了。（如果这个名字已经被占用了，则你是无法向npm上上传的）。检查项目名是否已经被占用 :npm view 包名# 这个命令用来查看 某个包的信息# 如果返回404，说明这个项目名在npm官网上找不到，此时你就可以使用。# 否则，说明不可用。npm init --yes命令来创建一个package.json文件，对你项目myNpm信息进行设置。完成功能开发正常
2022-04-26 22:42:01
1447
原创 npm和包、npm下载安装使用包、全局安装包和本地安装包、全局安装nodemon包、开发依赖和生产依赖
npm● npm 全称 Node Package Manager(node 包管理器)，它的诞生是为了解决 Node 中第三方包共享的问题。● npm 不需要单独安装。在安装Node的时候，会连带自动安装npm。● npm -v检查安装版本的情况。当我们谈到npm时，我们在说两个东西：● 命令行工具。这个工具在安装node时，已经自动安装过了，不需要额外安装。● npm网站。这是一个第三方模块的"不花钱的模块超市"，我们可以自由地下载，上传模块。包（package）与模块关系npm网站上去
2022-04-26 22:21:29
8015
原创 模块化、模块分类、Node.js 中的 CommonJS 的模块化规范、图解导出模块的两种方式
模块化啥是模块化？一个js文件可以引入其他的js文件，能使用引入的js文件的中的变量、数据，这种特性就称为模块化。使用模块化开发可以很好的解决变量、函数名冲突问题，也能灵活的解决文件依赖问题。模块化的发展● 以前es5不支持模块化，让前端人员很为难。为了让支持模块化，我们一般会借用第三方库来实现：○ sea.js. https://www.zhangxinxu.com/sp/seajs/○ require.js. https://requirejs.org/● 现在○ es6原生语法也
2022-04-26 21:52:47
224
原创 那些年我同桌遇到的bug①
数组的push()方法返回值是新数组的长度而不是新数组let arr=['one','two']let res=arr.push('three')//返回值是数组的长度console.log(res) //3 数组的长度console.log(arr) //['one','two','three']
2022-04-26 18:07:46
1201
原创 如何解决下包速度慢的问题 : 修改镜像源
下包速度慢的原因：默认情况下，npm 从一个名为 https://registry.npmjs.org/ 的服务器上下包。这个服务器在国外，因此下包速度会非常慢。解决方案：把 npm的下包地址，从国外的服务器切换为国内的服务器。检查当前的下包地址：npm config get registry把下包的地址切换为国内的淘宝服务器:npm config set registry=https://registry.npm.taobao.org/...
2022-04-26 16:13:55
169
原创 Nodejs基本介绍、下装安装nodejs、打开小黒窗的4种方式、Node环境常用的命令行下的命令及按键、Node.js和浏览器端的区别、fs模块、相对路径的隐患解决办法、path模块
Node.js是什么官方概念：Node.js 是一个基于 Chrome V8 引擎 的 JavaScript 运行时chrome V8引擎： chrome浏览器用来解析和执行js代码的工具运行时：理解为一个容器，用来运行代码的环境Node.js更通俗的解释是：一个用chrome浏览器V8引擎来跑JS代码的环境● 浏览器是javascript的前端运行环境● Node.js是javascript的后端运行环境Nodejs的理解● Node全名是Node.js（也叫Node， nodejs,
2022-04-25 17:23:26
1699
原创 try/catch 用法
try : 在执行时进行错误测试的代码块。catch : 当 try 代码块发生错误时，所执行的代码块。 try { 可能会有错误的代码} catch(err){ 如果try内的代码有错误，就会进入catch，并把错误传进来}try { const fs = require("fs") let rs = fs.readFileSync('文件路径',"utf8"); console.log(rs)} catch(err) { console.log(err)}..
2022-04-25 14:18:07
1997
原创 Git使用方法、Git操作总结
Git版本管理系统简介项目的版本版本和我们平常说的软件、游戏等的版本是一个意思，比如 1.2.8 版本、比如 第1版，比如webstorm2020。所以，版本指的就是代码编写进度当中的一些节点。比如一个项目：搭建好目录结构 — 第1版本完成登录页面布局 — 第2版本完成登录功能 — 第3版本完成分类页面布局 — 第4版本…管理版本【记录】记录代码开发的过程，每一次代码的变化。【回退】将代码回退到之前的版本【查看】查看所有的版本【协作】配合远程仓库，实现多人协作
2022-04-17 15:34:42
664
原创 HTTP协议、一个页面从输入url到呈现过程、文件上传、函数防抖与节流、同源和跨域
HTTP协议1.什么HTTP协议协议指的是规定浏览器跟服务器交互的数据格式2.浏览器请求 必须是：请求报文3.服务器响应 必须是：响应报文4.请求报文与响应报文的数据格式如下a.请求报文(1)请求行 ： 包含请求方法, URL, 协议版本(2)请求头：包含请求的附加信息, 由关键字/值对组成浏览器告诉服务器，我给的数据是什么格式 （content-type在请求头中）(3)请求体：浏览器发送给服务器的数据(参数) post请求参数在请求体中b.响应报文(1)响应行：包含
2022-04-17 15:21:58
2493
原创 axios拦截器、axios基地址、onreadStateChange事件、 XMLHttpRequest的两个事件、Ajax组成部分、get请求与post请求区别
axios拦截器axios拦截器工作流程1. axios 发起请求2. 执行 请求拦截器 : 添加ajax发送请求之前的操作3. 服务器 接收、处理、响应 请求4. 执行 响应拦截器 ： 添加服务器响应之后的操作4. axios 接收响应(执行then方法) // 添加请求拦截器axios.interceptors.request.use( function(config) { // 可以操作这次请求了 // console.log(config); // ajax请求参数;
2022-04-17 14:56:33
642
原创 axios、链式语法、url路径传参的流程、动态新增的元素注册事件、 axios库发送普通键值对的参数URLSearchParams()
1.axiosaxios是什么 ：一个js框架，用于发送ajax请求（底层使用XMLHttpRequest）get('url') : 写url和请求参数 then(res=>{}) //成功回调， 相当于以前jq的success catch(err=>{}) //失败回调， 一般可以省略不写 then(()=>{}) //完成回调， 表示请求完成，无论成功失败都会执行。一般可以省略不写axios常用语法//axios常用语法 : a
2022-04-17 14:31:45
1489
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人