【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一起传到父组件,在父组件里写方法操作

【vue入门】日志demo,增删改查的练习(无vuex版本)的更多相关文章
- vue实战(一):利用vue与ajax实现增删改查
vue实战(一):利用vue与ajax实现增删改查: <%@ page pageEncoding="UTF-8" language="java" %> ...
- java springboot整合zookeeper入门教程(增删改查)
java springboot整合zookeeper增删改查入门教程 zookeeper的安装与集群搭建参考:https://www.cnblogs.com/zwcry/p/10272506.html ...
- vue实现数据的增删改查
在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注 ...
- Hibernate入门案例及增删改查
一.Hibernate入门案例剖析: ①创建实体类Student 并重写toString方法 public class Student { private Integer sid; private I ...
- Zookeeper demo增删改查
Zookeeper 的增删改查demo代码 public class SimpleZkClient { private static final String connectString = &quo ...
- vue+express+mongodb 实现 增删改查
一.创建一个vue项目 用脚手架vue-cli搭建一个项目,数据请求用axios方式,写几个按钮用来调接口(vue这块不做多解释,不懂的可以先去官网学习vue-cli:https://cli.vuej ...
- 【Mybatis】mybatis开启Log4j日志、增删改查操作
Mybatis日志(最常用的Log4j) 官方网站http://www.mybatis.org/mybatis-3/zh/logging.html 1.在src目录下创建一个log4j.propert ...
- Series 入门(创建和增删改查)
Series 是pandas两大数据结构中(DataFrame,Series)的一种.使用pandas 前需要将pandas 模块引入,因为Series和DataFrame用的次数非常多,所以将其引入 ...
- MVC 入门 自动生成 增删改查所有功能
MVC现在版本已经是5了 EF现在最新的应该是6.0.2了 开发工具是 Visual Studio2013 数据库是 SQL Server 2012 这些需要.NET Framework4.5 的 ...
- MyBatis入门案例、增删改查
一.MyBatis入门案例: ①:引入jar包 ②:创建实体类 Dept,并进行封装 ③ 在Src下创建大配置mybatis-config.xml <?xml version="1.0 ...
随机推荐
- Machine learning 第7周编程作业 SVM
1.Gaussian Kernel function sim = gaussianKernel(x1, x2, sigma) %RBFKERNEL returns a radial basis fun ...
- 开源单点登录系统CAS入门
一.什么是CAS CAS 是 Yale 大学发起的一个开源项目,旨在为 Web 应用系统提供一种可靠的单点登录方法,CAS 在 2004 年 12 月正式成为 JA-SIG 的一个项目.CAS 具有以 ...
- 判断IE浏览器的版本号
function IEVersion() { var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isIE = userAgen ...
- Struts2 漏洞系列之S2-001分析
0x00 前言 最近在学习java的相关漏洞,所以Struts2的漏洞自然是绕不开的.为了更好的理解漏洞原理,计划把Struts2所有的漏洞自己都做一个复现.并且自己去实现相关的POC.相关的环境 ...
- SpringBoot进阶用法-随笔
SpringBoot进阶用法 实现setApplicationContext //实现ApplicationContextAware接口,重写setApplicationContext方法 publi ...
- Linux/Mac安装oh-my-zsh后不执行~/.bash_profile、~/.bashrc解决办法
安装了zsh之后默认启动执行脚本变为了-/.zshrc. 解决办法: Mac: 修改-/.zshrc文件,在其中添加:source -/.bash_profile.source -/.bashrc:注 ...
- Unity 依赖注入
关于Ioc的框架有很多,比如astle Windsor.Unity.Spring.NET.StructureMap,我们这边使用微软提供的Unity做示例,你可以使用Nuget添加Unity,也可以引 ...
- jQuery Mobile 实现苹果滑动删除闹钟功能的几点总结
1.jquery给动态添加的元素添加事件 在jquery推出新版本,使用.on()以前,我们会用.live()来为动态添加的代码绑定事件,但是现在jQuery用.on()替代了.live() 先看个. ...
- CentOS6.4安装OpenSSL
1.下载 wget https://www.openssl.org/source/openssl-1.0.2h.tar.gz 2.解压 tar zxf openssl-1.0.2h.tar.gz cd ...
- 转载:BIO | NIO | AIO
http://my.oschina.net/bluesky0leon/blog/132361 也谈BIO | NIO | AIO (Java版) 转载自:zheng-lee博客 发布时间: 201 ...