- 博客(18)
- 收藏
- 关注
RSS订阅
原创 前端拦截器使用及介绍
一：路由拦截器（beforeEach：路由守卫） vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。（在路由跳转时触发） 我们主要介绍的是可以验证用户登录状态的全局前置守卫，当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。12345 const router = new VueRouter({ … })router.beforeEach((to, from, next) => {//
2020-10-12 00:05:41
7958
5
原创 前端面试模块化开发认识及全面分析详解
何为模块化开发与按需加载何为模块化开发？为了回答这个问题，首先解释何为“模块”：“模块”是为完成某一功能所需的一段程序或子程序。模块是系统中“职责单一”且“可替换”的部分。所谓的模块化就是指把系统代码分为一系列职责单一且可替换的模块。模块化开发是指如何开发新的模块和复用已有的模块来实现应用的功能。何为按需加载按需加载需要从时间和空间两方面理解。空间上：只加载当前页面的模块时间上：只有当用户表现出需要某一功能的意图时，才去加载相关模块。模块化开发与按需加载的适用场景满足如下条件的应用适合采
2020-10-11 23:50:42
436
原创 从新手到熟悉使用uni-app引导学习文档
一：新建uni-app二：运行可通过h5页面，微信小程序，自己的手机。三：工程目录pages:存放每个页面组件static:存放静态资源unpackage:打包后存在这里App.vue:根文件main.js:主入口文件manifest.json:一些app配置pages.json:存放页面路径（样式）和全局路径（样式）uni.scss:内置样式四：官网了解样式五：配置tabbar（样式参考文档）如果应用是一个多tab应用，可以通过tabBar配置项指定tab栏的表现，以及tab切
2020-10-11 14:16:19
588
原创 前端学习并简单使用node.js笔录及重要知识点
1 PHP编写后端代码，需要Apache的HTTP服务器，并配上一些模块，但是node js不一样，它是“不仅在实现了一个应用，同时还实现了整个HTTP服务器”。2 node.js由三部分组成：（1）引入requier模块：使用 require 指令来载入 Node.js 模块（2）创建服务器：服务器可以监听客户端的请求，类似于Apache的http服务器（3）接收请求和响应请求：客户端可以使用浏览器或终端发送 HTTP 请求，服务器接收请求后返回响应数据3分析Node.js 的 HTTP 服务器
2020-10-11 14:02:59
180
原创 vue使用echarts步骤详解
一：安装echarts依赖npm install echarts -S或者使用淘宝的镜像npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm install echarts -S二：创建图表首先需要全局引入在main.js中// 引入echartsimport echarts from ‘echarts’Vue.prototype.$echarts = echarts三：html引用echarts
2020-10-11 13:53:52
363
原创 Webpack新人初认识及使用、部分代码配置解释
Webpack：1.全局安装webpack：cnpm install webpack webpack-cli -g2.创建文件夹：Mkdir demo1 -> mkdir src3.包的初始化：npm init -y4.安装webpack的依赖：npm install webpack webpack-cli -save-dev(可以看到package.json添加了 “devDependencies”: {“webpack”: “^4.44.0”,“webpack-cli”:
2020-10-13 18:52:02
172
原创 伪元素总结
#content:after{content:’’;display:block;clear:both}#content:after{content:’’;display:block;clear:both}#cc:after{cc:’’;display:block;clear:both}p:first-line{color:red;font-variant:small-caps}text:first-line{color:blue;font-variant:inherit}p:first-lette
2020-10-12 11:20:21
152
原创 vue使用Bus.js简单实现非父子组件通信(非常简单)
vue2中废弃了dispatch和dispatch和dispatch和broadcast广播和分发事件的方法。父子组件中可以用props和emit()。如何实现非父子组件间的通信，可以通过实例一个vue实例Bus作为媒介，要相互通信的兄弟组件之中，都引入Bus，然后通过分别调用Bus事件触发和监听来实现通信和参数传递。Bus.js可以是这样importVuefrom′vue′constBus=newVue()exportdefaultBus在需要通信的组件都引入Bus.jsimportBusfrom′../
2020-10-12 11:18:52
218
原创 vue2.0 keep-active使用方法
1、基本用法：vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗 有时候 可能需要缓存整个站点的所有页面,而页面一般一进去都要触发请求的 在使用keep-alive的情况下2.缓存部分页面或者组件(1)使用router.mate属性/*这是目前用的比较多的方式*/router设置:... routes: [ { path: '/', redirect: '/index', component: Index
2020-10-12 11:17:40
1167
1
原创 前端对于TypeScript初认识-面试
TypeScript是一种面向对象的编程语言。面向对象主要有两个概念：对象和类。TypeScript的基础语法不多，可以说学习起来会比学javascript快很多。TypeScript程序是由模块；函数；变量；语句和表达式；注释这几个部分组成。TypeScript 增加了代码的可读性和可维护性类型系统实际上是最好的文档，大部分的函数看看类型的定义就可以知道如何使用了可以在编译阶段就发现大部分错误，这总比在运行时候出错好增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、重构等Ty
2020-10-12 00:11:58
538
原创 vue组件通信适合使用的各种技术
父子通信：父向子传递数据是通过props，子向父是通过events（emit);通过父链/子链也可以通信（emit);通过父链/子链也可以通信（emit);通过父链/子链也可以通信（parent/children);ref也可以访问组件实例；provide/injectAPI;children); ref 也可以访问组件实例；provide/inject API;children);ref也可以访问组件实例；provide/injectAPI;attrs/$listeners。兄弟通信：Bus；Vu
2020-10-12 00:10:27
93
原创 前端开发及面试http状态码详解
状态码（Status Codes）服务器向用户返回的状态码和提示信息，常见的有以下一些（方括号中是该状态码对应的HTTP动词）。200 OK - [GET]：服务器成功返回用户请求的数据，该操作是幂等的（Idempotent）。201 CREATED - [POST/PUT/PATCH]：用户新建或修改数据成功。202 Accepted - []：表示一个请求已经进入后台排队（异步任务）204 NO CONTENT - [DELETE]：用户删除数据成功。400 INVALID REQUEST
2020-10-12 00:06:38
324
原创 vuex新手入门步骤以及使用详解
1.npm install vuex --save2.根目录建立store.js3.在store.js里面写：Import Vue from ‘vue’Import Vuex from ’vuex’Vue.use(Vuex)export default new Vuex.store({state:{ //存放唯一的公共数据源，存放的为全局共享的数据};mutation:{};action:{}})4.在App.vue中：import store from ‘…/store.js’；
2020-10-11 23:48:48
165
原创 vue-cli搭建过程出错问题总结
Vue-cli搭建出错1：eslint语法限制项目报错解决办法经过百度查询，原来eslint是一个语法检查工具，但是限制很严格，在我的vue文件里面很多空格都会导致红线(红线可以关闭提示)，虽然可以关闭，但是在编译的时候老是会跳出来，所以能关闭是最好的了。关闭方法：在build/webpack.base.conf.js文件中，注释或者删除掉：module->rules中有关eslint的规则2：重定向错误{path: ‘/’,redirect: ‘/home’}写错成 {path: ‘
2020-10-11 22:21:08
343
原创 Vue-cli webpack项目目录分析
Vue-cli webpack项目目录分析build及config：webpack配置相关node_modules:通过npm install安装的依赖代码库src：项目源码static：存放静态资源----.gitkeep：意思是就算这是个空文件，仍旧可以提交到代码版本库（因为一般如果为空文件夹，git会忽略这个文件夹）中。.babelrc：babel相关配置（因为我们的代码大多都是ES6，而大多浏览器是不支持ES6的，所以我们需要babel帮我们转换成ES5语法）.editorconfig
2020-10-11 22:19:57
140
原创 Vue中this使用详解
#在函数中使用##在函数中直接使用+严格模式和非严格模式this的指向问题-严格模式下this指向undefined-非严格模式下this是指向windowfunction get(){console.log(this)}get()function get(){‘use strict’console.log(this)}get()+函数在被直接调用的时候其中的this指针永远指向window+匿名函数的this总是指向window对象的+谁执行函数，this就指向谁+如果函
2020-10-11 14:05:46
4576
原创 promise axios ajax 的区别详解
介绍axios和promise一、axios的介绍axios 是由 promise 封装的一个 http 的库。promise是 es6 为解决异步编程的。什么是异步？ 1. 不会按照浏览器的加载方式 由上到下。前端哪里面有异步？ 1. 回调函数 2. 定时器 3. 事件绑定 4. ajax二、列举一个例子针对这个例子 会出现 层层回调函数的嵌套 我们称为(回调地狱)这样很不好 对我们后期的维护也很麻烦，所以出现了 promiseaxios是通过promise实
2020-10-11 14:04:44
5515
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人