不再继续维护vue-resource,并推荐大家使用 axios。此文是官方文档翻译。
axios 简介axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:
从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF
浏览器兼容
引入方式123456$ npm install axios$ cnpm install axios //taobao源$ bower install axios// 或者使用cdn:<script src="https://u...
ES6的Arrow函数
语法
具有一个参数的简单函数
12var single = a => asingle('hello, world!') // 'hello, world!'
没有参数的需要用在箭头前加上小括号
123var log = () => { alert('no param)}
多个参数需要用到小括号,参数间逗号间隔,例如两个数字相加
12var add = (a, b) => a + badd(3, 8) //11
函数体多条语句需要用到大括号
1234567var add = (a, b) => { if (typeof a == 'number&ap...
ES7的Async/Await
例子Async/Await应该是目前最简单的异步方案了,首先来看个例子。
这里我们要实现一个暂停功能,输入N毫秒,则停顿N毫秒后才继续往下执行。
12345678910111213141516var sleep = function (time) { return new Promise(function (resolve, reject) { setTimeout(function () { resolve(); }, time); })};var start = async function () { // 在这里使用起来就像同步代码那样直观 ...
Promise详解
Promise在ES2015(ES6)正式规范中,这篇文章详解Promise基本概念和使用方法。
PromisePromise是一个构造函数,自己身上有all、reject、resolve这几个眼熟的方法,原型上有then、catch等同样很眼熟的方法。这么说用Promise new出来的对象肯定就有then、catch方法。
具体可以使用console.log(Promise);查看
接下来,new一个Promise的构造函数看下。1234567var p = new Promise(function(resolve, reject){ //做一些异步操作 setTimeout(function(){ console.log(&apo...
ES6规范
原始类型:值传递
string
number
boolean
null
undefined
123456const foo = 1;let bar = foo;bar = 9;console.log(foo, bar); // => 1, 9
复杂类型:引用传递
object
array
function
123456const foo = [1, 2];const bar = foo;bar[0] = 9;console.log(foo[0], bar[0]); // => 9, 9
引用
为引用使用 const 关键字,而不是 var
这样确保你不能修改引用类型,否则可能会导致一些 bug 或难以理解的代码。
1234567// badvar a...
html规范
文档类型推荐使用 HTML5 的文档类型申明: <!DOCTYPE html>.(建议使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的属性,比如 application/xhtml+xml 在浏览器中的应用支持与优化空间都十分有限)。HTML 中最好不要将无内容元素[1] 的标签闭合,例如:使用 <br> 而非 <br />.
HTML 验证一般情况下,建议使用能通过标准规范验证的 HTML 代码,除非在性能优化和控制文件大小上不得不做出让步。使用诸如 W3C HTML validator 这样的工具来进行检测。规范化的 HTML 是显现技术要求与局限的显著质量基线,它促进了 HTML 被更好地运用。
不推荐1...
Css/Sass规范
ID和class命名规则ID和class(类)名总是使用可以反应元素目的和用途的名称,或其他通用名称。代替表象和晦涩难懂的名称。
应该首选具体和反映元素目的的名称,因为这些是最可以理解的,而且发生变化的可能性最小。
通用名称只是多个元素的备用名,他们兄弟元素之间是一样的,没有特别意义。区分他们,使他们具有特殊意义,通常需要为“帮手”。
尽管class(类)名和ID 的语义化对于计算机解析来说没有什么实际的意义,语义化的名称 通常是正确的选择,因为它们所代表的信息含义,不包含表现的限制。
不推荐1234567.fw-800 { font-weight: 800;} .red { color: red;}
推荐1234567.heavy ...
Vue插件编写
写个插件引用https://vuefe.cn/guide/plugins.html
1.在components 目录下新建一个validate.js:12345export default{ install(Vue){ Vue.prototype.$myName = "zhagngsan"; }}
这就是我们的插件,定义了一个属性
2.入口文件jssrc/index.js 加入:1234// 引入import validate from "./../components/validate";// 使用Vue.use(validate);
3.我们到user-username.vue...
前端面试题-JS防抖动
在某些信息列表中一般采用瀑布流,滚动一屏时加载相应的数据,请思考如何避免连续下拉时而产生的问题(可能是页面崩溃,也可能是巨卡无比)。一般碰到这样的面试题,防抖动机制,就能很好的解决,这方面最早的应用实践还是Twitter,开发者写了一篇博客,详细的阐述了如何解决这样的问题。那么,说道防抖动,其核心内涵在于延迟处理,也就是将一系列的事件处理程序全部延迟,保障推送近来的第一次事件处理。
12345678910event.on('scroll',function(e){ var fun; return function(){ if(fun) clearTimeout(fun); fun = setTimeout(...
Vue2.0父子组件以及非父子组件如何通信
父组件传递数据给子组件
父组件数据如何传递给子组件呢?可以通过props属性来实现
父组件:
|
|
子组件通过props来接收数据:
方式1:
|
|
方式2:
|
|
方式3:
|
|
这样呢,就实现了父组件向子组件传递数据.
子组件与父组件通信
那么,如果子组件想要改变数据呢?这在vue中是不允许的,因为vue只允许单向数据传递,这时候我们可以通过触发事件来通知父组件改变数据,从而达到改变子组件数据的目的.
子组件:
|
|
父组件:
|
|
非父子组件通信
如果2个组件不是父子组件那么如何通信呢?这时可以通过eventHub来实现通信.
所谓eventHub就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件.
|
|
组件1触发:
|
|
组件2接收:
|
|
这样就实现了非父子组件之间的通信了.原理就是把Hub当作一个中转站!