mandyucan-优快云博客

原创 practice

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...

2019-03-21 11:22:58 366

原创 vscode添加自定义snippet（代码段）vue模板

进入代码片段自定义有两种方式： 1. 【菜单栏->文件->首选项->用户代码片段】 2. 全局命令：在vscode界面按F1或者ctrl+shift+p，进入命令行，输入sinppets 选vue进入自定义代码段（vue.json）在vue.json里添加如下代码片段： "Print to console": { "p...

2019-01-16 15:43:00 2101

原创 eslint-plugin-vuefix: 基于eslint开发的插件vuefix，用命令直接修复ESLint

自动修复vue文件中检测到的编码规范问题。重构老项目的代码时能减少很多工作量。 1、打开package.json，在script里找到截图总所示lint,修改为：（中间插入--fix）"lint": "eslint --fix --ext .js,.vue src"，2、终端运行npm run lint修改代码样式不过以上方法针对修复js中的eslint报错，如需修复...

2019-01-11 16:15:59 5018

原创 vuex---mapGetters和mapActions

若有多个getter时，可用...mapGetters([ ]),需要先export引入，且是es6语法，需要安装bable插件...mapActions([ ])同理；这样写可以简化代码；具体用法如下：// productListOne.vue中<script>import {mapGetters} from 'vuex'import {mapActions...

2018-12-10 21:53:43 1609

原创 vuex使用前与使用后的写法---action（触发事件改变此事件时--变更状态）

Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作。Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。通过actio...

2018-12-10 21:30:56 2429

原创 vuex使用前与使用后的写法---mutation（触发事件改变此事件时--变更状态）

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。当触发事件时使用mutation，而不是computed或getters使...

2018-12-07 17:24:32 2251

原创 vuex使用前与使用后的写法---getters（获取事件）

如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。Getter 接受 state 作为其第一个参数。需求：...

2018-12-07 16:46:24 3232 1

原创 vuex使用前与使用后的写法---state搭建vuex中央状态管理

项目搭建完成后，不使用vuexsrc文件夹里：App.vue:&amp;lt;template&amp;gt; &amp;lt;div id=&quot;app&quot;&amp;gt; &amp;lt;product-list-one v-bind:products=&quot;products&quot;&amp

2018-12-07 10:19:41 416

原创 javascript 函数前面有加号，叹号等一元操作符是什么意思？

1. !function(){}();2. +function(){}();其实这是立即执行函数表达式的写法，相当于(function(){}()); //推荐使用这个或者(function(){})(); 前面的+，！还可以换成其它一元操作符，也可以写成：true &amp;&amp; function (){}();0 , function(){}();在函数前...

2018-11-20 09:31:57 942

原创 axios用catch的写法与不使用catch有什么区别？

官网上的写法：axios.post(url, data) .then(response => { console.log(response); }) .catch(error => { console.log(error); })公司项目的写法：axios.post(url, data) ....

2018-11-17 15:39:09 21015

原创 vue-cli生成的项目，main.js引入scss时报错的原因

在文件路径没有问题时，引入scss出现错误 ERROR Failed to compile with 1 errors 15:04:40 ...

2018-11-15 19:39:48 1764

转载 vue实现分享功能，百度分享，需要刷新页面才显示的解决方案

vue单页面中使用百度分享，初次加载失败或者需要刷新一次才可正常点击，首先得写在mounted的this.$nextTick()里面，关键是需在beforeCreate中加上 window._bd_share_main = “”; 目的是把百度分享的一个参数置空...

2018-11-06 23:58:13 4162 1

原创 vue文件流程

vue文件流程index.html (入口文件) --&gt;main.js (执行main.js) --&gt; App.vue（实例化vue对象）index.html 入口文件// index.html 入口文件&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta ch

2018-11-06 13:36:21 607 1

原创初识vue组件

Vue.component组件// jsVue.component("greeting", { // 将greeting当做一个标签使用，组件 template: // 模板里面有且只有一个根标签 `<p> {{name}}: 大家好，给大家介绍一下我自己 <button @click="changeName">改名&...

2018-09-04 17:23:07 262

原创初始化多个Vue实例对象

// jsvar one = new Vue({ el: "#vue-app-one", data: { title:"app one 的内容" }, methods: { }, computed: { greet: function(){ return "hello app one" ..

2018-09-03 15:20:26 4422

原创一个简单的vue实例demo

- 写在前面：<a v-bind:href="url">链接</a><img v-bind:src="imgUrl"><a :href="url">链接</a><img :src="imgUrl">

2018-08-31 17:25:51 3451 2

原创 js中a.b与a[b]除了书写外,有什么区别？

在JS对象中，a.b与a[b]并没有什么区别，都是获得该对象的某个属性，不同之处在于a[b]中的b必须是个字符串；但在数组里，那就不能写成arr.idx了，只能是arr[idx]。resultList["movie"] = {}给resultList设置movie属性var b = {a: 12}; b['a']也可以取到a的值。...

2018-07-30 15:39:09 3628

原创 TEST

以下代码输出什么？var a = {}, b = {key:'b'}, c = {key:'c'};a[b]=123;a[c]=456;console.log(a[b]);此代码输出456（不是123）理解如下：设置对象属性时，js会隐式的将参数值串联起来。在这种情况下，由于b和c都是对象，他们都将被转换为“[object Object]”. 因此，...

2018-07-30 15:34:46 236

原创解决微信小程序组件scroll-view中bindscrolltolower事件触发不了的问题

小程序scroll-view中的bindscrolltolower方法失效的原因是，为这个scroll-view以及page的高度都设置为100vh;需要在app.wxss中设置page{ height：100vh}并且在有scroll-view的view中设置height：100vh即可、...

2018-07-20 23:20:33 3791

原创 Daily conclusion

项目中的日常总结：iphone移动端点击事件不好使做移动端音乐播放器时，绑定的点击事件在iPhone没反应，不起效果，安卓上都没问题，事件能正确触发，但是在iPhone没反应。开始觉得是写法问题，后来发现，是由于iPhone上，点击的对象，必须加上一个样式，拥有cursor:pointer这个样式，就没问题了setTimeOut和promise.prototype.then()...

2018-07-13 16:58:55 209

原创跨域与jsonp

同源策略只有满足同源的脚本才可以获取资源，这样确实保证了网络上的安全性，但是限制了资源之间的互相利用，比如ajax，ajax是通过url来获取数据，同样也会受到同源策略的限制。解决跨域问题的方法flash。很久之前的方法，目前基本弃用；服务器代理中转。服务器不会受到同源策略的限制。iframe+document.domain。这种方法只能针对主域名相同的子域之间。iframe+...

2018-07-13 13:00:48 218

原创 JS运行机制整理

js加载时间线1、创建Document对象，开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段document.readyState = ‘loading’。2、遇到link外部css，创建线程加载，并继续解析文档。3、遇到script外部js，并且没有设置async、defer，浏览器加载，并阻塞，等待js加载完成并执行该脚本...

2018-07-12 14:50:19 648

原创水平居中的几种方式

<body> <div class="box"> <img src="" alt=""> </div></body>1.水平居中的 margin：0 auto;用于子元素上的，前提是不受float影响&amp

2018-07-04 23:56:17 1920

转载前后端分离模式

《浅谈架构之路：前后端分离模式》前言：分离模式　　对前后端分离研究了一段时间，恰逢公司有一个大项目决定尝试使用前后端分离模式进行，便参与其中。该项目从2016年初立项至今，平平稳稳得度过，但也涌现出越来越多的问题，绝对不是说前后端分离模式不好，而是很多公司在尝试前后端分离的时候没有做好充分得准备。　　网上对前后端分离介绍的文章已经屡见不鲜，接下来本人用一点粗浅的言语也谈谈这块，献丑...

2018-07-03 17:50:56 439

原创原生ajax封装、ajax

AJAX(Asynchronous Javascript And XML) = 异步 JavaScript + XML 在后台与服务器进行异步数据交换，不用重载整个网页，实现局部刷新。创建 ajax 步骤：1.创建 XMLHttpRequest 对象 2.创建一个新的 HTTP 请求，并指定该 HTTP 请求的类型、验证信息 3.设置响应 HTTP 请求状态变化的回调函数 4.发送 ...

2018-07-03 13:04:23 359

原创 call（）与apply（）的作用与区别

每个函数都包含两个非继承而来的方法：apply()和call()。；call与apply都属于Function.prototype的一个方法，所以每个function实例都有call、apply属性；作用call（）方法和apply（）方法的作用相同：改变this指向。区别他们的区别在于接收参数的方式不同：call（）：第一个参数是this值没有变化，变化的是其余参数都直接...

2018-06-26 19:57:47 31679 1

原创 display: none与visibility: hidden; link 与 import

display: none;与visibility: hidden;的区别联系：它们都能让元素不可见区别：display:none;会让元素完全从渲染树中消失，渲染的时候不占据任何空间；visibility: hidden;不会让元素从渲染树消失，渲染师元素继续占据空间，只是内容不可见display: none;是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙...

2018-06-26 00:01:17 519

原创关于字符串拼接与文档碎片（性能优化）

想在div里面往span后面追加这个ul<body> <div id="haha"> <span></span> </div> <script> window.onload = function () { var s = '&l

2018-06-22 23:21:18 663

原创 eleme项目框架搭建及eslint常见报错(含图标字体库说明)

全局安装vue-cli全局安装vue-cli 打开终端，npm install vue-cli -g安装webpack模板1.项目文件夹下，npm init webpack eleme (eleme是项目名) 2.按照提示选择，会提示选择用npm还是yarn，我选择的yarn. 3.按照提示继续输入命令即可安装mockjs模拟数据yarn ad...

2018-06-11 22:41:43 1234

原创 vue实现饿了么外卖系统（完整开发流程）

目标1.掌握vue.js项目在实战中的用 2.学会使用vue.js 3.组件化、模块化的开发方式涉及知识内容1.vue-cli 2.axiox ajax通信、vue-resource(更新后不支持) 推荐axios 3.webpack构建工具 4.mock.ls模拟数据 5.es6 eslint代码风格工具（看个人需求，也可以用es5写）学到什么1.标准...

2018-06-11 10:36:16 15051

原创 css样式表里面引用background-image时，url路径错误原因及解决方法

一直对css中background-image：url的路径问题存在误解，半知半解的，有时候路径写的对，有时候又是错的，完全碰运气，今天写resume时又遇到这个问题，在此整理下： css样式表中background-image要引入image文件夹下的portrait.jpg图片，正确的写法是：background-image:url('../image/portrait....

2018-06-04 15:44:06 34497 8

原创 git建立本地仓库并上传代码到gitHub 及常见问题解决（更新）

一、对于新建repository：本地项目文件夹 git bash here；git init 并复制项目代码到本地仓库；git add .git commit -m“first”连接代码至GitHub：在GitHub新建repository，复制地址，git remote add origin 上述复制的地址将本地项目更新到github项目上去 git push -...

2018-05-30 00:01:00 1982

原创用yarn代替npm作为node.js的模块管理器

npm是node.js默认的包管理工具，通过npm可以下载安装或者发布包,但是在下载过程中，由于npm下载速度慢等原因导致安装过程中依赖包缺失等问题，在安装webpack问题上，没有少折腾（折腾几个通宵）！！！听了朋友的建议，转战yarn！ Yarn是Facebook公司出品的用于管理node.js包的一款软件,npm安装速度比较慢，而且当项目中模块数量越来越多时，管理这些模块及其依赖的...

2018-05-23 19:47:22 1076

原创 Hexo快速发布博文及插入图片

由于hexo发布博客必须是markdown格式，写起来真的是太太太麻烦了，想到在优快云发布博客时采用markdown编辑器，左右两边相互对照，很是方便，又有导出文件到本地的功能，因此每次在发布博客时我都采取懒人办法…利用csdn提供的在线markdown编辑器发布博客正常编辑、发布文章编辑好后将文件导出到本地将导出的md文件放在hexo网站所在位置下的source_posts目录，...

2018-05-23 16:19:37 6732

原创 Markdown 简要语法

前言由于hexo发布博客只支持Markdown格式，每次发布博客时总要查询相关语法，在此简单记录下发布博客时常用语法Markdown语法标题Markdown的标题由#开头+空格+标题，一级标题用#，二级标题##，以此类推，总共六级标题；相当于html里面的h1-h6文本格式Markdown的文本格式包括加粗、斜体、列表、换行符等加粗前后各两个*（或下...

2018-05-23 15:16:46 272

原创利用gitHub+Hexo搭建个人博客

前期准备： 1. 有自己的github账号； 2. 配置环境：电脑已安装node ；hexo Hexo是一个简单、快速、强大的基于 Github Pages 的博客发布工具官网： http://hexo.io 安装hexo 第1步：在自己认为合适的地方新建文件夹（一般为自己放code的文件），此文件夹是用于管理自己的博客文档，打开文件夹，单击右键，选择git bash,命令...

2018-05-21 21:27:26 299

原创 webpack安装配置

新建项目文件，gitBash可用淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org初始化:cnpm init或者cnpm init -y (快速初始化，避免一直按enter)全局安装webpack：cnpm install webpack -g针对webpac...

2018-05-11 03:08:58 576

原创 Es6-解构赋值

数组的解构赋值 es6允许按照一定的模式，从数组和对象中提取值，对变量进行赋值，这被称之为解构赋值。在es5中var a = 1,b = 2, c = 3;在 es6中可以通过数组简写成：let [a,b,c] = [1,2,3];或者：let [a,[b],c] = [1,[2],3];只要按照对应的位置进行赋值，可以任意嵌套。let [head...

2018-05-08 00:05:27 266

ES6在ES5的基础上增加了许多新功能和新用法，可以简化代码。但是目前只有一些高版本的浏览器才支持es6, 因此需要利用babel对es6进行转码。let命令和const命令let命令特点：不存在变量提升、暂时性死区（先声明后使用,否则报错）、不允许重复声明；let命令和var很类似，也是用来声明变量的，但是所声明的变量，只有在let命令所在的代码块内才有效，这也是es6最大的特点之一：增加了块级...

2018-05-07 22:56:09 192

空空如也

空空如也