vue axios全攻略

不再继续维护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属性来实现

父组件:

1
2
3
4
5
6
7
8
9
<parent>
<child :child-msg="msg"></child>//这里必须要用 - 代替驼峰
</parent>
data(){
return {
msg: [1,2,3]
};
}

子组件通过props来接收数据:
方式1:

1
props: ['childMsg']

方式2:

1
2
3
props: {
childMsg: Array //这样可以指定传入的类型,如果类型不对,会警告
}

方式3:

1
2
3
4
5
6
props: {
childMsg: {
type: Array,
default: [0,0,0] //这样可以指定默认的值
}
}

这样呢,就实现了父组件向子组件传递数据.

子组件与父组件通信

那么,如果子组件想要改变数据呢?这在vue中是不允许的,因为vue只允许单向数据传递,这时候我们可以通过触发事件来通知父组件改变数据,从而达到改变子组件数据的目的.

子组件:

1
2
3
4
5
6
7
8
9
<template>
<div @click="up"></div>
</template>
methods: {
up() {
this.$emit('upup','hehe'); //主动触发upup方法,'hehe'为向父组件传递的数据
}
}

父组件:

1
2
3
4
5
6
7
8
<div>
<child @upup="change" :msg="msg"></child> //监听子组件触发的upup事件,然后调用change方法
</div>
methods: {
change(msg) {
this.msg = msg;
}
}

非父子组件通信

如果2个组件不是父子组件那么如何通信呢?这时可以通过eventHub来实现通信.
所谓eventHub就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件.

1
let Hub = new Vue(); //创建事件中心

组件1触发:

1
2
3
4
5
6
<div @click="eve"></div>
methods: {
eve() {
Hub.$emit('change','hehe'); //Hub触发事件
}
}

组件2接收:

1
2
3
4
5
6
<div></div>
created() {
Hub.$on('change', () => { //Hub接收事件
this.msg = 'hehe';
});
}

这样就实现了非父子组件之间的通信了.原理就是把Hub当作一个中转站!

© 2018 Qing的前端开发Blog All Rights Reserved. 本站访客数人次 本站总访问量
Theme by hiero