1、axios：
https://github.com/axios/axios
https://www.npmjs.com/package/axios
跨域：jsonp，
之前vue使用的对应内容：vue-resourse
2、新建项目news：
在之前安装好（webpack、webpack-cli、vue、vue-cli的目录）
vue init webpack news
（安装时不选test相关内容，暂不建议安装es-lint，避免新建项目失败）
npm run dev启动，
http://localhost:8080/#/
查看是否启动成功。
3、安装axios
在新建的项目目录news中，
npm install axios -D
（跨域需要安装代理中间件）
npm install -S http-proxy-middleware
4、配置跨域
config/index.js
proxyTable: {
"/api":{
target: 'http://api.komavideo.com/news/list',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
},
5、在vue项目中使用axios
src/main.js中引入axios：
import axios from 'axios' // 在这里引入axios
Vue.prototype.$axios = axios; // 在vue中使用axios，全局
6、在vue中远程获得跨域数据，并进行操作和展示。
Helloworld.vue中：
<button @click='getnews'>获得首页新闻</button>
getnews(){
var url = '/api'; // 这里就是刚才的config/index.js中的/api
//下面是全局axios的调用方式，如果是本地导入axios，直接用导入的名称即可
this.$axios.get(url)
.then(response=>{
console.log(response)
this.msg=response.data;
})
.catch(error=>{
console.log(error);
})
}
npm run build
npm start
http://localhost:8080/，
npm install axios -D
npm install -S http-proxy-middleware
src/main.js中引入axios：
import axios from 'axios' // 在这里引入axios
Vue.prototype.$axios = axios; // 在vue中使用axios
config/index.js
proxyTable: {
"/api":{
target: 'http://api.komavideo.com/news/list',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
},
var url = '/api'; // 这里就是刚才的config/index.js中的/api
this.$axios.get(url)
.then(function(response) {
console.log(response);
})
.catch(function(error) {
console.log(error);
});
API-URL
http://api.komavideo.com/news/list
参数说明
pageSize
每页取出的数据条数，默认：5条，最大20条
pageIndex
取出的页面索引，即第几页，从0开始去得，默认：0(第一页)
export default {
name: 'yuan',
data () {
return {
msg: []
}},
methods:{ yuanjsonp(){
var url = '/api'; // 这里就是刚才的config/index.js中的/api
this.$axios.get(url)
.then(response=>{
this.msg=response.data;
})
.catch(error=>{
console.log(error);
})
},
postlist(){
var url = '/api';
this.$axios.post(url, {
pageSize: 12,
pageIndex: 1}).then(response=>{
this.msg=response.data;
}).catch(error=>{
console.log(error);
})
}}
}
https://github.com/vuejs/vue-touch/tree/next
cnpm install vue-touch@next
1
var VueTouch = require('vue-touch')
Vue.use(VueTouch, {name: 'v-touch'})
1
2
//左划 默认渲染为div data为参数
<v-touch v-on:swipeleft="onSwipeLeft(data)">Swipe me!</v-touch>
//点击 渲染为一个a标签
<v-touch tag="a" v-on:tap="onTap">Tap me!</v-touch>
//点击 渲染为p标签
<v-touch tag="p" v-on:tap="onTap">Tap me!</v-touch>
网友评论