get(url, [data], [success], [options])

post(url, [data], [success], [options])

put(url, [data], [success], [options])

patch(url, [data], [success], [options])

delete(url, [data], [success], [options])

jsonp(url, [data], [success], [options])

具体举例如下：

1、导入vue-resource

<script src="js/vue.js"></script>

<script src="js/vue-resource.js"></script>

2、基于全局Vue对象使用http

// 通过someUrl获取后台数据，成功后执行then的代码

Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback)

3、在一个Vue实例内使用$http

// $http是在vue的局部范围内的实例

this.$http.get('/someUrl', [options]).then(successCallback, errorCallback)

说明：

在发送请求后，使用then方法来处理响应结果，then方法有两个参数，第一个参数是响应成功时的回调函数，第二个参数是响应失败时的回调函数。

?

1

<script src="plugins/element-ui/index.js"></script>

然后引入需要用到的vue相关的js文件

?

1

2

3

4

<script src="plugins/vue/vue.js"></script>

<script src="plugins/vue/vue-resource.js"></script>

<script src="plugins/vue/vue-moment.min.js"></script>

<script src="js/jquery.min.js"></script>

下面先说一下html文件

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

<div id="user">

<!-- 操作 -->

<ul class="btn-edit fr">

<li >

<el-button type="primary" @click="dialogCreateVisible = true">添加用户</el-button>

<el-button type="primary" icon="delete" :disabled="selected.length==0" @click="removeUsers()" >删除</el-button>

<el-button type="primary" icon="edit" :disabled="selected.length==0" >停用</el-button>

<el-button type="primary" icon="edit" :disabled="selected.length==0" >激活</el-button>

</li>

</ul>

<!-- 用户列表-->

<el-table :data="users"

stripe

v-loading="loading"

element-loading-text="拼命加载中..."

style="width: 100%"

height="443"

@sort-change="tableSortChange"

@selection-change="tableSelectionChange">

<el-table-column type="selection"

width="60">

</el-table-column>

<el-table-column sortable="custom" prop="username"

label="用户名"

width="120">

</el-table-column>

<el-table-column prop="name"

label="姓名"

width="120">

</el-table-column>

<el-table-column prop="phone"

label="手机"

>

</el-table-column>

<el-table-column prop="email"

label="邮箱">

</el-table-column>

<el-table-column prop="create_time" sortable="custom" inline-template

label="注册日期"

width="260">

<div>{{ row.create_time | moment('YYYY年MM月DD日 HH:mm:ss')}}</div>

</el-table-column>

<el-table-column inline-template

label="操作"

width="250">

<el-button type="primary" size="mini" @click="removeUser(row)">删除</el-button>

<el-button type="primary" size="mini" @click="setCurrent(row)">编辑</el-button>

</el-table-column>

</el-table>

<!--分页begin-->

<el-pagination class="tc mg"

:current-page="filter.page"

:page-sizes="[10, 20, 50, 100]"

:page-size="filter.per_page"

layout="total, sizes, prev, pager, next, jumper"

:total="total_rows"

@size-change="pageSizeChange"

@current-change="pageCurrentChange">

</el-pagination>

<!--分页end-->

</div>

这一段是element的表单以及编辑还有分页样式 可以直接复制进来 其中添加了一些click操作 后面需要用到，然后我们就开始引入js

了解过vuejs的应该知道这样的结构 data里面填写我们获取的数据 一些规则 定义一些变量

在methods进行我们的操作

?

1

2

3

4

5

vm = new Vue({

el: '#user',

data:{},

methods:{}

})

首先 我们先从读取数据开始

放入你的url

users是表格绑定的数组 也是存放从后台获取的数据

将需要显示的数据放在filter中

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

vm = new Vue({

el: '#user',

// 数据模型

data: function() {

return {

url: 'url',

users: [],

filter: {

per_page: 10, // 页大小

page: 1, // 当前页

name:'',

username:'',

phone:'',

is_active:'',

sorts:''

},

total_rows: 0,

loading: true,

}

},

methods:{}

})

接下来我们添加methods

pageSizeChange() 以及 pageCurrentChange()是用于分页的函数

在query() 是用于搜索的项目

getUsers() 就是用于获取数据

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

methods: {

pageSizeChange(val) {

this.filter.per_page = val

this.getUsers()

},

pageCurrentChange(val) {

this.filter.page = val

this.getUsers()

},

query(){

this.filter.name=''

this.filter.username=''

this.filter.phone=''

this.filter[this.select]=this.keywords

this.getUsers()

},

// 获取用户列表

getUsers() {

this.loading = true

var resource = this.$resource(this.url)

resource.query(this.filter)

.then((response) =>{

this.users = response.data.datas

this.total_rows = response.data.total_rows

this.loading = false

})

.catch((response)=>{

this.$message.error('错了哦，这是一条错误消息')

this.loading = false

})

},

}