My-Note-Blog
My-Note-Blog copied to clipboard
huangchucai
主要生活blog
# asyncComputed源码解析 > 思考来源： vue-cli对于异步请求数据的时候，通过`methods`, `created`, `data`这三步，觉得实在是太过于复杂，能不能有一个计算属性，可以直接得到值，从而在模板中使用。 在github上面搜索得到大牛已经实现了 [asyncComputed](https://github.com/foxbenjaminfox/vue-async-computed), 别人捷足先登了。楼主决定先看一遍它的源码，之后会对他的源码进行拓展。 ## 1. Vue的install()方法和Vue.use() ### 1.1开发插件 > 插件通常会为Vue添加全局功能，插件的范围没有限制。 - 添加全局方法或者属性 - 添加全局资源：指令/过滤器/过渡 - 通过全局mixin方法添加一些组件选项 - 添加Vue实力方法，通过把它们添加到Vue.prototype上实现 **1.1.1定义插件**：Vue.js的插件使用的`install()` 。这个方法的第一个参数是Vue构造器，第二个参数是一个可选的对象： ```javascript // myplugin.js...
# Vue的MVVM实现 ## 1. Object.defineProperty() 定义属性 > 用意: 给一个对象定义属性，那个属性原来是不存在的。这是一个初衷，**属性是不存在的，需要额外添加。** 1. 使用说明 > Object.defineProperty(obj,props) > > 第一个参数是将被添加或者修改的属性的对象 > > 第二个参数是一个对象，表示将要添加的一个或多个键值对一直要添加属性的具体配置 > > { > > '属性名':{value:'...',writable:true}, > > '属性名':{value:'...',writable:true}...
#### 利用contenteditable做一个vue属性的输入框 1. `contenteditable`属性 这是一个html5 新增的一个属性，可以让你的元素内容可以编辑 ```html 这是一个可以编辑的段落 ``` 那如何获取这个可以编辑的段落呢？我们知道原生js中，找到相应的dom元素，然后我们可以通过innerText和innerHTML获取对应的文本，所以在编辑的段落中，我们可以使用dom.innerText来获取相应的编辑内容 2. 实现placeholder 当然我们不至限于想获取一个编辑的内容，我们还需要实现input和textarea等占位提示符。 - 首先我们把placeholder添加到编辑内容中 ```html ``` - 通过css来控制点击显示和隐藏 ```css div[contenteditable]:empty:not(:focus):before { content: attr(placeholder); color: #aaa ; } ``` 3....
### vue异步获取数据解析 > 最近在用vue重构有赞商城，在异步获取数据的时候有些困惑，所以总结分享给大家，也希望大家能够一起进步。 > > 场景显示： 我们现在需要做一个轮播组件，我们需要接收父组件传递过来的**图片数组**(lists)，所以父组件需要请求后端接口，从而获取数组列表。 #### 1. 数据变化  **数据的到来分几步阶段** list: null 1. 通过接口异步请求数据 loading状态 2. 获取回来的数据： - 有数据 渲染 list&&list.length > 0 - 无数据 空状态的提示 list&&list.length...
### vue-cli多页面配置 > 对于vue-cli的基础配置可以参考我的这篇blog [vue-cli的基础运用](https://github.com/huangchucai/My-Note-Blog/issues/7) 阅读本文需要了解的知识点 1. webpack的基本配置 `entry`, ``output`` ,`plugin` 2. ES6 的基本用法 3. 文件的导入和导出 #### 1.目录结构的调整  **源文件下面的src分三个部分** 1. components : 存放单页面组件和整体公用的的组件 2. modules : 存放整体的模块部分 3. pages...
1. vue.js框架介绍 2. vue-cli 脚手架 搭建基本代码框架 3. vue-router 管理插件管理路由 4. vue-resource Ajax通信 5. webpack 搭建工具 6. es6+eslint eslint:es6代码风格检查工具 7. 工程化 组件化 模块化 8. 移动端常见的开发技巧 - flex弹性布局 - css stickyfooter -...
##### 1. 找出是否有人超过 19 岁？ ```javascript const people = [ { name: 'Wes', year: 1988 }, { name: 'Kait', year: 1986 }, { name: 'Irv', year: 1970 }, { name:...
###### 人生就像一列开往坟墓的列车，路途上会有很多站，很难有人至始至终陪你走完全程，当陪你的人要下车时，即便不舍，也要心存感激，然后挥手告别。---sunnyhuang --- 在es5很多新手可能对于this感觉到很迷惑，看见有些大神对this灵活运用，心里很是羡慕，不要紧，这篇文章让你**彻底明白什么是this** ### 函数的四种调用 1. func(p1,p2) 直接调用 2. obj.child.method(p1,p2) 对象的方法调用 3. func.call(null,p1,p2) 通过call调用 4. func.apply(null,[p1,p2]) 通过apply调用 我们一般都使用的是第一种和第二种调用，但是正规的函数调用是第三种和第四种。 func.call(context,p1,p2) **this就是这个context的值，后面的是传入的参数,在不严格模式下，context等于null或undefined的时候会自动指向为window对象，同时值为原始值（数字，字符串，布尔值）的 this 会指向该原始值的自动包装对象。** ### 面试题运用 你可能遇到过这样的题目 ``` var obj={ sum:...
### 箭头函数中this 建议先阅读本人对于es5中this的详解 [es5中的this详解](https://github.com/huangchucai/My-Note-Blog/issues/27) **箭头函数本身是没有this，导致内部的this就是外层代码块的this** > ES6的箭头函数的出现，让很多刚刚入门的前端很少用到`bind()`，`call()`，`apply()`,但是还是有必要弄懂**this** #### 关键词 1. 上下文作用域 2. 绑定上下文 #### 1. 普通函数和箭头函数比较 - 不使用call ```javascript // 1. 不使用call var str = 'hcc' let foo = function()...
## 核心api vuex中主要的状态管理和模块化都是通过5个api来实现交互和数据的传递。 1. state 2. mutations 3. getters 4. actions 5. modules ### 1. state(状态的管理) #### **单一的状态树** Vuex使用的是单一的状态管理，一个仓库`store`包含了项目中所有的数据，每一个应用都只包含一个`store`实例，单一的状态树可以让我们更加直接定位到对应的数据源。 **单一的状态树和一切皆模块的思想**并不冲突----后面我们会讲到通过vuex的模块化机制来管理和分布到各个文件中。 #### Vue组件中获取vuex的状态（state） 由于Vuex中的状态储存是响应式的，从store实例中获取读取状态最好是通过计算属性来返回某个状态。 ```vue computed: { count() { return this.$store.state.count...