零碎@流年絮语 的博客

axios的由来axios: ajax + i/o + system功能模块在浏览器中发送 XMLHttpRequests 请求在 node.js 中发送 http请求支持 Promise API拦截请求和响应转换请求和响应数据axiox请求方式axios(config)axios.request(config)axios.get(url[, config])axios.delete(url[, config])axios.head(url[, config])axios.

文章目录Promise的使用认识PromisePromise到底是做什么的呢？那什么时候我们会来处理异步事件呢？Promise的基本使用定时器的异步事件定时器异步事件解析Promise的三种状态Promise链式调用需要两次异步请求Promise的使用认识PromisePromise到底是做什么的呢？Promise是异步编程的一种解决方案。那什么时候我们会来处理异步事件呢？一种很常见的场景应该就是网络请求了。封装一个网络请求的函数，因为不能立即拿到结果，所以不能像简单的3+4=7一样将结果返

商城相关项目TabBar实现思路1. 如果在下方有一个单独的TabBar组件，如何封装？自定义TabBar组件，在APP中使用让TabBar出于底部，并且设置相关的样式2.TabBar中显示的内容由外界决定定义插槽flex布局平分TabBar3.自定义TabBarItem，可以传入 图片和文字定义TabBarItem，并且定义两个插槽：图片、文字。给两个插槽外层包装div，用于设置样式。填充插槽，实现底部TabBar的效果4.传入 高亮图片定义另外一个插槽，插入acti

什么是导航守卫?vue-router提供的导航守卫主要用来监听路由的进入和离开的。vue-router提供了beforeEach和afterEach的钩子函数，它们会在路由即将改变前和改变后触发。导航守卫使用利用beforeEach来完成标题的修改可以在钩子当中定义一些标题, 可以利用meta来定义利用导航守卫,修改我们的标题导航钩子的三个参数解析:to: 即将要进入的目标的路由对象from: 当前导航即将要离开的路由对象next: 调用该方法后, 才能进入下一个钩子后置钩子,

vue-router 传递参数的方式传递参数主要有两种类型: params和query第一步: 创建新的组件XXX.vue第二步: 配置路由映射第三步: 添加跳转的<router-link>params的类型:配置路由格式: /router/:id传递的方式: 在path后面跟上对应的值传递后形成的路径: /router/123，/router/abcquery的类型:配置路由格式: /router，也就是普通配置传递的方式: 对象中使用query的key作为传递方

webpack配置及简单案例文件和文件夹解析：dist文件夹：用于存放 之后打包的文件。src文件夹：用于存放 源文件。main.js：项目的入口文件。mathUtils.js：定义了一些数学工具函数，可以在其他地方引用，并且使用。index.html：浏览器打开展示的首页htmlpackage.json：通过npm init生成的，npm包管理的文件js文件的打包现在的js文件中使用了模块化的方式进行开发，不可以直接使用 的原因：因为如果直接在index.html引入这两个js文件，

嵌套路由嵌套路由是一个很常见的功能比如在home页面中, 我们希望通过/home/news和/home/message访问一些内容一个路径映射一个组件,访问这两个路径也会分别渲染两个组件.路径和组件的关系如下：实现嵌套路由有两个步骤创建对应的子组件, 并且在路由映射中配置对应的子路由在组件内部使用<router-view>标签嵌套路由实现嵌套默认路径...

认识路由的懒加载官方的解释:当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了官方想表达的意思首先，我们知道路由中通常会定义很多不同的页面。这个页面最后被打包在哪里呢? 一般情况下，是放在一个js文件中。但是，页面这么多放在一个js文件中, 必然会造成这个页面非常的大。如果我们一次性从服务器请求下来这个页面， 可能需要花费一定的时间，甚至用户的电脑上还出现了短暂空

路由 的基本配置目前前端流行的三大框架, 都有自己的路由实现：Angular的ngRouterReact的ReactRouterVue的vue-routervue-router是基于路由和组件的路由用于设定访问路径，将路径和组件映射起来。在vue-router的单页面应用中，页面的路径的改变就是组件的切换。安装和使用vue-router利用npm来安装路由步骤一: 安装vue-routernpm install vue-router --save步骤二: 在模块化工程中使用它

路由通过互联的网络把信息从源地址传输到目的地址的活动路由器的两种机制：路由和转送路由是决定数据包从来源到目的地的路径。转送将输入端的数据转移到合适的输出端。路由表本质上就是一个映射表, 决定了数据包的指向网站开发的三个阶段后端路由阶段整个HTML页面是由服务器来渲染的。服务器直接生产渲染好对应的HTML页面，返回给客户端进行展示。后端处理URL和页面之间的映射关系.后端渲染jsp一个网站, 这么多页面服务器如何处理呢?一个页面有自己对应的网址, 也就是URL。URL会发送到

1.URL的hashURL的hash也就是锚点(#)，本质上是改变window.location的href属性可以通过直接赋值location.hash来改变href，但是页面不发生刷新location.href"http://localhost:8080/#/"location.hash='/'"/"location.href"http://localhost:8080/#/"location.hash='/foo'"/foo"location.href"http://loca

箭头函数:一种定义函数的方式直接定义函数 const aaa = function () { }对象字面量中定义函数 const obj = { bbb() { } }.ES6中的箭头函数 // const ccc = (参数列表) => { // // } const ccc = () => { }箭头函数参数问题一个参数 const power = num => { return num * num

VUECLI2初始化项目过程+++++++++++++++VUECLI3/4初始化项目过程+++++++++++++++Runtime-Compiler和Runtime-only的区别如果在之后的开发中，依然使用template，就需要选择Runtime-Compiler如果在之后的开发中，使用的是.vue文件夹开发，那么可以选择Runtime-onlyrender和templateRuntime-Compiler 和 Runtime-onlyVue程序运行过程render函数的使

VUECLI2创建项目格式：vue init webpack vuecli2test会出现以下提示：1.项目名称不能包含大写字母? Project name vuecli2test2.项目描述? Project description test vue cli23.项目作者默认从git中读取信息? Author liudw4.项目准则? Vue build standalone5.项目是否安装路由? Install vue-router? Yes6.项目是否需要ES

VUECLI3/4创建项目格式：1.选择配置方式? Please pick a preset: Manually select features2.选择自己需要的配置，空格选中或者反选? Check the features needed for your project: Choose Vue version, Babel3.选择vue版本? Choose a version of Vue.js that you want to start the project with 2.x

npm run的本质npm run是npm run-script的简写，顾名思义就是执行脚本。执行的脚本配置在package.json中的scripts对象。npm run build首先在package.json中的scripts里面找build优先在本地寻找webpack，没找到时，再全局寻找webpackhttps://blog.youkuaiyun.com/qq_34817440/article/details/104558785?utm_medium=distribute.pc_relevant.

搭建本地服务器webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。本地开发服务器是一个单独的模块，在webpack中使用之前需要先安装它npm install --save-dev webpack-dev-server@2.9.1devserver也是作为webpack中的一个选项，选项本身可以设置如下属性：contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们

认识pluginplugin是什么？plugin是插件的意思，通常是用于对某个现有的架构进行扩展。webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等。loader和plugin区别loader主要用于转换某些类型的模块，它是一个转换器。plugin是插件，它是对webpack本身的扩展，是一个扩展器。plugin的使用过程：步骤一：通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)步骤二：在webpack.confi

如何在我们的webpack环境中集成Vuejs在项目中使用Vuejs，那么必然需要对其有依赖，所以需要先进行安装注：因为我们后续是在实际项目中也会使用vue的，所以并不是开发时依赖npm install vue --save那么，接下来就可以按照我们之前学习的方式来使用Vue了import Vue from 'vue'let app = new Vue({ el: '#app', data: { message: 'Hello', }})修改we

如果你仔细阅读webpack打包的js文件，发现写的ES6语法并没有转成ES5，那么就意味着可能一些对ES6还不支持的浏览器没有办法很好的运行的代码。如果希望将ES6的语法转成ES5，那么就需要使用babel。而在webpack中，我们直接使用babel对应的loader就可以了。npm install --save-dev babel-loader@7 babel-core babel-preset-es2015配置webpack.config.js文件 { test

图片文件的配置资源准备首先，在项目中加入两张图片：一张较小的图片test01.jpg(小于8kb)一张较大的图片test02.jpeg(大于8kb)建议8KB，因为在module中limit默认是8KB，也可以自己修改更改了normal.css中的样式：body { /*background-color: red;*/ background: url("../img/timg.jpg");}url-loader安装图片处理，使用url-loader来处理，依然先安装url-

目录如下所示：1.编写CSS代码例如：body { background-color: aquamarine;}2.在入口文件main.js中添加依赖require('./css/normal.css')3.在webpack.config.js模块出口中添加如下模块module: { rules: [{ test: /\.css$/i, use: ["style-loader", "css-loader"],

什么是Webpack？At its core, webpack is a static module bundler for modern JavaScript applications.从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。实质就是 模块 和 打包打包如何理解呢？理解了webpack可以帮助我们进行模块化，并且处理模块间的各种复杂关系后，打包的概念就非常好理解了。就是将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)。并

导出 exportexport指令用于导出变量方法一export let height = 1.88;export function mul(num1, num2) { return num1 * num2;}export class Person { run() { console.log("running"); }}export default function(argument) { console.log(argument);}方

slot 插槽组件的插槽组件的插槽也是为了让我们封装的组件更加具有扩展性。让使用者可以决定组件内部的一些内容到底展示什么。如何去封装这类的组件呢？slot它们也很多区别，但是也有很多共性。如果，我们每一个单独去封装一个组件，显然不合适：比如每个页面都返回，这部分内容我们就要重复去封装。但是，如果我们封装成一个，好像也不合理：有些左侧是菜单，有些是返回，有些中间是搜索，有些是文字，等等。如何封装合适呢？抽取共性，保留不同。最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽。一旦我

编译作用域先来考虑下面的代码是否最终是可以渲染出来的：<my-cpn v-show="isShow"></my-cpn>中，我们使用了isShow属性。isShow属性包含在组件中，也包含在Vue实例中。**答案：**最终可以渲染出来，也就是使用的是Vue实例的属性。为什么呢？官方给出了一条准则：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。而在使用<my-cpn v-show="isShow"></my-cpn

父子组件的访问方式有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问跟组件。父组件访问子组件：使用 $children或 $refs reference(引用)子组件访问父组件：使用$parent$childrenthis.$children是一个数组类型，它包含所有子组件对象。可以通过一个遍历，取出所有子组件的message状态。<!DOCTYPE html><html lang="en"><head> <met

案例说明：条件1： 在父组件中的data有两个值：num1、num2，初始状态分别为1 、0。条件2： 通过props传值可以在子组件中显示。存在一个输入框：与子组件数据进行双向绑定并通过自定义事件传到父组件，引起父组件的数值的改变。条件3： 第一个输入框输入数据值，子组件中的第二个数值为第一个数值的100倍代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8

父子组件的通信子组件是不能引用父组件或者Vue实例的数据的，但是，在开发中，往往一些数据确实需要从上层传递到下层：比如在一个页面中，我们从服务器请求到了很多的数据。其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示。这个时候，并不会让子组件再次发送一个网络请求，而是 直接让大组件(父组件)将数据传递给小组件(子组件)。如何进行父子组件间的通信呢？通过props向子组件传递数据通过自定义事件向父组件发送消息在下面的代码中，我直接将Vue实例当做父组件，并且其中

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="vue.js"></script&

Vue 组件化开发什么是组件化？如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。但如果，我们讲一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。将一个完整的页面分成很多个组件。每个组件都用于实现页面的一个功能块每一个组件又可以进行细分。Vue组件化思想它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。任何的应用都会被抽象成一颗组件树 。组件

全局组件调用Vue.component()注册组件时，组件的注册是全局的这意味着该组件可以在任意Vue示例下使用。let cpnC = Vue.extend({ template: ` <h2>全局组件</h2> ` }) Vue.component('my-cpn1', cpnC); let app1 = new Vue({ el:

组件树组件和组件之间存在层级关系一种非常重要的关系就是父子组件的关系我们来看通过代码如何组成的这种层级关系：父子组件用法父子组件错误用法：以子标签的形式在Vue实例中使用解析：因为当子组件注册到父组件的components时，Vue会编译好父组件的模块该模板的内容已经决定了父组件将要渲染的HTML（相当于父组件中已经有了子组件中的内容了）<child-cpn></child-cpn>是只能在父组件中被识别的，在编译过程中实际上被替换掉了。类似这种用法，<c

v-model 修饰符lazy修饰符：默认情况下，v-model默认是在input事件中同步输入框的数据的，一旦有数据发生改变对应的data中的数据就会自动发生改变。lazy修饰符可以让数据在失去焦点或者回车时才会更新<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-

radio（单选按钮）可通过name属性来实现条件互斥也可通过v-model来实现条件互斥<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</tit

select 类型单选：只能选中一个值。v-model绑定的是一个值。当我们选中option中的一个时，会将它对应的value赋值到mySelect中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

v-model数据的双向绑定在原生表中（最简单的实现方法）<input type="text" v-model="name">原理先给input绑定value属性值为数据name给input绑定input事件将其input的value值赋给数据name第一种写法：<input type="text" :value="name" @input="name=$event.target.value">第二种写法：<input type="text" :

错误分析：无法识别webpack.config.js文件报错的原因：第一种情况：webpack.config.js文件所在路径不对webpack.config.js文件应该在根目录下，而不是在src文件夹中第二种情况：webpack.config.js文件解析错误在package.json文件中，找到scripts，查看build的属性值，例1："build": "webpack"上面是代码中的build，对应的工程项目结构如下例2："build": "webpack --confi

高阶函数JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。编程范式命令式编程关注计算机执行的步骤，即一步一步告诉计算机先做什么再做什么DOM——数据——DOM声明式编程告诉计算机应该做什么，但不指定具体要怎么做DOM——数据——变量更新sort()函数默认把所有元素先转换为String再排序var arr = [10, 20, 1, 2];arr.sort(function (

代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href=".