vue+element实战（入门篇 一）

我为什么会学vue？

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

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

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

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

vue到底难不难？

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

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

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

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

 简单的举个栗子：

小栗子

<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=”字段名”。

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

小栗子

<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数据交互和渲染已经完成了！