没感情的菠萝头-CSDN博客

转载 nuxt.js配置实现axios在开发时的跨域代理

近期在学习nuxt框架，为接下来的项目做准备，学习的目的是为了解决单页面应用的 SEO 的问题，因为要做新闻网站，用服务端渲染。以下是在网上nuxt配置实现axios代理，解决跨域的问题方案。原笔记1.在项目中安装好axios2.在nuxt.config.js里进行配置module.exports = { modules: [ '@nuxtjs/axios', ], ...

2019-06-20 14:23:56 1611

原创 vue 电子书字体大小设置功能

方法一：父子组件传值父组件  <menu-bar :ifTitleAndMenu="ifTitleAndMenu" :defaultFontSize="defaultFontSize" ref="menuBar" @setFontSize="selecFontSize" ></menu-bar>&l...

2019-05-16 14:20:38 1785

原创 vue单页备忘录功能

功能实现效果1.vuex状态集成，添加内容保存到列表功能2.点击列表进入详情页功能3.vue-router路由管理，组件跳转。4.mint-ui组件库引入，新增列表左滑删除功能。5.表单功能...

2019-05-06 14:09:22 973 1

原创关于升级vue-cli3.0踩坑记录

最近在看@vue/cli 3.x 版本，升级vue-cli3.0最新版本的时候遇到很多坑，绕了很多弯。查了很多资料，最终解决。记录一下遇到的问题，以防以后再次发生。1.升级@vue/cli 3.x 需要安装node.js最新版本。卸载重新安装。我这里安装的是node.js10.15.1卸载了vue-cli2.X版本npm uninstall vue-cli -g //卸载vue-cli...

2019-03-11 16:56:24 2433 1

原创 ES6文档思维导图笔记

最近学习了ES6语言。选了几个章节整理了笔记。。。API ECMAScript 6入门——阮一峰set和map数据结构Iterator和for…of循环Generator 函数promise对象...

2018-07-27 16:56:44 1076

性能优化前端浏览器缓存问题1.强缓存，可以通过cache-control和expires控制。cache-control：no-cache，no-store,must-revalidateCache-Control: must-revalidate（必须重新验证）Cache-Control: no-cache（必须始终在使用原始服务器之前先经过原始服务器的验证）Cache-Control: no-store （不缓存）指定expires的值为时间戳，表示过期时间，这样在下次再向服务器请求

2020-06-12 13:28:24 263

转载关于深拷贝和浅拷贝

浅拷贝就是当一个数组复制另一个数组时，比如b复制a，修改了a数组，b也会跟着修改。let a=[0,1,2,3,4], b=a;console.log(a===b); //truea[0]=1;console.log(a,b); //1，1，2，3，4深拷贝，是拷贝对象各个层级的属性。可以用递归的方法深拷贝function deepClone(obj){ let objClone = Array.isArray(obj)?[]:{}; if(obj &&

2020-06-12 13:27:32 325

原创 vue列表滚动对应侧边地图变化方法

看到很多同学在每个列表设置id去获取，根据滚动的时候判断那个条目的外层dom距离窗口定部最近，就显示哪个条目的地图信息。但我这里利用forEach循环获取每个列表索引值和坐标。父组件<template><div> <amap v-if="point.length" :width="230" :height...

2020-03-30 23:51:19 600

原创 element ui + nuxt + koa构建项目

1全局安装npxnpm install -g npx2.创建项目npx create-nuxt-app <name>选择项：koa element-ui eslint兼用es6:package.json 在dev&start内后添加 --exec babel-node根目录创建 .babelrc写{"presets":["es2015"]}然后安装...

2019-07-18 17:38:48 419

原创 MongoDB数据库安装

最近做项目接触到MongoDB，这里简单做下笔记。安装1.官网下载，根据电脑配置下载安装详情这里我装在E盘2.然后创建一个文件存放数据请注意，数据目录应该放在根目录下，否则启动失败这里我在E盘根目录下新建了一个mongodbdata目录》db目录3.命令行下运行 MongoDB 服务器到MongoDB 目录的 bin 目录下打开命令窗口运行mongod --dbpath ...

2019-07-05 11:31:55 424

原创关于koa框架

官网介绍：Koa 是一个新的 web 框架，通过利用 async 函数，Koa 帮你丢弃回调函数，并有力地增强错误处理。 Koa 并没有捆绑任何中间件，而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序。官网APIkoa-generator:安装:npm install -g koa-generator 创建项目 koa2 project 或 koa2 -e pr...

2019-07-04 15:15:33 1961

原创 vuex用例

vuex状态集成import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const state = { count:0 },const mutations = { add(state){ state.count++ }, dcre(state){ stat...

2019-07-03 17:15:57 203

原创嵌套路由nuxt-child组件（父子页面组件的传值）

链接：nuxt文档相关文章1.创建内嵌子路由，需要添加一个 Vue 文件，同时添加一个与该文件同名的目录用来存放子视图组件。这里在pages里新建一个fanil.vue、fanil文件夹2.fanil.vue源码<template> <div class="container"> <p>Final Page</p> ...

2019-06-21 15:31:57 5139 3

翻译关于nuxt.js

CSS 配置如果要使用 sass 就必须要安装 node-sass和sass-loader 。npm install --save-dev node-sass sass-loader在 nuxt.conf.js中，添加要使用的 CSS 资源：Type: ArrayItems: stringmodule.exports = { css: [ // 直接加载一个 Nod...

2019-06-20 14:00:57 757

原创 Vue客户端存储

客户端存储关于客户端存储：通过把数据存储在浏览器中，用户不必每次都向服务器请求获取同一个信息。离线时，使用本地存储的数据而不是向远端服务器上请求数据就显得非常有用。Local Storage 适合存储你希望进行持久化的较小数据集，比如用户偏好设置或表单数据。注意：存储对象和数组这样更复杂的数据，必须使用 JSON 来对数据进行序列化和反序列化。太多废话了直接正题我是一个小案例：&lt...

2019-03-05 11:50:47 640

原创关于axios安装及使用

安装npm install axios结果跑的时候报错了额(Ｔ▽Ｔ)再命令npm install --save axios vue-axios在入口文件main.js 里面配置import Vue from 'vue'import axios from 'axios'import VueAxios from 'vue-axios' Vue.use(VueAxios, axi...

2019-03-01 17:44:55 3784

原创关于单文件组件

文件扩展名为 .vue 的 single-file components(单文件组件)使用 webpack 或 Browserify 等构建工具标签保存实例：模板文件：输入框组件 BaseInputText.vue：&amp;amp;amp;amp;amp;lt;template&amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;input type=&a

2019-01-26 23:21:44 1294

转载 vue 渲染函数 & JSX

createElement 参数接下来你需要熟悉的是如何在 createElement 函数中生成模板。这里是 createElement 接受的参数：// @returns {VNode}createElement( // {String | Object | Function} // 一个 HTML 标签字符串，组件选项对象，或者 // 解析上述任何一种的一个 async 异...

2019-01-14 00:23:04 455

原创 Vue组件实例

相同标签名的元素切换&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;div id=&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;demo&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;am

2018-12-18 15:03:14 3362

原创 Generator实现抽奖业务逻辑和长轮询逻辑

在接触ES6又get了一些业务逻辑的实例方法。抽奖业务逻辑限制抽奖次数，不再把次数限制保存在全局变量，避免别人修改了次数。从服务端传参进来，增加了安全性。let txt = document.createElement('p'); txt.innerHTML = '当前抽奖剩余&lt;span id = "count"&gt;5&lt;/span&gt;次' docum...

2018-08-31 16:57:07 412

原创 Proxy和Reflect数据校验

//提供代理模块 function validator(target,validator){ return new Proxy(target,{ _validator:validator, set(target,key,value,proxy){ if(target.hasOwnProperty(key...

2018-08-30 01:01:22 286 2

原创 ES6项目构建工具使用（完整版）

最近学习用ES6语法写项目，因为浏览器目前不支持ES6语法（特别IE8以下的浏览器不支持ES5—6），无法部署到线上，必须构建支持ES6的环境，所以重新整理下需要的开发工具。gulp（任务自动化工具） gulp文档bable，webpack（编译工具）npmbable专门把ES6编译成es5，es3的工具 webpack专门处理模块化项目依赖工具...

2018-08-23 09:30:46 2230

转载 es6 babel转码器安装配置及常见命令

示例：在d盘，新建文件夹es6，文件夹里新建一个文件es6.js。（1）先全局安装babel-cli，输入命令npm install babel-cli -g（2）输入d:( 进入d盘)，再输入cd es6(进入es6文件夹)（3）输入npm init;(引导创建一个package.json文件，包括名称、版本、作者等这些信息)（4）输入npm install –save-dev ...

2018-08-17 10:05:05 228

转载控制台的一些其他功能

Firebug & Chrome Console 控制台的一些其他功能 console.log(object[, object, …]) 使用频率最高的一条语句：向控制台输出一条消息。支持 C 语言 printf 式的格式化输出。当然，也可以不使用格式化输出来达到同样的目的：var animal=’frog’, count=10; console.log(“The %s jump...

2018-07-11 17:34:45 266

转载 ES6和ES5语法区别（Reflect对象和Object对象）

概述Reflect对象与Proxy对象一样，也是 ES6 为了操作对象而提供的新 API。现阶段，某些方法同时在Object和Reflect对象上部署，未来的新方法将只部署在Reflect对象上。也就是说，从Reflect对象上可以拿到语言内部的方法。//ES5写法try{ Object.defineProperty(target,property,attributes); ...

2018-07-06 18:59:20 2329

转载 ES6笔记下（深入浅出ES6—阮一峰）

SymbolES6引入了一种新的原始数据类型Symbol，表示独一无二的值。它是JavaScript语言的第七种数据类型，前六种是：Undefined、Null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。1.Symbol值通过Symbol函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的Symbo...

2018-06-13 16:42:31 2657

翻译 ES6模板方法

模板字符串（template string）传统的JavaScript语言，输出模板通常是这样写的。$('#result').append( 'There are &amp;amp;amp;amp;amp;lt;b&amp;amp;amp;amp;amp;gt;' + basket.count + '&amp;amp;amp;amp;amp;lt;/b&amp;amp;amp;amp;amp;gt; ' + 'items in

2018-05-21 22:24:38 10751

转载 ES6笔记上（深入浅出ES6—阮一峰）

在线转换Babel 提供一个REPL在线编译器，可以在线将 ES6 代码转为 ES5 代码。转换后的代码，可以直接作为 ES5 代码插入网页运行。

2018-05-16 23:34:00 75243 9

原创 ES6和ES5语法区别（默认参数、对象代理）

的

2018-05-08 23:27:41 761

原创 webpack安装（构建ES6的编译环境）

1.在此之前先安装Git，安装node.js先全局安装 “npm install webpack -g” “npm install webpack-dev-server -g”2.新建一个文件例如“es6-webpack”，然后鼠标右键进入Git Bach here;输入“git clone https://github.com/cucygh/es6-webpack.git”，如...

2018-05-08 09:49:10 1690

原创 ES6和ES5语法区别（常量、作用域、箭头函数）

1.常量在ES3中，没有常量这一说。在ES5中，通过变量的定义只读，不可修改。在ES6中，用const定义常量也是只读，不可修改。举个例子,设置圆周率PI的值：//es5写法Object.defineProperty(window,'PI',{ value:3.1415926,//定义属性值 writable:false,//是否只读})在控制台看 ...

2018-05-05 13:00:28 5944

原创关于PHP服务端代码调试

在没有客户端的情况下，就对服务端的一些请求进行一些测试，这是怎么样来做到的呢？我们通过一个工具fiddler工具，这个工具可以监听整个电脑所有发出的HTTP请求，可以监听它们传入的值，和相应回来的值，当然在这里边它还可以去模拟浏览器向服务器发送请求的过程1.首先，把demo放在xampp的htdocs文件下,然后运行本地服务器2.打开fiddler,选择Composer的标签页，选...

2018-05-01 17:08:23 1308

原创 Ajax概念、原理（2018.7.11后续： Promise对象实现Ajax操作例子）

一本正经的介绍AJAX：Asynchronous JavaScript and XML （异步的 JavaScript 和 XML） Ajax 不是某种编程语言，是一种在无需重新加载整个网页的情况下能够更新部分网页的技术。1.同步与异步Ajax三步骤：运用HTML和CSS实现页面，表达信息；运用XMLHttpRequest和web服务器进行数据的异步交换；运用JavaS...

2018-04-28 09:40:09 334

原创 js深入浅出(数组、函数、作用域、闭包)

数组1创建数组 var arr = [“a”,”b”,”c”] 或 var arr = new Array(); arr[0] = a; arr[1] = b; arr[2] = c2.数组的删增3.数组的迭代 4.二维数组的遍历var arrayStr=[[1,2,3],[4,5,6],[7,8,9]];for(var i=0;i<arraySt...

2018-04-06 22:37:46 565

原创 js对象方法

js对象Object.defineProperty(obj, prop, descriptor) Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。语法 Object.defineProperty(obj, prop, descriptor)参数obj 要在其上定义属性的对象。 pro...

2018-04-06 00:29:09 1978

原创 Js深入浅出(数据、表达式运算符、语句、对象篇)

数据类型2.js隐式转换关于+-例如： var x = 10 + 5 ; //15 var x = "10" + 5; //105 var x = "10" - 5 //5加号可以是加法运算也可以是字符串拼接，减号则直接是减法运算变量num转换为数字：num - 0 变量num转换为字符串：num + “”== 等于 ===严格等于（类型...

2018-03-31 14:10:40 399

原创 DOM querySelector() 方法和querySelectorAll()方法区别。

querySelector()返回文档中匹配指定 CSS 选择器的一个元素。语法 document.querySelector(“#demo”);参数：CSS 选择器，必须。指定一个或多个匹配元素的 CSS 选择器。可以使用它们的 id, 类, 类型, 属性, 属性值等来选取元素。对于多个选择器，使用逗号隔开，返回一个匹配的元素。注意： querySelector()...

2018-03-30 17:48:41 416

原创 DOM对象方法

selectedIndex设置或返回下拉列表中被选选项的索引号。注释：若允许多重选择，则仅会返回第一个被选选项的索引号。语法： selectObject.selectedIndex=number15.JS获取select标签选中的值 var obj = document.getElementByIdx_x(”testSelect”); //定位id var index...

2018-03-30 17:44:20 122

原创关于for循环中的 object[i].index = i;

在写选项卡功能，当内容多个，需要循环遍历来操作，得知哪个选项卡和哪个选项内容匹配。遇到 object[i].index = i;相关博客：https://www.cnblogs.com/yeyeyemax/p/6877378.html这里object[i]是对象。aLi[i].index=i是给这个对象添加一个自定义属性index并且属性值为i，index就是索引的意思。当然这个属性名你可...

2018-03-29 00:34:26 1630

原创 js内置对象方法

String 字符串对象1. toUpperCase() 方法字符串小写字母转换为大写 2. toLowerCase()方法，字符串所有大写字母都变成小写的字符串例如： var mystr="Hello world!"; var mynum=mystr.toUpperCase();以上代码执行后，mynum 的值是：HELLO WORLD!`...

2018-03-23 17:06:26 359

vue备忘录单页demo

空空如也