【vue入门】日志demo,增删改查的练习(无vuex版本)

时间:2023-03-09 00:26:13
【vue入门】日志demo,增删改查的练习(无vuex版本)

安装

1. 确定电脑已装node和npm

【vue入门】日志demo,增删改查的练习(无vuex版本)

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

 【vue入门】日志demo,增删改查的练习(无vuex版本)

3. 在项目里安装依赖
【vue入门】日志demo,增删改查的练习(无vuex版本)

4. 运行

【vue入门】日志demo,增删改查的练习(无vuex版本)

配置路由
为了动态渲染各个页面的组件,这个是必须的,这些都在router文件夹里的index.js配置好,在components文件夹在下面新建index.vue
 1. 导入页面
【vue入门】日志demo,增删改查的练习(无vuex版本)

 2. 配置全局路径
【vue入门】日志demo,增删改查的练习(无vuex版本)

Element-UI
使用element-ui编写页面样式,具体操作参照官网
 1. 安装
【vue入门】日志demo,增删改查的练习(无vuex版本)

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

【vue入门】日志demo,增删改查的练习(无vuex版本)

【vue入门】日志demo,增删改查的练习(无vuex版本)

页面

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

【vue入门】日志demo,增删改查的练习(无vuex版本)

绑定table数据

 1. 安装并全局导入axios(导入方式看官网)
【vue入门】日志demo,增删改查的练习(无vuex版本)

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

【vue入门】日志demo,增删改查的练习(无vuex版本)

 2. 获取接口,绑定数据
【vue入门】日志demo,增删改查的练习(无vuex版本)

新增日志数据【知识点:父子组件的传值】
 1. 新建新增日志组件edit,并且在父组件里调用,edit页面内容forms快捷键自动生成
非空验证(详情看elementUi form表单验证) 
【vue入门】日志demo,增删改查的练习(无vuex版本)

【vue入门】日志demo,增删改查的练习(无vuex版本)

【vue入门】日志demo,增删改查的练习(无vuex版本)

 3.点添加,显示弹窗。

【vue入门】日志demo,增删改查的练习(无vuex版本)

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

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

【vue入门】日志demo,增删改查的练习(无vuex版本)