- 博客(110)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 Vue.js 学习笔记：项目实战
项目实战使用技术栈：Vue 2.x + Vue CLI 4.x + Element UI 2.x。开发工具自选（ VS Code、HbuilderX、WebStorm），因本人主要是 Java 开发，使用 Idea 安装 Vue.js 插件即可开发，跟 WebStorm（个人感觉功能更全面、更易用，纯前端工作者推荐使用）功能一样 。这里需要安装两个插件 Vue.js 插件 和 element 插件。待续。。。...
2021-08-26 21:00:33
2715
原创 Vue.js 学习笔记十六：Axios 之 Axios 封装
目录Axios 封装Axios 封装src/plugins/http.jsimport axios from 'axios'import router from '../router'import store from '../store'import Vue from "vue"// 创建axios实例let instance = axios.create({ timeout: 1000 * 12})// 设置post请求头// instance.defaults.he
2021-08-26 20:57:26
263
原创 Vue.js 学习笔记十六：Axios 之拦截器
目录拦截器拦截器axios 提供了拦截器，用于我们在发送每次请求或者得到相应后，进行对应的处理。// 添加请求拦截器axios.interceptors.request.use(config => { // 在发送请求之前做些什么 return config }, error => { // 对请求错误做些什么 return Promise.reject(error) })// 添加响应拦截器axios.interceptors.
2021-08-26 20:51:16
392
2
原创 Vue.js 学习笔记十六：Axios 之响应结构和实例
目录响应结构Axios 实例响应结构一个请求的响应包含以下信息。{ // `data` 由服务器提供的响应 data: {}, // `status` 来自服务器响应的 HTTP 状态码 status: 200, // `statusText` 来自服务器响应的 HTTP 状态信息 statusText: 'OK', // `headers` 是服务器响应头 // 所有的 header 名称都是小写，而且可以使用方括号语法访问 // 例如: `
2021-08-23 13:50:55
595
原创 Vue.js 学习笔记十六：Axios 之全局配置和请求配置
目录全局配置请求配置全局配置在之前的示例中, 我们的 baseURL 是固定的。事实上，在开发中可能很多参数都是固定的。 这个时候我们可以进行一些抽取，也可以利用 axiox 的全局配置。axios.defaults.baseURL = 'http://127.0.0.1:8000'axios.defaults.headers.common['Authorization'] = AUTH_TOKENaxios.defaults.headers.post['Content-Ty...
2021-08-23 13:47:04
1051
原创 Vue.js 学习笔记十六：Axios 之基本使用
目录基本使用发起一个 GET 请求发起一个 POST 请求发送并发请求基本使用先说一下怎么安装和引入：npm install axios --saveimport axios from 'axios' //使用前引入axios 有很多请求方式，具体可以看一下官网的 API，下面先学习最基本的使用方式。发起一个 GET 请求axios.get(url[, config])import axios from 'axios'// 向给定id的用户发起
2021-08-20 09:06:18
179
原创 Vue.js 学习笔记十六：Axios 之什么是 Axios
什么是 Axios目录什么是 Axios在 Vue 的开发过程中能实现发送网络请求的方式有很多种，下面详细看一下每种方式和选 axios 的原因：1、传统的 Ajax 是基于 XMLHttpRequest（XHR）因为在项目开发中封装它的过程比较麻烦，配置和调用方式也比较混乱，一般开发不会用这种方式，而是用 jQuery-Ajax 。2、jQuery-Ajax，相对于传统的 Ajax 非常好用jQuery-Ajax 相对于传统的Ajax来说就比较好用了，但是在 Vue 的开发过程
2021-08-18 16:19:55
187
原创 Vue.js 学习笔记十五：Vuex 之 Vuex 核心概念和项目结构
目录Vuex 核心概念StateGettersMutationsActionsModules项目结构Vuex 核心概念Vuex 有几个比较核心的概念。 state 存放状态 mutations state成员操作 getters 加工 state 成员给外界 actions 异步操作 modules 模块化状态管理 StateVuex 使用单一状态树。是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数
2021-08-17 10:48:07
349
原创 Vue.js 学习笔记十五：Vuex 之 Vuex 安装和基本使用
Vuex 安装在保证我们处于我们项目下，在命令行输入下面命令，安装 Vuex：npm install vuex --save接下来我们在 src 目录下创建一个 store 文件夹，并在 store 文件夹下创建一个 index.js 文件。在 index.js 文件中，引入 vuex 并通过 Vue.use() 来安装 Vuex ：import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)基本使用每一个 Vuex
2021-08-10 11:25:17
149
原创 Vue.js 学习笔记十五：Vuex 之 Vuex 是什么
Vuex 是什么Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。什么是状态管理模式这个状态我们可以理解为在 data 中的属性，需要共享给其他组件使用的部分。也就是说，是我们需要共享的 data，使用 vuex 进行统一
2021-08-10 08:50:58
149
原创 Vue.js 学习笔记十四：Promise 之 async/await
目录async/awaitasync/awaitPromise 实际上是利用编程技巧将回调函数改成链式调用，避免回调地狱。最大问题是代码冗余，原来的任务被 Promise 包装了一下，不管什么操作，一眼看去都是一堆 then，原来的语义变得很不清楚。为了解决 Promise 的问题，async、await 在 ES7 中被提了出来，是目前为止最好的解决方案。async/await 基础语法 // 定义一个异步函数（假设他是一个异步函数） function queryDat
2021-08-04 09:15:19
520
原创 Vue.js 学习笔记十四：Promise 之 常用API：实例方法和对象方法
目录Promise 常用API实例方法对象方法Promise 常用API实例方法Promise 自带的API提供了如下实例方法： promise.then()：获取异步任务的正常结果。 promise.catch()：获取异步任务的异常结果。 promise.finaly()：异步任务无论成功与否，都会执行。 代码举例如下。写法1：<!DOCTYPE html><html> <head>
2021-07-30 18:52:00
306
原创 Vue.js 学习笔记十四：Promise 之 return 的函数返回值
目录return 的函数返回值return 的函数返回值return 后面的返回值，有两种情况： 返回 Promise 实例对象。返回的该实例对象会调用下一个 then。 返回普通值。返回的普通值会直接传递给下一个 then，通过 then 参数中函数的参数接收该值。 返回 Promise 实例对象<!DOCTYPE html><html> <head> <meta charset="utf-8"> <t
2021-07-29 18:09:09
9583
原创 Vue.js 学习笔记十四：Promise 之链式调用
目录Promise 链式调用Promise 链式调用实际开发中，我们经常需要同时请求多个接口。比如说：在请求完接口1的数据data1之后，需要根据data1的数据，继续请求接口2，获取data2；然后根据data2的数据，继续请求接口3。这种场景其实就是接口的多层嵌套调用。有了 promise 之后，我们可以把多层嵌套调用按照线性的方式进行书写，非常优雅。也就是说，Promise 可以把原本的多层嵌套调用改进为链式调用。代码举例：（多次 Ajax请求，链式调用）<!DOC
2021-07-28 09:16:25
1404
原创 Vue.js 学习笔记十四：Promise 之三种状态
目录Promise 三种状态Promise 三种状态 初始化状态（等待状态）：pending 成功状态：fullfilled 失败状态：rejected 当 new Promise() 执行之后，promise 对象的状态会被初始化为pending，这个状态是初始化状态。new Promise()这行代码，括号里的内容是同步执行的。括号里定义一个 function，function 有两个参数：resolve 和 reject。如下： 如果请求成功了.
2021-07-28 09:13:45
1306
原创 Vue.js 学习笔记十四：Promise 之介绍和基本用法
目录什么是 PromisePromise 的基本用法JavaScript 的执行环境是单线程。所谓单线程，是指 JS 引擎中负责解释和执行 JavaScript 代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务。这个任务可称为主线程。异步模式可以一起执行多个任务。常见的异步模式有以下几种： 定时器 接口调用 事件函数 js 中常见的接口调用方式，有以下几种： 原生 ajax 基于 jQu
2021-07-15 13:55:06
292
原创 Vue.js 学习笔记阶段案例：TabBar
目录阶段案例：TabBar阶段案例：TabBar如果在下方有一个单独的 TabBar 组件，你如何封装？效果图：实现思路首先自定义 TabBar 组件。在 APP 中使用，让 TabBar 位于底部，并且设置相关的样式。TabBar 中显示的内容由外界决定。定义插槽，flex 布局平分 TabBar。其次自定义 TabBarItem 组件，可以传入图标和文字。定义 TabBarItem，并且定义图标、文字两个插槽。给两个插槽外层包装 div，用于设置样式。填充插槽，实现.
2021-07-15 13:45:29
262
原创 Vue.js 学习笔记十三：Vue Router 之 keep-alive
目录keep-alivekeep-alive有时候我们不希望组件被重新渲染影响使用体验，或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到 keep-alive 组件。keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。如果未使用 keep-alive 组件，则在页面回退时仍然会重新渲染页面，触发 created 钩子，使用体验不好。 在一些场景中使用 keep-alive 组件会显著提高用户体
2021-07-06 10:06:00
361
1
原创 Vue.js 学习笔记十三：Vue Router 之导航守卫
目录导航守卫全局前置守卫全局后置钩子组件内的守卫导航守卫我们来考虑一个需求：在一个 SPA 应用中， 如何改变网页的标题呢？网页标题是通过 <title> 来显示的，但是 SPA 只有一个固定的 HTML，切换不同的页面时，标题并不会改变。但是我们可以通过 JavaScript 来修改 <title> 的内容。window.document.title = '新的标题'那么在 Vue 项目中， 在哪里修改？什么时候修改比较合适呢？普通的修改.
2021-07-01 08:22:40
449
2
原创 Vue.js 学习笔记十三：Vue Router 之路由组件传参
目录路由组件传参编程式路由传参通过 props 进行传递路由组件传参编程式路由传参通过 props 进行传递路由组件传参我们在开发单页面应用时，有时需要进入某个路由后基于参数从服务器获取数据，那么我们首先要获取路由传递过来的参数，从而完成服务器请求，所以，我们需要了解路由传参的几种方式。编程式路由传参除了使用 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。通过 params 传递路由配置，路径参数用冒号 :
2021-06-28 09:01:02
356
2
原创 Vue.js 学习笔记十三：Vue Router 之嵌套路由
目录嵌套路由嵌套路由嵌套路由是一个很常见的功能，比如在 home 页面中，我们希望通过 /home/news 和 /home/message 访问一些内容。一个路径映射一个组件， 访问这两个路径也会分别渲染两个组件。路径和组件的关系如下：/home/news /home/message+------------------+ +-----------------+| Home
2021-06-23 09:33:27
316
原创 Vue.js 学习笔记十三：Vue Router 之路由懒加载
目录路由懒加载路由懒加载当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。首先，我们知道路由中通常会定义很多不同的页面。一般情况下，是放在一个 js 文件中。但是，页面这么多放在一个 js 文件中，必然会造成这个页面非常的大。如果我们一次性从服务器请求下来这个页面，可能需要花费一定的时间， 甚至用户的电脑上还出现了短暂空白的情况。这个时候使用路由懒加载就可以了。路
2021-06-22 09:18:45
119
原创 Vue.js 学习笔记十三：Vue Router 之重定向和别名
重定向和别名重定向在开发当中，我们往往设置不同的路径进行跳转，但有时候不同的路径可能是同一个页面，或者说同一个组件，这时候就需要路由的重定向。下面是从 / 重定向到 /home：/src/router/index.js...
2021-06-21 09:05:05
216
原创 Vue.js 学习笔记十三：Vue Router 之命名路由和视图
命名路由和视图命名路由命名路由，就是在routers配置路由的时候给路由取个名。const routes = [ { path: '/goods/:id', name: 'goods', component: Goods }]这样的好处就是可以在使用router-link的to属性跳转路由的时候传一个对象从而实现与router.push一样的效果：...
2021-06-16 09:04:20
141
原创 Vue.js 学习笔记十三：Vue Router 之编程式的导航
编程式的导航除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。router.push(location, onComplete?, onAbort?)想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。当你点击 <router-link> 时，这个方法会在内部调用，所以说，
2021-06-15 17:02:28
283
1
原创 Vue.js 学习笔记十三：Vue Router 之动态路由
动态路由在某些情况下，一个页面的 path 路径可能是不确定的，比如我们进入商品详情界面时，页面结构都一样，只有商品 id 不同，这个时候就可以使用动态路由。
2021-06-10 14:09:59
119
原创 Vue.js 学习笔记十三：Vue Router 之基本使用
基本使用创建路由页面组件/src/views/home.vue<template> <div> <h2>我是首页的标题</h2> <p>我是首页的内容</p> </div></template><script> export default { name: 'home' }</script><style></style>
2021-06-08 11:17:55
491
2
原创 Vue.js 学习笔记十三：Vue Router 之安装和配置
目录安装和配置安装配置安装和配置Vue Router 是 Vue.js 官方的路由插件，它和 vue.js 是深度集成的，适合用于构建单页面应用。官方文档：Vue Router (vuejs.org)包含的功能有： 嵌套的路由/视图表 模块化的、基于组件的路由配置 路由参数、查询、通配符 基于 Vue.js 过渡系统的视图过渡效果 细粒度的导航控制 带有自动激活的 CSS class 的链接 HTML5 历史模
2021-06-07 11:48:36
135
原创 Vue.js 学习笔记十三：Vue Router 之认识路由
目录认识路由认识路由路由是一个网络工程里面的术语。路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动在生活中，我们都知道路由器，路由器提供了两种机制：路由和转送。路由是决定数据包从来源到目的地的路径。转送将输入端的数据转移到合适的输出端。路由中有一个非常重要的概念叫路由表。路由表本质上就是一个映射表，决定了数据包的指向。后端路由阶段早期的网站开发整个 HTML 页面是由服务器来渲染的。服务器直接生产渲染好对应的 HTML 页面，返回给客户端进行展示
2021-06-04 09:24:57
112
原创 Vue.js 学习笔记十二：Vue CLI 之项目自定义配置
目录项目自定义配置项目自定义配置我们查看项目结构，没有发现配置文件，那一大堆配置文件去哪里了？其实构建工具已经默认设置了一些配置，可以通过 GUI 界面查看和修改。vue ui导入当前项目自动跳转到项目仪表盘界面通过左边的导航可以查看项目已安装的插件，运行依赖和开发依赖，项目默认配置，可执行的命令任务。通过这个界面可以查看或修改默认配置。同时也提供了一个 可选的配置文件 vue.config.js，如果项目的 (和 package.json 同级的.
2021-06-02 10:24:27
327
原创 Vue.js 学习笔记十二：Vue CLI 之创建一个项目
目录Vue CLI创建一个项目Vue CLI创建一个项目运行以下命令来创建一个新项目：vue create vuecli-demo你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”（使用↑ ↓箭头切换，Enter 确认）来选取需要的特性。Vue CLI v4.5.12? Please pick a preset: (Use arrow keys)> Default ([Vue
2021-06-01 08:27:10
9935
1
原创 Vue.js 学习笔记十二：Vue CLI 之 Vue CLI 介绍和安装使用
Vue CLI 介绍Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供： 通过 @vue/cli 实现的交互式的项目脚手架。 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。 一个运行时依赖 (@vue/cli-service)，该依赖： 可升级； 基于 webpack 构建，并带有合理的默认配置； 可以通过项目内的配置文件进行配置； 可以通过插件进行
2021-05-31 14:19:41
113
原创 Vue.js 学习笔记十一：Webpack之webpack 配置 配置文件分离
目录webpack 配置配置文件分离webpack 配置配置文件分离随着我们业务逻辑的增多，图片、字体、css、ES6 以及 CSS 预处理器和后处理器逐渐的加入到我们的项目中来，进而导致配置文件的增多，使得配置文件书写起来比较繁琐，更严重者（书写特定文件的位置会出现错误）。更由于项目中不同的生产环境和开发环境的配置，使得配置文件变得更加糟糕。使用单个的配置文件会影响到任务的可重用性，随着项目需求的增长，我们必须要找到更有效地管理配置文件的方法。配置文件的管理有一下几种方法。
2021-05-26 13:46:28
215
2
原创 Vue.js 学习笔记十一：Webpack之webpack 配置 搭建本地服务器
目录webpack 配置搭建本地服务器webpack 配置搭建本地服务器webpack 提供了一个可选的本地开发服务器，这个本地服务器基于 node.js 搭建，内部使用 express 框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。不过它是一个单独的模块，在 webpack 中使用之前需要先安装它。npm install webpack-dev-server --save-dev修改 webpack 配置文件，告知 dev server，从什么位置..
2021-05-23 19:49:31
168
原创 Vue.js 学习笔记十一：Webpack之webpack 配置 plugin，mode
目录webpack 配置插件(plugin)添加版权的 plugin打包 html 的 pluginjs 压缩的 plugin模式(mode)webpack 配置插件(plugin)loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多
2021-05-19 09:30:21
848
3
原创 Vue.js 学习笔记十一：Webpack之webpack 配置 配置使用 Vue
目录配置使用 Vue项目中使用el 和 template 区别Vue 组件化开发引入.vue 文件封装处理配置使用 Vue后续项目中，我们会使用 Vue 进行开发，而且会以特殊的文件来组织 Vue 的组件。所以，下面我们来学习一下如何在我们的 webpack 环境中集成 Vue。项目中使用现在，我们希望在项目中使用 Vue，那么需要对其有依赖，所以需要先进行安装：npm install vue --save-dev注：因为我们后续是在实际项目中也会使用 .
2021-05-17 09:29:17
334
原创 Vue.js 学习笔记十一：Webpack之webpack 配置 entry，output，loader
目录webpack 配置一入口(entry)输出(output)loader加载 css编译 less图片文件处理使用 babel-loader转换 ES6webpack 配置一从 v4.0.0 开始，webpack 开箱即用，可以无需使用任何配置文件。然而，webpack 会假定项目的入口起点为 src/index.js，然后会在 dist/main.js 输出结果，并且在生产环境开启压缩和优化。通常你的项目还需要继续扩展此能力，为此你可以在项目根目录下创建一个
2021-05-13 09:51:31
1740
1
原创 Vue.js 学习笔记十一：Webpack之webpack 基本使用
目录webpack 基本使用webpack 基本使用运行 webpack 5 的 Node.js 最低版本是 10.13.0 (LTS)。Window 版本只能通过卸载重装进行升级。首先我们创建一个目录，初始化 npm，然后在本地安装，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）：mkdir webpack-democd webpack-demonpm init -ynpm install webpack webpack-cli -D现在，
2021-05-12 09:10:31
164
原创 Vue.js 学习笔记十一：Webpack之webpack 介绍和安装
目录webpack 介绍和安装webpack 介绍webpack 安装webpack 介绍和安装webpack 介绍Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。 而 webpack 其中一个核心就是让我们可能进行模块化开发，并
2021-05-10 13:59:36
114
原创 Vue.js 学习笔记十：模块化开发之ES6 模块化导入导出
目录ES6 模块化导入导出export 使用import 使用export default 使用ES6 模块化导入导出export 使用导出一个变量export var name = '小明';导出一个函数export function say(msg){}常用导出方式（推荐）// person.jsvar name = '小明'var age = 18function say(msg) { console.log(msg)}...
2021-05-08 13:47:29
137
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人