菜鸟教程下载的版本低
https://www.jb51.net/article/146689.htm
配置
axios安装配置
https://www.kancloud.cn/wsj-/vue/645840
npm run dev
HelloWorld.vue
vue数据渲染
<template>
<div id="app">
<table class="table">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>用户名</th>
<th>id</th>
<th>操作时间</th>
</tr>
<tr v-for='a in yzmId'>
<th>{{a.clientId}}</th>
<th>{{a.clientName}}</th>
</tr>
</thead>
</table>
<div id="one" >
<v-page :setting="pageSet" @page-chage="pageChange"></v-page>
</div>
</div>
</template>
跨域,json
<script>
export default {
data:function () {
return{
yzmId:''
}},
pageSet:{
totalRow:0,
pageSizeMenu:[20,100]
},
methods:{
pageChange(pInfo){
console.log(pInfo);
}
},
mounted:function () {
var self=this;
this.$axios.get("/Client/selectAllClients",{emulateJSON:true}).then(function (response){
self.yzmId=response.data.pageInfo.list;
}).catch(function (error) {
console.log("error init."+error)
}); }}
</script>
<style scoped>
#one{
position:fixed;
top:700px;
right:200px;
}
</style>
index.js
/*引入Vue框架*/
import Vue from 'vue';
/*引入资源请求插件*/
import Axios from 'axios';
/*使用axios插件*/
Vue.prototype.$axios = Axios;
Axios.defaults.baseURL = '/api'
Axios.defaults.headers.post['Content-Type'] = 'application/json';
export default({
});
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from './axios';
import VuePageinate from 'vue-paginate'
import vPage from 'v-page';
Vue.config.productionTip = false;
Vue.use(VuePageinate)
Vue.use(vPage);
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
axios,
components: { App },
template: '<App/>'
})