vue-ajax
vue 项目中常用的 2 个 ajax 库
- vue-resource: vue 插件, 非官方库, vue1.x 使用广泛
- axios: 通用的 ajax 请求库, 官方推荐, vue2.x 使用广泛
vue-resource 的使用
在线文档 https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
下载
npm install vue-resource --save
示例代码
// 引入模块
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 的使用
- 在线文档:https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
- 下载:
npm install axios --save
示例代码
// 引入模块
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/>' // 指定需要渲染到页面的模板
})
/*App.vue*/
<template>
<div class="container">
<Search></Search>
<UsersMain></UsersMain>
<!--<users-main></users-main>-->
</div>
</template>
<script>
import Search from './components/Search.vue'
import Main from './components/Main.vue'
export default {
components: {
Search,
UsersMain: Main
}
}
</script>
<style>
</style>
/*Search.vue*/
<template>
<section class="jumbotron">
<h3 class="jumbotron-heading">Search Github Users</h3>
<div>
<input type="text" placeholder="enter the name you search" v-model="searchName"/>
<button @click="search">Search</button>
</div>
</section>
</template>
<script>
import PubSub from 'pubsub-js'
export default {
data () {
return {
searchName: ''
}
},
methods: {
search () {
const searchName = this.searchName.trim()
if(searchName) {
// 分发一个search的消息
PubSub.publish('search', searchName)
}
}
}
}
</script>
<style>
</style>
/*Main.vue*/
<template>
<div>
<h2 v-show="firstView">请输入关键字搜索</h2>
<h2 v-show="loading">请求中...</h2>
<h2 v-show="errorMsg">{{errorMsg}}</h2>
<div class="row" v-show="users.length>0">
<div class="card" v-for="(user, index) in users" :key="index">
<a :href="user.url" target="_blank">
<img :src="user.avatarUrl" style='width: 100px'/>
</a>
<p class="card-text">{{user.username}}</p>
</div>
</div>
</div>
</template>
<script>
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 = '请求失败!'
})
})
}
}
</script>
<style>
.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%;
}
</style>
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
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/static/css/bootstrap.css">
<title>vue_demo</title>
<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
<script>
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
if(!window.Promise) {
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
}
</script>
//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/>' // 指定需要渲染到页面的模板
})
//App.vue
<template>
<mt-button type="primary" @click.native="handleClick" style="width: 100%">Test</mt-button>
</template>
<script>
import { Toast } from 'mint-ui'
export default {
methods: {
handleClick () {
Toast('提示信息')
}
}
}
</script>
<style>
</style>
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/>' // 指定需要渲染到页面的模板
})
//App.vue
<template>
<el-button :plain="true" @click="open">打开消息提示</el-button>
</template>
<script>
export default {
methods: {
open() {
this.$alert('这是一段内容', '标题名称', {
confirmButtonText: '确定',
callback: action => {
this.$message({
type: 'info',
message: `action: ${ action }`
})
}
})
}
}
}
</script>
