安装

1. 确定电脑已装node和npm

 node -v

npm -v

出现版本号则说明电脑已经安装好node和npm

2. 创建一个基于webpack的项目

vue init webpack dailyrecord

3. 在项目里安装依赖

cd dailyrecord

npm install

4. 运行

npm run dev

这样你的vue就跑起来啦

配置路由

为了动态渲染各个页面的组件，这个是必须的，这些都在router文件夹里的index.js配置好，新建dailyrecord文件夹在下面新建index.vue

1. 导入页面

import Index from '@/dailyrecord/Index'

2. 配置全局路径

path:'\'
component:'Index'

Element-UI

使用element-ui编写页面样式，具体操作参照官网

1. 安装

npm i element-ui -s

2. 全局配置

找到main.js文件

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

页面

参考element-ui官网做出一些假数据写出index页

绑定table数据

关于接口传值必须要知道的，后台传的值是数组还是对象。一定要确定好，不然后期很容易传错或者接收错的值，导致数据传输不正确，不显示数据

1. 安装并全局导入axios

npm i axios

Vue.prototype.$axios = axios

axios 并不属于 vue的插件
框架与Http本身没有必然的归属性关系，是要实现了Http标准，都可以在任意框架中使用
想要使用this调用的话，可以绑定到vue.prototype上

2. 获取接口，绑定数据

loadlist(){
    this.$axios.get('')
    .then(res=》{
        this.dateb=res.data
    })
}

新增日志数据

1. 新建新增日志组件addlog,并且在父组件里调用

非空验证（详情看elementUi form表单验证）

<add-log .....</add-log>

import AddLog from '@/dailyrecord/AddLog'

  components: {
    AddLog
  }

2. 在子组件里method里写新增方法 addlogone()

新增事件：submit-btn-click，取消事件：cancel-dialog一起传到父组件，在父组件里写方法操作

 @click="$emit('cancel-dialog')"  子

@cancel-dialog="addmodel=false"   父

@submit-btn="addlogl"   父

  this.$emit('submit-btn', this.formdata)  子

新增里面验证非空通过就提交model到父组件。

  addlogone: function () {
      this.$refs.forma.validate((val) => {
        if (val) {
          this.$emit('submit-btn', this.formdata)
        }
      })
    }

父组件写方法获取api并传入model,关闭dialog,清空表单（在子组件写清空方法然后父组件调用，ref，refs）

    addlogl (formdata) {
      this.$axios.post('http://qianjia.space:8000/logs', formdata)
        .then((res) => {
          this.addlog = false
          this.loadlist()
          this.$refs.form.reset()
        })
    }

赋值到页面中,再加载一遍页面

this.loadlist()

删除日志

写删除方法

用element组件的删除方法，传入索引和数据

@click.native.prevent="deleteRow(scope.$index, datab)"

写删除方法接收索引，获取当前数据行的Id，传入，然后调用api方法删除数据，最后删除单元格

detleteRow(index,rows){
    var id = rows[index]._id.$oid
    ....
}

修改日志

点击弹出表单，赋值到子组件
:data="formdata"

  edit (row) {
      this.formdata = row
      this.editlog = true
    }

<edit :data="formdata"></edit>

子组件接收父组件传值
props,mount初始化数据，watch监听数据变化<不监听的话，文本框的值不会变>

  props: {
    data: Object
  }

  mounted () {
    if (this.data && Object.keys(this.data).length) {
      this.setlog()
    } else {
      this.formdata = this.initModel()
    }
  }

  watch: {
    data: function () {
      this.setlog()
    }
  }

点击提交edita方法将数据传到父组件

 @click="edita"

   edita: function () {
      this.$refs.hh.validate(valid => {
        if (valid) {
          console.log(this.formdata)
          this.$emit('edita', this.formdata)
        }
      })
    }

父组件页面接收@edita，并定义方法提交数据到修改的接口（需要看数据是什么格式的再决定传入），关闭弹窗

    edita (model) {
      let json = {
        'summary': this.formdata.summary,
        'content': this.formdata.content,
        'user': this.formdata.user
      }
      this.$axios.put('http://qianjia.space:8000/logs' + '/' + model._id.$oid, json)
      .then((res) => {
        this.editlog = false
      })
    }

合并addlog和editlog

  mounted () {
    if (this.data && Object.keys(this.data).length) {
      this.setlog()
    } else {
      this.formdata = this.initModel()
    }
  },
  watch: {
    data: function () {
      this.setlog()
    }

挂载的时候因为add走了Init
edit走了setlog，点击确定的时候，都传入了修改的Model，然后到父组件的时候用不同的方法传递一下api接口就行了

关于绑定数据的问题

1. :data="model"

(1)用于绑定向子组件传的数据，在父组件data里必须定义完整

data:function(){
    model:{
        data:'',
        user:'',
        summary:'',
        content:''
    }
}

(2)用于绑定table数据，写在el-table最外层，在子组件里定义类型就可以，做列表显示用，init里赋值

data:function(){
     model:[]
}

【Vue入门】练习demo