Dai Chong's blog

我为什么会学vue?

 学Vue之前一直觉得它好难,首先源代码看不懂,对于我一个主要是做PHP后端来说,看见那些import还有哪些花里胡哨的语法,真的是太难看懂了。

 后来在机缘巧合的进了一家后台是用vue+element搭建的公司,因为公司的前端就一个,关键还是个妹子,也不好意给她增加工作量,基本上管理后台的后端代码和前端代码都需要我来写。

 好在框架已经搭建好了,我只需要写一些数据交互和数据渲染。

 更深入的了解Vue的设计思想点击这里: Vue官网Vue设计思想

vue到底难不难?

 从我真正接触vue来说,想真正把vue摸透确实很难,但是只想学会怎么用vue搭建后台管理系统这倒不难。

 当然这需要你有点前端的基础(html\css\js),在没有前端的基础情况下,入门vue确实有点难。

有一定前端的基础的情况下,怎么快速的入门vue?

 首先你要知道vue+elementUi或者其他ui开发的核心是什么?

 简单的举个栗子:

小栗子
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
<template>
<el-table :data="tableData">
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
}
</script>

 从代码可以看出Table的数据来源是Js里tableData数组,它们是通过Vue的特性双向绑定来实现的:data=”tableData”,字段通过:prop=”字段名”

 那么在真实数据交互的情况下就这么写:

小栗子
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
<script>
export default {
data() {
return {
tableData: []
}
},
created() { // 页面创建后执行
this.getList(); // 查询数据
},
methods: { // 方法集合
getList(){
axios({ // 首选你要安装 axios
             method:'get',
             url:'请求地址'
          }).then(function(resp){
// 请求成功,把数据赋值给tableData
this.tableData = resp.data
          }).catch(resp => {
// 请求失败
          });
}
}
}
</script>

 就这么简单,vue+element+axios数据交互和渲染已经完成了!


 评论