lichanzhaifeng的博客

转载 Vuex白话教程第一讲：Vuex到底是个什么鬼？

先说两句官方已经有教程了，为什么还要写这个教程呢？说实话，还真不是我闲着蛋疼，官方的教程真的是太官方了，对于刚入门 Vuex 的童鞋来说，想必看官方的教程，很多地方就如同看圣经一样，比如「欧玛尼玛尼牙」，所有的字都认识，就是不知道说些什么玩意，不信，你可以戳进去看看。当然，对于大神级别一看就懂的，那就不用说了，肯定是看官方的更权威。还有，如果对 Flux、Redux、The Elm Architecture 比较熟悉的话，也可以移步官方，因为官方也说了，Vuex 的套路基本上都是从那边吸取整合后，过渡而

原创 vue中使用swiper( vue-awesome-swiper4.0及以上版本)缩略图轮播

效果图：1.npm安装npm install swiper vue-awesome-swiper --savevue-awesome-swiper4.0以上版本一定要swiper 和 vue-awesome-swiper4.0一起安装，否则会报错2.组件里调用完整代码<template> <div class="thumb-example"> <!-- swiper1 --> <swiper class="swiper galler

转载 vue.cli项目封装全局axios，封装请求，封装公共的api和调用请求的全过程

目录前言正文一、vue项目的前期配置二、配置config文件中的代理地址vue cil2旧版本的代理配置——config/index.jsvuecil 3+ 新版本的代理配置–vue.config.js 文件三、封装axios实例 —— request.js四、封装请求——http.js五、正式封装API，用于发送请求——api.js六、如何在vue文件中调用结语前言在做vue中大型项目的时候，官方推荐使用axios，但是原生的axios可能对项目的适配不友好，所以，在工程开始的来

原创 第 2 章 使用 JavaScrip

1.创建一张 HTML 页面虽然现在很多教材开始使用 html5 来讲解 JavaScript 课程。但我认为这样可能比较超前 ，对于 JavaScript 初学者，我们还是用比较普及和稳定的 xhtml1.x 来创建一张页面。很多时候，你无法记住 xhtml1.x 过渡性的标准格式。这个时候，建议打开 Dreamweaver来获取。页面创建好后，编写一个最简单的 JavaScript 脚本（简称 JS 脚本）。注意网页的编码格式及文件存储的编码。2.这组标签，是用于在 html 页面中插入 j

原创 第一章 JavaScript概述

1.什么是 JavaScriptJavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。因为他不需要在一个语言环境下运行，而只需要支持它的浏览器即可。它的主要目的是，验证发往服务器端的数据、增加 Web互动、加强用户体验度等。2.JavaScript 特点松散性JavaScript 语言核心与 C、C++、Java 相似，比如条件判断、循环、运算符等。但，它却是一种松散类型的语言，也就是说，它的变量不必具有一个

转载 Vuex白话教程第六讲：Vuex的管理员Module（实战篇）

写在前面这一讲是 Vuex 基础篇的最后一讲，也是最为复杂的一讲。如果按照官方来的话，对于新手可能有点难以接受，所以想了下，决定干脆多花点时间，用一个简单的例子来讲解，顺便也复习一下之前的知识点。首先还是得先了解下 Module 的背景。我们知道，Vuex 使用的是单一状态树，应用的所有状态会集中到一个对象中。如果项目比较大，那么相应的状态数据肯定就会更多，这样的话，store 对象就会变得相当的臃肿，非常难管理。这就好比一家公司只有老板一个人来管理一样。如果小公司倒还好，公司要是稍微大一点，那就麻烦

转载 Vuex白话教程第五讲：Vuex的小帮

先说两句前面已经讲完了 Vuex 下的 State、Getter、Mutation 及 Action 这四驾马车，不知道大家是否已经理解。当然，要想真正熟练掌握的话，还是需要不断的练习和动手实践才行。其实只要把这四驾马车完全熟练驾驭了，那么应对一些中小型的项目，基本上就已经没啥问题了，后面的 Module 这架终极马车，其实是为了搞定那些稍微大型复杂一点的项目，避免 store 里面的数据太多，难以管理而设计，这驾马车稍微比较抽象，不太好驾驭，我们下一讲再来详细的去剖解它。Vue 里面的很多配套设施，

转载 Vuex白话教程第四讲：Vuex旗下的Action

写在前面通过上一讲「Vuex 旗下的 Mutation」，我们知道了如何去修改 State 的数据，而且只能通过 Mutation 去提交修改，另外还了解到了 Mutation 必须是同步函数，那么如果需求当中必须要用到异步函数怎么办？好办，那就轮到 Action 上场了。简单介绍Action 类似于 mutation，不同在于：1、Action 提交的是 mutation，而不是直接变更状态。2、Action 可以包含任意异步操作。看一个简单的 action 示例：const store

转载 Vuex白话教程第三讲：Vuex旗下的Mutation 大宏说

写在前面上一讲「Vuex 旗下的 State 和 Getter」，告诉了我们怎么去使用仓库 store 中的状态数据。当然，光会用肯定还不够，大部分的应用场景还得对这些状态进行操控，那么具体如何操控呢，这就是这一讲要说的重点。只有 mutation 能动 State更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调

转载 Vuex白话教程第二讲：Vuex旗下的State和Getter

先说两句上一讲 「Vuex 到底是个什么鬼」，已经完美诠释了 Vuex 的牛逼技能之所在（纯属自嗨）。如果把 Vuex 比喻成农药里面的刘备，那就相当于你现在已经知道了刘备他是一个会打枪的力量型英雄，而且他打的枪还是双排量的，认识到这一点后，那么接下来就是要了解他到底是如何打枪的，是左手打，还是右手打，还是双手一起端着枪打？同样，我们已经知道了 Vuex 就如同一个全局的管理员一样，帮着我们统一管理着项目的共享数据，那它到底是通过什么样的方式去管理的呢？我们应该如何与这个管理员进行沟通和交流，才能有效的

原创 好笔记收藏

好笔记收藏/** * 移动端重力感应 * @date 2018/12/25 * @param {boolean} flag * @param {function} callback * @returns {void} */function device(flag,callback) { if (!flag) return; if(typeof callback !== "function") return; if (window.DeviceOrientationE

原创 git常用命令速查表

原创 关于map，filter，some，every，forEach，for in，findIndex

原创 简单讲述axios设置token到请求头以及二次封装调用

安装axios到项目中npm install axios --save封装一个axios实例 新建request.js,在此创建axios实例与过滤器// 创建axios实例import axios from 'axios'const service= axios.create({ baseURL:“ ”, // api的base_url timeout: 10000, // 请求超时时间 // transformRequest: data

原创 vue项目使用.env文件配置全局环境变量

文件定义的方式如上开头必须以VUE_APP_[定义的名字]

原创 ES6：浅谈export default 和 export 区别

export default 和 export 区别：1.export与export default均可用于导出常量、函数、文件、模块等2.你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用3.在一个文件或模块中，export、import可以有多个，export default仅有一个4.通过export方式导出，在导入时要加{ }，export default则不需要1.export//a.jsexport const

原创 css几种常见的单位

css几种常见的单位1、px (pixel，像素)：是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。2、em(相对长度单位，相对于当前对象内文本的字体尺寸)：是一个相对长度单位，最初是指字母M的宽度，故名e

原创 关于新版 swiper,vue-awesome-swiper的正确使用方法

vue-awesome-swiper的使用1、安装npm install swiper vue-awesome-swiper --save( vue-awesome-swiper 4.0以上的版本一定要 swiper vue-awesome-swiper两个一起安装，否则会报错)# oryarn add swiper vue-awesome-swiper2、在vue中引入1.全局引入方法进入maim.js文件import Vue from 'vue'import VueAwesomeS

原创 javascript 数组

数组数组的概念数组的定义数组的使用数组的常用函数1.数组的概念 数组的字面意思就是一组（一般情况下是相同的类型）数据。 作用：使用单独的变量来存储一系列的值。2.数组的定义 new Arry（参数，参数，……..）：只有一个参数时表示数组的长度；var arr0= new Array（）;//定义一个空数组var arr1 = new

转载 vue cli4.0 快速搭建项目详解

*搭建项目之前，请确认好你自己已经安装过node, npm, vue cli。没安装的可以参考下面的链接安装。如何安装node?安装好node默认已经安装好npm了，所以不用单独安装了。如何安装vue cli?剧场环境已搭建好，开始表演！1.进入一个目录，创建项目对应命令：vue create project-one2.我们这里选择手动配置按 ↓ 选择“Manually select features”，再按 Enter3.选择你需要的配置项通过↑ ↓ 箭头选择你要配置的项，按

转载 # vue+JavaScript实现slideDown与slideUp效果

vue+JavaScript实现slideDown与slideUp效果整段代码如下代码片.// An highlighted block<template> <div style="width:400px;margin:100px auto;"> <div class="con"> &lt...