Vue入门 ---- 简易留言板
##简述
初学vue,比Angular要简单易学一点,基本就是html代码+json。这是第一个小的例子,用到了vue的几个常用方法,其中v-for的$index稍微有点迷惑,也影响了完成的速度,网上说是vue2.0已经取消了这种用法,也不是很明白,跟着教程走的,后面的教程有讲解vue2.0的新特性,所以到后面完善吧。同时复习到了bootstrap的知识,之前知识稍微用过,现在才渐渐的明白这种css框架的内涵—赋class和角色role,bootstrap依赖于jQuery,所以库文件也要有jQuery的文件,而bootstrap.js主要提供各种组件,诸如模态框之类的。
注:不要弄混v-model和模态框的modal
##基本知识:
vue
v-model
v-for
v-on:xxx
v-show
bootstrap:
//class
.container(外部容器)
.fade(从上滑入)
.data-toggle和.data-target(处理模态框)
.text-muted(文本灰色)
//role
form
dialog
modal-dialog
##配置库文件
<!-- 引入bootstrap.min.css --><link rel="stylesheet" href="lib\bootstrap.min.css"><!-- 引入jquery --><script src="lib\jquery-3.3.1.min.js"></script><!-- 引入bootstrap.js --><script src="lib\bootstrap.js"></script><!-- 引入vue.js --><script src="lib\vue.js"></script>
##Script
<script>window.onload = function() {new Vue({el: '#box',// 注意这里面的内容为json,不要出现"="data: {myData: [],username: '',age: '',nowIndex: -100,deletemsg: '',},methods: {add: function() {this.myData.push({name: this.username,age: this.age,});this.username = '';this.age = '';},deleteMsg: function(n) {if (n == -1) {this.myData = ''; };this.myData.splice(n, 1);}},})}</script>
两个方法:add(),添加数据;deleteMsg(),删除数据
##html
<body><!-- 这里注意是class,container是控制全局居中在一个合适的位置 --><div class="container" id="box"><form role="form"><!-- 将标签和控件放在一个.form-group的<div>中,是获得最佳的间距所必需的 --><div class="form-group"><label for="username">用户名:</label><!-- bootstrap向所有的文本元素input、textarea、select添加.form-control --><input type="text" id="username" class="form-control" placeholder="请输入用户名" v-model="username"></div><div class="form-group"><label for="age">年龄:</label><input type="text" id="age" class="form-control" placeholder="请输入年龄" v-model="age"></div><div class="form-group"><!-- 这里注意是button,如果写submit每次都会刷新页面,数据一闪而过 --><input type="button" value="添加" class="btn btn-primary" v-on:click="add()"><input type="reset" value="重置" class="btn btn-danger"></div></form><hr><!-- .table-bordered边框 .table-hover移入效果--><table class="table table-bordered table-hover"><caption class="h3 text-info text-center">用户信息表</caption><tr class="text-danger"><th class="text-center">序号</th><th class="text-center">姓名</th><th class="text-center">年龄</th><th class="text-center">操作</th></tr><!-- 此处注意vue2.0中不支持{{$index}} --><tr class="text-center" v-for="(item, index) in myData"><td>{{index+1}}</td><td>{{item.name}}</td><td>{{item.age}}</td><td><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=index; deletemsg='确认删除吗?'"">删除</button></td></tr><tr v-show="myData.length != 0"><td colspan="4" class="text-right"><button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=-1"; deletemsg='确认删除全部吗?'">全部删除</button></td></tr><tr v-show="myData.length == 0"><td colspan="4" class="text-center text-muted"><p>暂无数据...</p></td></tr></table><!-- 对话层,即模态框 --><div role="dialog" class="modal fade bs-example-modal-sm" id="layer"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><!-- button放下面会出现错位 --><button type="button" class="close" data-dismiss="modal"><span>×</span></button><h4 class="modal-title">{{deletemsg}}</h4></div><hr><div class="modal-body text-right"><button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button><button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="deleteMsg(nowIndex)">确认</button></div></div></div></div></div>
</body>
##效果
Vue入门 ---- 简易留言板相关推荐
- vue生命周期,组件,slot替换,tab切换,简易留言板
data规范: data:(){ return{ arr:[{ a: "wan1", b: "在线", c: 5000},{ a: "wan2&quo ...
- java 留言板源码_jsp+servlet+javabean实现简易留言板(包含数据库文件)
[实例简介] jsp+servlet+javabean实现简易留言板(包含数据库文件) 简单体验MVC设计模式 jsp:视图,与用户打交道:servlet:控制器,请求分配转发,联系视图层与模型层:j ...
- javascript简易留言板制作 -- 案例
js简易留言板制作 @Draven 效果预览 html部分 css部分 js部分 效果预览 html部分 <textarea name="text" cols="3 ...
- html简单留言板教程,JS实现简易留言板(节点操作)
本文实例为大家分享了JS实现简易留言板的具体代码,供大家参考,具体内容如下 今天的案例主要是对节点进行操作 创建节点.添加节点.删除节点以及为节点添加内容的操作. 就是一个简单的留言板功能,可以发布留 ...
- js+css+html制作简易留言板
js+css+html制作简易留言板 1 案例说明 2 编写HTML代码 3 编写css代码 4 编写JavaScript代码 5 全部代码 1 案例说明 利用JavaScript.css以及html ...
- android中留言板功能,js 实现简易留言板功能
无标题文档 li{list-style:none;} li{position:relative;width:500px;} a{position:absolute;right:10px;} var c ...
- JavaWeb简易留言板 servlet+ajax+mysql
使用servlet+ajax将数据存入数据库实现简易留言板 先上图~~ 加载界面同时加载历史留言 发表留言 字数超出限制禁用按钮 发表留言成功~ 下面贴代码 message_board.html &l ...
- [练习]简易留言板制作
[练习]简易留言板制作
- php简易留言板功能,php实现简易留言板效果
首先是Index页面效果图 index.php date_default_timezone_set('PRC');$filename="msg.txt";$msgs=[];//检测 ...
最新文章
- 配置伪静态(URL重写)
- 阿里云Redis多线程性能提升思路解析
- python视频口碑佳_从万众期待到口碑扑街!用Python来分析一下大家对唐探3的评论...
- Habana Labs
- AAAI 2019 《LiveBot: Generating Live Video Comments Based on Visual and Textual Contexts》论文笔记
- [z]IE6各种不兼容问题
- Go语言生成区间随机数
- matlab 图像常用函数
- IIS 6.0曝远程代码执行漏洞 安全狗可拦截
- web的demo制造_基于Web的制造追溯系统DEMO
- 【PHP内核剖析】一、PHP基本架构
- 从零开始撸一个Fresco之gif和Webp动画
- qca9533 openwrt 启动信息
- php对联广告代码,网站漂浮对联广告代码
- 关于地理数据收集与处理的基本工具推荐(3)--最新30m的DEM与DSM数据免费下载
- Photoshop基础学习-修改图片文字
- 【题解】【AcWing】3374. 进制转换2
- Java、JSP反垃圾邮件管理系统
- flac如何转换成wav?
- .Net基础——程序集与CIL HttpClient封装方法 .Net Core 编码规范 C#中invoke和beginInvoke的使用 WebServeice 动态代理类...
热门文章
- java序列化错在哪里_Spark序列化错误:java.io.NotSerializableException
- mac抹掉磁盘重装系统未能与服务器取得联系_Mac重装系统不再难:苹果电脑重装系统教程...
- 线程等待通知 linux,Java 线程协作 wait(等待)与 notiy(通知)
- uos配置 java 环境变量_CentOS 7.3 环境配置java和tomcat开机启动
- mysql数据库里的表格_mysql数据库中表记录的玩法
- 如何安装mysql5.7.2_CentOS 7.2 安装MySQL 5.7
- 从客户端登陆服务器的配置文件,BLE模式和配置文件
- Java 格式化时间
- linux下阻塞的系统调用,Linux下文件的阻塞与非阻塞对部分系统调用的影响
- python线程安全的计数器_Python多线程同步Lock、RLock、Semaphore、Event实例