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 }`

})

}

})

}

}

}

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。