A-Select °

原创 vue项目中使用echarts

1.安装echarts依赖npm install echarts --save-dev2.main.js 引入 将其绑定到vue原型上import * as echarts from 'echarts'Vue.prototype.$echarts = echarts3. 接着，我们就可以在任何一个组件中使用echarts了，接下来我们在初始化项目中的helloWorld组件中使用echarts配置图标，具体如下：<template> <div class="he

原创 vue面试题

面试题一、请你简述vue的生命周期钩子函数beforeCreate 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。created 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。这里没有$el。beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用。mounted el 被新创建的 vm.$el 替换

原创 vue源码学习第九篇--VueX（状态管理器）

详见VueX（Vue状态管理模式)

原创 vue路由传递参数的方式

传递参数主要有两种类型: params 和 queryparams的类型:配置路由格式: /router/:id传递的方式: 在path后面跟上对应的值传递后形成的路径: /router/123, /router/abcquery的类型:配置路由格式: /router, 也就是普通配置传递的方式: 对象中使用query的key作为传递方式传递后形成的路径: /router?id=123, /router?id=abc传递参数方式一: <router-link>传递参数方式

原创 vue源码学习第八篇--Vue-router学习

Vue-router介绍Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表；模块化、基于组件的路由配置；路由参数、查询、通配符；基于 Vue.js 过渡系统的视图过渡效果；细粒度的导航控制；带有自动激活的 CSS class 的链接；HTML5 历史模式或 hash 模式，在 IE9 中自动降级；自定义的滚动条行为。由 前端 来控制页面的跳转（但其实是个单页面），根据不同的 url 地址展示不同的内

原创 vue源码学习第七篇--Vue-router 中hash模式和history模式的区别

在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的mode:"hash"; mode:"history";hash模式和history模式的不同对于vue这类渐进式前端开发框架，为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。前端路由的核心，就在于 —— 改变视图的同时不会向后端发出请求。为了达到这一目的，浏览器当前提供了以下两种支持：hash —— 即地址栏 URL 中

原创 vue源码学习第六篇--插槽(slot)

我们在构建页面过程中一般会把用的比较多的公共的部分抽取出来作为一个单独的组件，但是在实际使用这个组件的时候却又不能完全的满足需求，我希望在这个组件中添加一点东西，这时候我们就需要用到插槽来分发内容。以下文章来自掘金 作者：JH30K 链接：https://juejin.im/post/5ed61cd86fb9a047a43444d6文章目录一、前言二、插槽是什么三、插槽的作用四、插槽的分类1. 默认插槽2. 具名插槽3. 作用域插槽一、前言vue官方文档中在"组件基础"内容中提到组件可以通过插槽分发

原创 vue源码学习第五篇--父子组件通信方式

文章目录props(父组件向子组件传值)$emit（子组件发送数据）$on (子组件接收数据)$parent / $children与 ref总结props(父组件向子组件传值)vue中父子组件通信的第一种方式是通过props属性。是父组件向子组件通信。接下来我们通过一个例子，说明父组件如何向子组件传递值：在子组件Users.vue中如何获取父组件App.vue中的数据 users:["Henry","Bucky","Emily"]//App.vue父组件<template> &l

原创 webpack详解

什么是WebpackWebPack可以看做是 模块打包机 ：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。webpack，gulp/grunt，npm，它们有什么区别?webpack 是模块打包器（module bundler），把所有的模块打包成一个或少量文件，使你只需加载少量文件即可运行整个应用，而无需像之前那样加载大量的图片，css文件，js文件，字体文件等等。

原创 vue源码学习第四篇--指令以及修饰符

VUE常见指令通常指令（Directives）是指带有v-属性的特殊属性。在Vue给HTML元素增加了自定义属性你，它们都是以"v-"开头了v-text： 更新元素的textContent，如果要更新部分的textContent，需要使用{{}}v-html：更新元素的innerHTMLv-show：也是用于根据条件展示元素。和v-if不同的是，如果v-if的值是false，则这个元素被销毁，不在dom中。但是v-show的元素会始终被渲染并保存在dom中，它只是简单的切换css的dispaly属性

转载 浏览器兼容性问题和解决方案

简述    所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。常见的浏览器内核（渲染引擎）    四种内核： Trident、Gecko、Blink、Webkit浏览器内核IE浏览器Trident 内核，也成为 IE 内核Chrome浏览器Webkit 内核，现在是 Blink 内核Firefox浏览器Gecko 内核，俗称 Firefox 内核Safari浏览器Webkit 内核Opera浏览器

原创 vue源码学习第三篇--vue的生命周期

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁。实例、组件通过new Vue()创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的dom，一般不做操作挂载数据，绑定事

原创 vue源码学习第二篇--安装vue脚手架与项目结构简述

刚开始，建议先不要用手脚架搭建环境，特别是对nodejs不熟悉的，可以先忽略这个章节，采用引入本地vue库的方式。Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js当我们熟悉vue后，就会发现依赖的库越来越多，依靠开发人员维护容易出错，特别是团队协作时，成本非常高，此时就需要一种工具能帮我们解决这个问题，同时帮我们搭建一套完成的项目结构。该工具就是我们脚手架（vue-cli）。一、安装脚手架1.安装node

原创 vue源码学习第一篇--理解双向数据绑定原理

一、原理（1）vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式 的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；代码：（2）核心：通过 Object.defineProperty() 方法；（3）介绍 Object.defineProperty() 的使用方法：Object.defineProperty(obj, prop, descriptor) ，这个语法内有三个参数，分别为 obj（要定义其上属性的对象） prop （要定义或

原创 Creating Server TCP listening socket 127.0.0.1:6379: bind: No error 启动遇到的解决办法

原创 yarn的安装和常用命令

yarn是什么？简单来说是和npm一样的包管理工具，并对npm的一些弊端提供了优化和解决方案yarn和npm的区别？安装速度更快，缓存了每个下载过的包，再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，运行代码前会校验每个安装包的完整性和统一性，使其在不同系统上也能无差别的工作yarn最常用最基础的命令和npm对比npm init / yarn init 初始化mkdir 文件名 / md 文件名npm install / yarn或yarn install 安装依赖

原创 Git

一、Git是什么Git 是一个免费并且开源的分布式版本控制系统，在快速高效地处理从小到大所有项目的版本管理。Git 非常容易学习，低植入，高性能。因为拥有轻量的本地分支，易用的暂存区，和多工作流的特点，它超越了类似Subversion， CVS，Perforce和ClearCase的其他的 SCM 工具。简洁来说，Git是一个分布式版本控制系统。1.什么是版本控制？控制版本，存储、追踪目录和文件的修改历史。市面上有各式各样的版本控制工具，比较常 用的SVN、Git等等。2、什么叫“分布式”

转载 es6的迭代器--Iterator

一、什么是for-of循环对于如下一个数组，遍历其中的值方法有哪些？var arr = ['a', 'b', 'c'];首先想到的可能就是如下这种，这也是js最原始的遍历方法，和java的语法一样。 var arr = ['a', 'b', 'c']; for (var i=0;i<arr.length;i++) { console.log(arr[i]); }如果你了解ES5，还可以写出for-in的方法。var arr = ['a', 'b', 'c']; for(

原创 Vue的路由实现：hash模式 和 history模式的区别？

区别：hash模式：1.采用的是window.onhashchange事件实现。2.可以实现前进 后退 刷新。3.比如这个URL：http://www.abc.com/#/hello, hash 的值为#/hello。 它的特点在于：hash 虽然出现URL中，但不会被包含在HTTP请求中， 对后端完全没有影响，因此改变hash不会重新加载页面history模式：1.采用的是利用了HTML5 History Interface 中新增的pushState() 和replaceState() 方法

原创 $route与$router 的区别？

$route 是“路由信息对象”，读取 路由参数接收，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数。而 $router 是“路由实例”对象包括了路由的跳转方法，钩子函数等 操作 路由跳转...

原创 VueX（Vue状态管理模式)

Vuex是一个专门为vue.js应用程序开发的状态管理工具，如果在一个项目开发中频繁的使用组件传参的方式来同步data的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。安装以下步骤的前提是你已经完成了Vue项目构建，并且已转至该项目的文件目录下。Npm安装Vuexnpm i vuex -s在项目的根目录下

原创 SCSS 基础语法与使用（混合器）

（1）当你的代码中需要用到大段大段重用样式代码的时候，可以通过 SCSS 的混合器实现大段样式的重用。混合器使用@mixin 标识符定义。示例：SCSS 样式文件：（添加跨浏览器的圆角边框）@minix rounded-corners{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}可以使用@include 来使用这个混合器：notice{background-color:green;borde

原创 vue slot 插槽详解

插槽含义：就是引入子组件后，在插入子组件元素中添加信息或者标签，使得子组件的指定位置插入信息或者标签插槽有三种：默认插槽、具名插槽、作用域插槽，由于vue2.6.0后对插槽进行修改，但是兼容2.6.0前的版本，博文中只说明2.6.0后的插槽，vue3.0后面会去除2.60前的版本兼容　　一、默认插槽<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <

原创 JavaScript ES 模块：现代化前端编程必备技能

自从 ES 模块被添加到规范中后，JavaScript 中的模块就更加简单了。模块按文件分开，异步加载。导出是用 export 关键字定义的；值可以用 import 关键字导入。导出—————————————————————————————默认导出每个模块都有一个 "默认 "导出，它代表了模块导出的主要值。可能会有更多的导出值，但默认导出值代表模块的定义。一个模块中只能有一个默认导出。const fruitBasket = new FruitBasket()export default fru

原创 前端面试题(三)

文章目录1.JavaScript 原型，原型链？有什么特点？2.说几条写 JavaScript 的基本规范？3 javascript 创建对象的几种方式？4 JavaScript 继承的几种实现方式？5 Javascript 的作用域链？6 谈谈 This 对象的理解。7 eval 是做什么的？8 事件委托是什么？10 Javascript 中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？11 对于 JSON 的了解？13 Ajax 是什么? 如何创建一个 Ajax？1.JavaScri

原创 前端面试题（二）

1.说说你对闭包的理解使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。2.闭包有三个特性:1.函数嵌套函数2.函数内部可以引用外部的参数和变量3.参数和变量不会被垃圾回收机制回收3.display:none和visibility:hidden的区别？display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢，就当他从来不存在。visibility:hidden

原创 前端面试题（一）

1.谈谈对弹性盒子的理解及使用场景答：弹性盒子是一种可自由适配屏幕宽度的布局，能够快速实现子元素水平居中、垂直居中等各种常见的布局。其样式的声明分成老弹性盒子display:box;和新弹性盒子display:flex;使用场景一般多用在移动端，因为PC端和响应式的项目经常会考虑兼容性，特别是低版本的ie，而弹性盒子只兼容到ie9。2.谈谈对bfc的理解答：Bfc：block formatting context，块级格式化上下文。在书写盒模型的样式时，经常会遇到一些bug，例如父盒子的上外边距会和子

原创 替换If-Else的5种方法从入门到高级示例

If-Else已成为事实上的代码分支解决方案，这确实是有道理的。这是向所有有抱负的开发人员讲授的第一件事。不幸的是，许多开发人员从来没有前进到更合适的开发实践中去。有些人的口头禅是：If-Else是一把锤子，一切都是钉子。在这里，我将向你展示一些技巧和模式，这些技巧和模式将终结这种可怕的做法。每个示例的难度都会增加。1、 完全不必要的Else块这也许是那些初级开发人员最负罪的之一。下面的示例很好地说明了当您被认为If-Else很棒时会发生什么。Simple if-else只需删除else

原创 JS判断视频Video的播放、暂停、结束完成及获取长度事件监听处理

在日常应用场景中，可能会遇到这么一个情况，需要判断用户是否完整的观看完了一部视频，在这个场景中，和视频相关的事件大体涉及到几个部分，获取视频长度，视频开始播放，暂停播放和播放结束，下面来看下如何通过JavaScript来监听获取视频的这几种状态。（1）html页面视频标签大体如下<video id="video" controls="controls"> <source type="video/mp4" src="mi.mp4"></video>（2）视

原创 swiper轮播，小轮播图，点击变大轮播图（小图变大图）

效果图：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>放大轮播</title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"> <!-- L

原创 JavaScript 精简技巧

1、过滤唯一值Set对象类型是在 ES6 中引入的，配合展开操作…一起，我们可以使用它来创建一个新数组，该数组只有唯一的值。const array = [1, 1, 2, 3, 5, 5, 1];const uniqueArray = [...new Set(array)];console.log(uniqueArray); // Result: [1, 2, 3, 5]在 ES6 之前，隔离惟一值将涉及比这多得多的代码。此技巧适用于包含基本类型的数组：undefined，null，boole

原创 13个你必须知道的JS数组技巧

1、去重这也是一道常见的面试题，怎么对JS的数组去重。在ES6的时代，有个非常快速且简单的方法，使用new Set()以及Array.from()或者展开运算符(…)var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”];// 方法一var uniqueFruits = Array.from(new Set(fruits));console.log(uniqueFru

原创 15条JS高效技巧

1、延迟函数delay const delay = ms => new Promise((resolve, reject) => setTimeout(resolve, ms)) const getData = status => new Promise((resolve, reject) => { status ? resolve('done') : reject('fail') }) const getRes = async (data) => {

原创 Vue2.0 + JSX

JSX 简介JSX是一种Javascript的语法扩展，JSX = Javascript + XML，即在Javascript里面写XML，因为JSX的这个特性，所以他即具备了Javascript的灵活性，同时又兼具html的语义化和直观性。应用场景为了让大家更方便的去理解JSX的作用及用法，小编先为大家罗列了几个可能会用到JSX的应用场景。在消息框内添加html在开发过程中，经常会用到消息框，使用消息框可能的一种写法是这样的Message.alert({ messge: '确定要删除?',

原创 JavaScript中的reduce()的5个用例

reduce()方法对数组中的每一个元素执行一个reducer函数(由你提供)，从而得到一个单一的输出值。reduce() 方法将一个数组中的所有元素还原成一个单一的输出值，输出值可以是数字、对象或字符串。reduce() 方法有两个参数，第一个是回调函数，第二个是初始值。回调函数回调函数在数组的每个元素上执行。回调函数的返回值是累加结果，并作为下一次调用回调函数的参数提供。回调函数带有四个参数。Accumulator（累加器）——累加器累加回调函数的返回值。Current Value（当前值）—

原创 ES6 Let命令

let 命令基本用法ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。{ let a = 10; var b = 1;}a // ReferenceError: a is not defined.b // 1上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效。for循环的计数

原创 浅谈Vue.js

Vue.js简介Vue.js的作者为Evan You（尤雨溪），曾任职于Google Creative Lab，虽然是Vue是一个个人项目，但在发展前景上个人认为绝不输于Google的AngularJs，下面我会将Vue与Angular（Angular 1.0+版本）做一些简单的比较。Vue的主要特点就和它官网（http://cn.vuejs.org/）所介绍的那样：（1） 简洁 （2） 轻量 （3）快速 （4） 数据驱动 （5） 模块友好 （6） 组件化简单下面看一段Angular的实现双向绑定

转载 九个超级实用的 ES6 特性

1、展开操作符顾名思义，用于对象或数组之前的展开操作符（…），将一个结构展开为列表。演示一下：let firstHalf = [ one , two ];let secondHalf = [ three , four , ...firstHalf];这种写法够优雅，够简洁吧？如果不用展开操作符我们得这么写：let firstHalf = [ one , two ];let secondHalf = [ three , four ];for(var i=0, i <fir

原创 JSON详解

JSON的全称是”JavaScript Object Notation”，意思是JavaScript对象表示法，它是一种基于文本，独立于语言的轻量级数据交换格式。XML也是一种数据交换格式，为什么没有选择XML呢？因为XML虽然可以作为跨平台的数据交换格式，但是在JS(JavaScript的简写)中处理XML非常不方便，同时XML标记比数据多，增加了交换产生的流量，而JSON没有附加的任何标记，在JS中可作为对象处理，所以我们更倾向于选择JSON来交换数据。这篇文章主要从以下几个方面来说明JSON。文章目

原创 JavaScript常用API合集汇总

今天这篇文章跟大家分享一些JavaScript常用的API代码，有DOM操作、CSS操作、对象（Object对象、Array对象、Number对象、String对象、Math对象、JSON对象和Console对象）操作，值得收藏。文章目录一、节点1.1 节点属性1.2 操作1.3 Document节点1.3.1 Document节点的方法1.4 Element节点1.4.1 Element节点的属性1.4.2 Element节点的方法二、CSS操作三、对象3.1 Object对象3.2 Array对象3.