前端开发随笔（三）——初识Vue.js

Vue的原始框架

<template>
  <div style="width:100%;display:inline;">
    <div class="queryDealerForm">
      <page-title titles="系统设置,人员管理"></page-title>
      <el-button class="new-button" @click="saveUserInfo">保存</el-button>
      <el-button class="new-button" @click="backTo">返回</el-button>
      <el-form class="manageDealerForm" :inline="true" ref="userForm">
        <info-input-item v-model="userForm.userNo" title="编号"
                         placeholder="请输入编号"
                         title-width="140px" content-width="300px"></info-input-item>
        <info-input-item v-model="userForm.username" title="姓名"
                         placeholder="请输入姓名"
                         title-width="140px" content-width="300px"></info-input-item>
        <info-select-item v-model="userForm.sex" title="性别"
                          title-width="140px" content-width="300px" :listArr="sexArr">
        </info-select-item>
        <info-date-item v-model="userForm.birthday" title="出生日期"
                         placeholder="请选择出生日期"
                         title-width="140px" content-width="300px"></info-date-item>
        <info-input-item v-model="userForm.departmentId" title="部门"
                         placeholder="请选择部门"
                         title-width="140px" content-width="300px"></info-input-item>
        <info-input-item v-model="userForm.phone" title="电话"
                         placeholder="请输入电话"
                         title-width="140px" content-width="300px"></info-input-item>
        <info-input-item v-model="userForm.email" title="电子邮箱"
                         placeholder="请输入电子邮箱"
                         title-width="140px" content-width="300px"></info-input-item>

        <info-select-item v-model="userForm.titleId" title="职位"
                          title-width="140px" content-width="300px" :listArr="titleArr"></info-select-item>

        <info-select-item v-model="userForm.master" title="是否主管"
                          title-width="140px" content-width="300px" :listArr="masterArr"></info-select-item>

        <info-input-item v-model="userForm.address" title="家庭住址"
                         placeholder="请输入家庭住址"
                         title-width="140px" content-width="300px"></info-input-item>

        <info-input-item v-model="userForm.roleIdList" title="选择权限"
                         placeholder="请输入选择权限"
                         title-width="140px" content-width="300px"></info-input-item>

        <div >
        <el-form-item style="position: inherit; padding:15px 10px 15px 20px" labelWidth="150px" label="备注：">
          <el-input  type="textarea" v-model="userForm.desc " style="width: 350px;height: 200px;"></el-input>
        </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
  import PageTitle from '../common/PageTitle';
  import InfoInputItem from '../common/InfoInputItem';
  import constant from '../../utils/constant';
  import InfoSelectItem from '../common/InfoSelectItem.vue';
  import ElForm from "../../../node_modules/element-ui/packages/form/src/form.vue";
  import ElCol from "element-ui/packages/col/src/col";
  import InfoDateItem from '../common/BirthDateItem';

  export default {
    name: "edit_add_user",
    components: {
      ElCol,
      ElForm,
      InfoInputItem,
      PageTitle,
      InfoSelectItem,
      InfoDateItem
    },
    data() {
      return {
        userForm: {
          "id": "",
          "userNo": "",
          "username": "",
          "sex": undefined,
          "birthday": 0,
          "departmentId": "",
          "departmentName": "",
          "phone": "",
          "email": "",
          "titleId": "",
          "title": "",
          "master": "0",
          "address": "",
         // "roleIdList": []
        },
        titleArr: [{
          value: '1',
          label: '业务员'
        }, {
          value: '2',
          label: '市场部经理'
        }, {
          value: '3',
          label: '行政经理'
        }, {
          value: '4',
          label: '行政人员'
        }],
        masterArr: [{
          value: '1',
          label: '是'
        }, {
          value: '0',
          label: '否'
        }],
        sexArr: [{
          value: '1',
          label: '男'
        }, {
          value: '2',
          label: '女'
        }],
      };
    },
    methods: {
      saveUserInfo() {
        if (this.$route.params.userId === "add"){//新增用户信息
          let flag = this.checkFormValidate();
          if(flag){
            let para = {};
            para = {
              "address": this.userForm.address,
              "birthdayLong": this.userForm.birthday,
              "departmentId": this.userForm.departmentId,
              "desc": this.userForm.desc,
              "email": this.userForm.email,
              "master": this.userForm.master,
              "phone": this.userForm.phone,
              "roleIdList": [
                this.userForm.roleIdList
              ],
              "sex": this.userForm.sex,
              "titleId": this.userForm.titleId,
              "userNo": this.userForm.userNo,
              "username": this.userForm.username
            };
            if(para.master === '1'){
              para.master=true;
            }else {
              para.master=false;
            }
            if(this.userForm.sex === "男" || this.userForm.sex === '1'){
              para.sex = 1;
            }else {
              para.sex = 2;
            }
            this.$api.addUsers(para,false).then((response) => {
              console.log('http response: ', response);
              this.showMessage('操作成功', 'success');
            }).catch((error) => {
              this.listLoading = false;
              if (error) {
                this.showMessage(error[0].msg, 'error');
              }
            });
            this.$router.push({name: "Setting-User"});
          }
        }else {//编辑用户信息
          let flag = this.checkFormValidate();
          if(flag){
            let para = {};
            para = {
              "address": this.userForm.address,
              "birthdayLong": this.userForm.birthday,
              "departmentId": this.userForm.departmentId,
              "desc": this.userForm.desc,
              "email": this.userForm.email,
              "master": this.userForm.master,
              "phone": this.userForm.phone,
              "roleIdList": [
                this.userForm.roleIdList
              ],
              "sex": this.userForm.sex,
              "titleId": this.userForm.titleId,
              "userNo": this.userForm.userNo,
              "username": this.userForm.username
            };
            if(para.master === '1'){
              para.master=true;
            }else {
              para.master=false;
            }
            if(this.userForm.sex === "男" || this.userForm.sex === '1'){
              para.sex = 1;
            }else {
              para.sex = 2;
            }

            this.$api.editUsers(this.$route.params.userId, para, false).then((response) => {
              console.log('http response: ', response);
              this.showMessage('操作成功', 'success');
            }).catch((error) => {
              this.listLoading = false;
              if (error) {
                this.showMessage(error[0].msg, 'error');
              }
            });
           this.$router.push({name: "Setting-User"});
          }
        }
      },
      getDetail(userId){
        let para={};
        this.$api.getUserDetail(userId, para, false).then((response) => {
          this.listLoading = false;
          console.log('http response: ', JSON.stringify(response));
          this.userForm.userNo = response.userNo;
          this.userForm.username = response.username;
          if(response.sex===1){
          this.userForm.sex = '男';}else {
            this.userForm.sex = '女'
          }


          this.userForm.birthday = new Date(response.birthday).getTime();//response.birthday;
          this.userForm.departmentId = response.departmentId;
          this.userForm.phone = response.phone;
          this.userForm.email = response.email;
          this.userForm.titleId = response.titleId;
          this.userForm.address = response.address;
          this.userForm.desc = response.desc;
          this.userForm.roleIdList = (response.roleIdList).toString();
          if(this.userForm.master){
            this.userForm.master='是';
          }else {
            this.userForm.master='否';
          }
        }).catch((error) => {
          this.listLoading = false;
          if(error) {
            this.$message({
              showClose: true,
              message: error[0].msg,
              type: 'warning'
            });
          }
        });
      },

      checkFormValidate() {
        let message = null;
        let para = {};
        para = {
          "address": this.userForm.address,
          "birthday": this.userForm.birthday,
          "departmentId": this.userForm.departmentId,
          "desc": this.userForm.desc,
          "email": this.userForm.email,
          "master": this.userForm.master,
          "phone": this.userForm.phone,
          "roleIdList": [
            this.userForm.roleIdList
          ],
          "sex": this.userForm.sex,
          "titleId": this.userForm.titleId,
          "userNo": this.userForm.userNo,
          "username": this.userForm.username
        };
        if (!this.userForm.address) {
          message = "家庭住址不能为空";
        } else if (!this.userForm.birthday) {
          message = "出生日期不能为空";
        }
        else if (!this.userForm.departmentId) {
          message = "请选择部门";
        } else if (!this.userForm.email) {
          message = "邮箱不能为空";
        } else if (!this.userForm.phone) {
          message = "联系电话不能为空";
        } else if (!this.userForm.roleIdList) {
          message = "请设置权限";
        }else if (!this.userForm.sex) {
          message = "请设置性别";
        }else if (!this.userForm.titleId) {
          message = "请设置职位";
        }else if (!this.userForm.userNo) {
          message = "编号不能为空";
        }else if (!this.userForm.username) {
          message = "姓名不能为空";
        }
        if (message) {
          this.showMessage(message, 'warning', 1000);
          return false;
        }
        return true;
      },
      showMessage(content, type, duration) {
        if (duration) {
          this.$message({showClose: true, message: content, type: type, duration: duration});
        } else {
          this.$message({showClose: true, message: content, type: type});
        }
      },
      backTo(){
        this.$router.push({name: "Setting-User"});
      },
    },

    created() {
      //若是 编辑,接受上一个页面传递的参数
      if (this.$route.params.userId != "add") {
        this.getDetail(this.$route.params.userId);
      }else{
        this.userForm.birthday = new Date().getTime();
      }
    }
  }
</script>

<style scoped>
  .new-button {
    float: right;
    margin-top: -6px;
  }

  .queryDealerForm {
    width: 100%;
    display: inline;
  }

  .queryDealerForm .manageDealerForm {
    position: relative;
    float: left;
    width: 100%;
    background-color: #fff;
  }

  .input_{
    position: inherit;
    left:20px;
  }

</style>

Vue.js的界面用<template></template>标签框住，在<script></script>标签中可以为数据赋值，可以初始化表单，可以引入组件等等，还有有关Vue生命周期的钩子函数，如Created()，mounted()函数等，<style></style>标签中可以为各个HTML元素设置样式，其中“#？”开头的对应上方所有id=？的元素，“.？”开头的对应上方所有class=？的元素，这一点和传统的CSS一样。