VUE + ES6 + ELEMENT UI 学习（一）

VUE + ES6 + ELEMENT UI 学习（一）

之前前端一直使用bootstrap或者H-UI，逻辑代码都是JS+>jQuery，JS实在太烂了，不过写起来也是非常方便了，毕竟随便怎么写都行，报错也不怕，有效果就行（偷笑.jpg）。

最近项目都要换VUE来开发，准确说VUE＋ES６＋ELEMENT UI。小透明反抗不了，只能从头学习啦，就从VUE开始。记下学习过程，也做个记录。

第一步，打开VUE官网，安装node.js、npm、cnpm。据说webstrom根据VUE深度优化过，那就再下载一个webstrom吧。工欲善其事，必先利其器嘛。看几眼文档。。。全文字好麻烦，去哔哩哔哩搜个教程，1.5倍速看完。很简单嘛，和jQuery区别不大的样子。然后把项目拉下来，部署、启动打开js页面。。。

嗯。。。export default是什么鬼！！！VUE教程没有啊。翻翻VUE官网，也没呀。百度一个……是ES6？ES6什么鬼。万能的哔哩哔哩。第一节，历史——跳过，第二节，兼容性——跳过。1.5倍速，说白了就是再JS基础上添加了两个数据类型和一些规范方法。和export default也没关系啊！！！

去看看main.js，Vue.use(ElementUI)，这个ElementUI是什么鬼。百度一下，哦，是饿了么开发的前端框架。类似于之前的bootstrap和H-UI，不过是根据VUE开发的，用这个必须用VUE。打开官网，看到了，export default，就是初始化嘛，elelmentUI中的变量、方法都是写在这个里面的，类似于VUE教程中的new Vue()。

嗯嗯，知道了，先不管原理什么的，开始写页面吧，先来个简单的页面，就是简单的布局+表格就行。

1.创建vue、js、scss三个文件，vue不需要html和body标签，直接用标签做基本标签，下面分别用

<template>
</template>
<script src="./listDemo.js" />
<style src="./listDemo.scss" lang="scss" />

src等于号后面顺手写上了单引号，据然报错了0.0为什么？看一下错误，必须为双引号？ES6这么严格的么？怕了怕了。

2.js代码，按照elementUI官网上的格式写。

export default{
	name: 'listDemo', //这个是vue对外暴露的地址，通过这个地址就能找到这个vue页面。
	data() { //这个是变量声明和赋初值的地方，所有的变量都要在return里面赋值才可以使用。
		return: {
		}
	}
}

这样，基本框架就搭起来了，然后就是添加内容了，页面要好看，首先加个布局，这样方便管理嘛。

<template>
  <el-container>
    <el-header class="header">食物列表</el-header>
    <el-main class="main">这里是内容</el-main>
  </el-container>
</template>

再在scss文件里面加个样式

.header {
  color: #ffffff;
  background: #303133;
  line-height: 60px;
  font-size: 25px;
}
.main {
  color: #000000;
  background: #DCDFE6;
  text-align: left;
}

内容中准备放个列表再加个搜索条件。为了方便管理，就用布局分开吧。搜索框，就用form表单，表格自然就用table写了。根据官网的例子写，html代码如下：

<el-container>
        <el-header>
          <el-form :model="search" :inline="true" class="form">
            <el-form-item label="名称:">
              <el-input v-model="search.name" class="search" placeholder="请输入食物名称" clearable>
                <i slot="suffix">{{ search.name }}</i>
              </el-input>
            </el-form-item>
            <el-form-item label="产地:">
              <el-select v-model="search.city" class="search" placeholder="请选择" clearable>
                <el-option v-for="item in cities" :key="item.value" :value="item.value" :label="item.label"></el-option>
                <i slot="prefix">{{ search.city }}</i>
              </el-select>
            </el-form-item>
            <el-form-item label="生产日期:">
              <el-date-picker v-model="search.date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
            </el-form-item>
            <el-switch v-model="search.open" class="open" active-text="关闭" active-value="info" inactive-text="开启" inactive-value="success" @change="changeBtn"></el-switch>
            <el-button :type="search.btn" :disabled="search.isDis"><i class="el-icon-search"></i></el-button>
          </el-form>
        </el-header>
        <el-main>
          <el-table :data="foodList" stripe border highlight-current-row @row-click="currentRow" @row-dblclick="newCity">
            <el-table-column prop="num" label="编号"></el-table-column>
            <el-table-column prop="name" label="名称"></el-table-column>
            <el-table-column prop="city" label="产地"></el-table-column>
            <el-table-column prop="date" label="生产日期" sortable></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini">编辑</el-button>
                <el-button size="mini">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>

html完成以后就要写js页面了，变量写在data()里面，方法写在methods里面。代码如下：

export default {
  name: 'listDemo',
  data() {
    return {
      search: {
        name: '',
        open: true,
        btn: 'success',
        isDis: false,
        city: '',
        date: ''
      },
      cities: [{
        value: '北京',
        label: '北京'
      }, {
        value: '上海',
        label: '上海'
      }, {
        value: '成都',
        label: '成都'
      }, {
        value: '佛山',
        label: '佛山'
      }, {
        value: '西安',
        label: '西安'
      }],
      foodList: [{
        num: '000001',
        name: '冰峰',
        city: '西安',
        date: '2020-08-01'
      }, {
        num: '000002',
        name: '北冰洋',
        city: '北京',
        date: '2020-08-02'
      }, {
        num: '000003',
        name: '盐汽水',
        city: '上海',
        date: '2020-08-03'
      }, {
        num: '000004',
        name: '健力宝',
        city: '佛山',
        date: '2020-08-04'
      }, {
        num: '000005',
        name: '峨眉雪',
        city: '成都',
        date: '2020-08-05'
      }]
    }
  },
  methods: {
    currentRow(val) {
      val.city = '榆林'
    },
    newCity(val) {
      val.city = '西安'
    },
    changeBtn(val) {
      this.search.btn = val
      if (val === 'info') {
        this.search.isDis = true
        this.search.name = ''
        this.search.city = ''
        this.search.date = ''
      } else {
        this.search.isDis = false
      }
    }
  }
}

不知道是不是项目引入了其他的代码检测文件，这个项目代码要求特别严格，比如，方法名与小括号之间不允许有空格，小括号和大括号中间必须有一个空格。一个语句结束后不允许加“;"，每个逗号后面必须有空格，每个方法体中的代码必须缩进两格等等，要求特别严格，排除这些错误耗费了非常多的时间。回头有时间把遇到的错误都记录一下吧，方便以后查询。总之，今天花了一整天的页面是这样的:

#######

明天再看看怎么用ajax发送请求到后端吧。先这样了……