安装

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版本)的更多相关文章

  1. vue实战(一):利用vue与ajax实现增删改查

    vue实战(一):利用vue与ajax实现增删改查: <%@ page pageEncoding="UTF-8" language="java" %> ...

  2. java springboot整合zookeeper入门教程(增删改查)

    java springboot整合zookeeper增删改查入门教程 zookeeper的安装与集群搭建参考:https://www.cnblogs.com/zwcry/p/10272506.html ...

  3. vue实现数据的增删改查

    在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注 ...

  4. Hibernate入门案例及增删改查

    一.Hibernate入门案例剖析: ①创建实体类Student 并重写toString方法 public class Student { private Integer sid; private I ...

  5. Zookeeper demo增删改查

    Zookeeper 的增删改查demo代码 public class SimpleZkClient { private static final String connectString = &quo ...

  6. vue+express+mongodb 实现 增删改查

    一.创建一个vue项目 用脚手架vue-cli搭建一个项目,数据请求用axios方式,写几个按钮用来调接口(vue这块不做多解释,不懂的可以先去官网学习vue-cli:https://cli.vuej ...

  7. 【Mybatis】mybatis开启Log4j日志、增删改查操作

    Mybatis日志(最常用的Log4j) 官方网站http://www.mybatis.org/mybatis-3/zh/logging.html 1.在src目录下创建一个log4j.propert ...

  8. Series 入门(创建和增删改查)

    Series 是pandas两大数据结构中(DataFrame,Series)的一种.使用pandas 前需要将pandas 模块引入,因为Series和DataFrame用的次数非常多,所以将其引入 ...

  9. MVC 入门 自动生成 增删改查所有功能

    MVC现在版本已经是5了   EF现在最新的应该是6.0.2了 开发工具是 Visual Studio2013 数据库是 SQL Server 2012 这些需要.NET Framework4.5 的 ...

  10. MyBatis入门案例、增删改查

    一.MyBatis入门案例: ①:引入jar包 ②:创建实体类 Dept,并进行封装 ③ 在Src下创建大配置mybatis-config.xml <?xml version="1.0 ...

随机推荐

  1. Vue 不睡觉教程3 - 来点实在的:自动计算剩余时间的任务列表

    目标前两课教的是入门和文件结构.都没有什么实在的东西.这次我们要来点实在的.我们要做出一个待办列表.这个待办列表有以下特点: 可以自动从文本中抽取出这件事情的开始时间可以显示当前距离这件事情的开始时间 ...

  2. SpringDataRedis java.net.UnknownHostException: 127.0.0.1 错误

    找了半天发现原来配置文件中多了一个空格; idea中properties文件的127.0.0.1后面出现了一个空格,编辑器将其变深黄色了

  3. 【杂题】[LibreOJ 2541] 【PKUWC2018】猎人杀【生成函数】【概率与期望】

    Description 猎人杀是一款风靡一时的游戏"狼人杀"的民间版本,他的规则是这样的: 一开始有 n个猎人,第 i 个猎人有仇恨度 wi.每个猎人只有一个固定的技能:死亡后必须 ...

  4. hdu 1233 还是畅通工程 并查集or最小生成树

    某省调查乡村交通状况,得到的统计表中列出了任意两村庄间的距离.省政府“畅通工程”的目标是使全省任何两个村庄间都可以实现公路交通(但不一定有直接的公路相连,只要能间接通过公路可达即可),并要求铺设的公路 ...

  5. <VS2017> 编写VC++单元测试 -(一)新建单元测试工程

    开发人员自己编写单元测试是一个非常好的习惯.单元测试不但能够验证自己所编写的代码是否存在问题,避免提交给测试人员时才发现bug,也可以为将来改动代码的人提供验证代码功能正确性的途径.在我有限的工作生涯 ...

  6. Sweep Line

    391. Number of Airplanes in the Sky https://www.lintcode.com/problem/number-of-airplanes-in-the-sky/ ...

  7. json对象和数组

    Json数据就是格式化的字符串.c#中如果做为参数调用,类型就是string.1.Json数组 方括号[{ "firstName":"John" , " ...

  8. Java 8学习之Stream API

    一个Stream表面上看与一个集合很类似,允许你改变和获取数据.但是实际上他与集合是有很大区别的: Stream自己不会存储元素.元素可能被存储在底层的集合中,或者根据需要产生出来. Stream操作 ...

  9. SPSS学习系列之SPSS Statistics(简称SPSS)是什么?

    不多说,直接上干货! IBM SPSS Statistics 为业务经理和分析人员提供解决基本业务和研究问题所需的核心统计过程.该软件提供的工具使用户能够快速查看数据.为其他测试拟定假设情况.执行澄清 ...

  10. ListenableFuture in Guava

    ListenableFuture的说明 并发编程是一个难题,但是一个强大而简单的抽象可以显著的简化并发的编写.出于这样的考虑,Guava 定义了 ListenableFuture接口并继承了JDK c ...