vue-ajax

vue 項(xiàng)目中常用的 2 個(gè) ajax 庫(kù)

vue-resource: vue 插件, 非官方庫(kù), vue1.x 使用廣泛

axios: 通用的 ajax 請(qǐng)求庫(kù), 官方推薦, vue2.x 使用廣泛

vue-resource 的使用

示例代碼

// 引入模塊

import VueResource from 'vue-resource'

// 使用插件

Vue.use(VueResource)

// 通過(guò) vue/組件對(duì)象發(fā)送 ajax 請(qǐng)求

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

// success callback

console.log(response.data)

//返回結(jié)果數(shù)據(jù)

},

(response) => {

// error callback

console.log(response.statusText)

//錯(cuò)誤信息

})

axios 的使用

示例代碼

// 引入模塊

import axios from 'axios'

// 發(fā)送 ajax 請(qǐng)求

axios.get(url)

.then(response => {

console.log(response.data) // 得到返回結(jié)果數(shù)據(jù)

})

.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和組件對(duì)象都多了一個(gè)屬性: $http, 可以通過(guò)它的get()/post()發(fā)ajax請(qǐng)求

// 創(chuàng)建vm

/* eslint-disable no-new */

new Vue({

el: '#app',

components: {App}, // 映射組件標(biāo)簽

template: '' // 指定需要渲染到頁(yè)面的模板

})

/*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) {

// 分發(fā)一個(gè)search的消息

PubSub.publish('search', searchName)

}

}

}

}

/*Main.vue*/

請(qǐng)輸入關(guān)鍵字搜索

請(qǐng)求中...

{{errorMsg}}

{{user.username}}

import PubSub from 'pubsub-js'

import axios from 'axios'

export default {

data () {

return {

firstView: true, // 是否顯示初始頁(yè)面

loading: false, // 是否正在請(qǐng)求中

users: [], // 用戶數(shù)組

errorMsg: '' //錯(cuò)誤信息

}

},

mounted () {

// 訂閱消息(search)

PubSub.subscribe('search', (message, searchName) => { // 點(diǎn)擊了搜索, 發(fā)ajax請(qǐng)求進(jìn)行搜索

// 更新數(shù)據(jù)(請(qǐng)求中)

this.firstView = false

this.loading = true

this.users = []

this.errorMsg = ''

// 發(fā)ajax請(qǐng)求進(jìn)行搜索

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

axios.get(url)

.then(response => {

// 成功了, 更新數(shù)據(jù)(成功)

this.loading = false

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

url: item.html_url,

avatarUrl: item.avatar_url,

username: item.login

}))

})

.catch(error => {

// 失敗了, 更新數(shù)據(jù)(失敗)

this.loading = false

this.errorMsg = '請(qǐng)求失敗!'

})

})

}

}

.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 組件庫(kù)

Mint UI

主頁(yè): http://mint-ui.github.io/#!/zh-cn

說(shuō)明: 餓了么開(kāi)源的基于 vue 的移動(dòng)端 UI 組件庫(kù)

Elment

主頁(yè): http://element-cn.eleme.io/#/zh-CN

說(shuō)明: 餓了么開(kāi)源的基于 vue 的 PC 端 UI 組件庫(kù)

下載 Mint UI

下載: npm install --save mint-ui

實(shí)現(xiàn)按需打包

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

修改 babel 配置

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

{

"libraryName": "mint-ui",

"style": true

}

]]]

mint-ui 組件分類(lèi)

標(biāo)簽組件

非標(biāo)簽組件

使用 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'

// 注冊(cè)成標(biāo)簽(全局)

Vue.component(Button.name, Button)

/* eslint-disable no-new */

new Vue({

el: '#app',

components: {App}, // 映射組件標(biāo)簽

template: '' // 指定需要渲染到頁(yè)面的模板

})

//App.vue

Test

import { Toast } from 'mint-ui'

export default {

methods: {

handleClick () {

Toast('提示信息')

}

}

}

Elment

下載 npm i element-ui -S

實(shí)現(xiàn)按需打包

下載 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

/* 或?qū)憺?/p>

* Vue.use(Button)

* Vue.use(Message)

*/

/* eslint-disable no-new */

new Vue({

el: '#app',

components: {App}, // 映射組件標(biāo)簽

template: '' // 指定需要渲染到頁(yè)面的模板

})

//App.vue

打開(kāi)消息提示

export default {

methods: {

open() {

this.$alert('這是一段內(nèi)容', '標(biāo)題名稱', {

confirmButtonText: '確定',

callback: action => {

this.$message({

type: 'info',

message: `action: ${ action }`

})

}

})

}

}

}

總結(jié)

以上是生活随笔為你收集整理的ajax插件库,03.vue-ajax、vue UI 组件库的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。