【vue入门】日志demo，增删改查的练习（无vuex版…

安装

1. 确定电脑已装node和npm

出现版本号则说明电脑已经安装好node和npm
2. 创建一个基于webpack的项目

 

3. 在项目里安装依赖

4. 运行

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

 2. 配置全局路径

Element-UI
使用element-ui编写页面样式，具体操作参照官网
 1. 安装

 2. 全局配置
找到main.js文件,引入官网提供的样式

页面

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

绑定table数据

 1. 安装并全局导入axios（导入方式看官网）

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

 2. 获取接口，绑定数据

新增日志数据【知识点：父子组件的传值】
 1. 新建新增日志组件edit,并且在父组件里调用，edit页面内容forms快捷键自动生成
非空验证（详情看elementUi form表单验证） 

 3.点添加，显示弹窗。

 4. 在子组件里method里写新增方法submit()

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

 ??子??

 

父??

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

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

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

子??

父??

删除日志
 写删除方法
1. 用element组件的删除方法，传入索引和数据，其

2. 写删除方法接收索引，获取当前数据行的Id，传入，然后调用api方法删除数据，删除单元格，本demo加了是否删除数据弹窗

 

 修改日志
1. 修改和添加可以用一个子组件，点击修改，修改弹窗显示，然后将本条数据传入到子组件中，子组件接收一下就可以

此时应该注意这个row，是点击编辑的时候传入的，因为我们在编辑的时候写了edit(tabledata[scope.$index])，然后这个editdata是我们将要传入子组件的数据。这样还远远不够，我们需要再父组件中引用的子组件绑定:data接收传值

这样父组件所做的事就完成了，下面是我们的子组件

2. 子组件接收父组件传值
props接收,mounted初始化数据<如果传进来值就赋值给表单，如果没有就初始化表单>，watch监听数据变化<不监听的话，文本框的值不会变>

最后点击提交edita方法将数据传到父组件，这和我们做添加时的逻辑是一样的，不需要再做改变。

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

 

关于绑定数据的问题
1. :data="model"
(1)用于绑定向子组件传的数据，在父组件data里必须定义完整

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

2. :model="model"
(1)el-from里绑定的数据，el-form-item里则为v-model="model.user"

关于element-ui表单验证的坑

1.:rules="rules"，不是少个s,就是少个：

2.最外层:model,rel

3.item层:prop(有几次都忘记写)

4.input层:v-model

关于出现这种低级错误的原因如下图

 

 本文原demo地址 https://gitee.com/losingdreaming/log

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有