ajax插件库,03.vue-ajax、vue UI 组件库

vue-ajax

vue 项目中常用的 2 个 ajax 库

vue-resource: vue 插件, 非官方库, vue1.x 使用广泛

axios: 通用的 ajax 请求库, 官方推荐, vue2.x 使用广泛

vue-resource 的使用

示例代码

// 引入模块

import VueResource from 'vue-resource'

// 使用插件

Vue.use(VueResource)

// 通过 vue/组件对象发送 ajax 请求

this.$http.get('/someUrl').then((response) => {

// success callback

console.log(response.data)

//返回结果数据

},

(response) => {

// error callback

console.log(response.statusText)

//错误信息

})

axios 的使用

示例代码

// 引入模块

import axios from 'axios'

// 发送 ajax 请求

axios.get(url)

.then(response => {

console.log(response.data) // 得到返回结果数据

})

.catch(error => {

console.log(error.message)

})

搜索示例代码

/*main.js*/

/*

入口JS

*/

import Vue from 'vue'

import VueResource from 'vue-resource'

import App from './App.vue'

// 声明使用插件(安装插件)

Vue.use(VueResource) // 所有的vm和组件对象都多了一个属性: $http, 可以通过它的get()/post()发ajax请求

// 创建vm

/* eslint-disable no-new */

new Vue({

el: '#app',

components: {App}, // 映射组件标签

template: '' // 指定需要渲染到页面的模板

})

/*App.vue*/

import Search from './components/Search.vue'

import Main from './components/Main.vue'

export default {

components: {

Search,

UsersMain: Main

}

}

/*Search.vue*/

Search Github Users

Search

import PubSub from 'pubsub-js'

export default {

data () {

return {

searchName: ''

}

},

methods: {

search () {

const searchName = this.searchName.trim()

if(searchName) {

// 分发一个search的消息

PubSub.publish('search', searchName)

}

}

}

}

/*Main.vue*/

请输入关键字搜索

请求中...

{{errorMsg}}

{{user.username}}

import PubSub from 'pubsub-js'

import axios from 'axios'

export default {

data () {

return {

firstView: true, // 是否显示初始页面

loading: false, // 是否正在请求中

users: [], // 用户数组

errorMsg: '' //错误信息

}

},

mounted () {

// 订阅消息(search)

PubSub.subscribe('search', (message, searchName) => { // 点击了搜索, 发ajax请求进行搜索

// 更新数据(请求中)

this.firstView = false

this.loading = true

this.users = []

this.errorMsg = ''

// 发ajax请求进行搜索

const url = `https://api.github.com/search/users?q=${searchName}`

axios.get(url)

.then(response => {

// 成功了, 更新数据(成功)

this.loading = false

this.users = response.data.items.map(item => ({

url: item.html_url,

avatarUrl: item.avatar_url,

username: item.login

}))

})

.catch(error => {

// 失败了, 更新数据(失败)

this.loading = false

this.errorMsg = '请求失败!'

})

})

}

}

.card {

float: left;

width: 33.333%;

padding: .75rem;

margin-bottom: 2rem;

border: 1px solid #efefef;

text-align: center;

}

.card > img {

margin-bottom: .75rem;

border-radius: 100px;

}

.card-text {

font-size: 85%;

}

vue UI 组件库

Mint UI

主页: http://mint-ui.github.io/#!/zh-cn

说明: 饿了么开源的基于 vue 的移动端 UI 组件库

Elment

主页: http://element-cn.eleme.io/#/zh-CN

说明: 饿了么开源的基于 vue 的 PC 端 UI 组件库

下载 Mint UI

下载: npm install --save mint-ui

实现按需打包

下载 npm install --save-dev babel-plugin-component

修改 babel 配置

"plugins": ["transform-runtime",["component", [

{

"libraryName": "mint-ui",

"style": true

}

]]]

mint-ui 组件分类

标签组件

非标签组件

使用 mint-ui 的组件

//index.html

vue_demo

if ('addEventListener' in document) {

document.addEventListener('DOMContentLoaded', function() {

FastClick.attach(document.body);

}, false);

}

if(!window.Promise) {

document.writeln('

}

//main.js

/*

入口JS

*/

import Vue from 'vue'

import App from './App.vue'

import {Button} from 'mint-ui'

// 注册成标签(全局)

Vue.component(Button.name, Button)

/* eslint-disable no-new */

new Vue({

el: '#app',

components: {App}, // 映射组件标签

template: '' // 指定需要渲染到页面的模板

})

//App.vue

Test

import { Toast } from 'mint-ui'

export default {

methods: {

handleClick () {

Toast('提示信息')

}

}

}

Elment

下载 npm i element-ui -S

实现按需打包

下载 npm install babel-plugin-component -D

修改 babel 配置

{

"presets": [["es2015", { "modules": false }]],

"plugins": [

[

"component",

{

"libraryName": "element-ui",

"styleLibraryName": "theme-chalk"

}

]

]

}

示例代码

//main.js

import Vue from 'vue'

import { Button, MessageBox, Message} from 'element-ui'

import App from './App.vue'

Vue.component(Button.name, Button)

Vue.component(MessageBox.name, MessageBox)

Vue.component(Message.name, Message)

Vue.prototype.$alert = MessageBox.alert

Vue.prototype.$message = Message

/* 或写为

* Vue.use(Button)

* Vue.use(Message)

*/

/* eslint-disable no-new */

new Vue({

el: '#app',

components: {App}, // 映射组件标签

template: '' // 指定需要渲染到页面的模板

})

//App.vue

打开消息提示

export default {

methods: {

open() {

this.$alert('这是一段内容', '标题名称', {

confirmButtonText: '确定',

callback: action => {

this.$message({

type: 'info',

message: `action: ${ action }`

})

}

})

}

}

}