html5 vue bootstrap学习报告

标签: vue
6人阅读 评论(0) 收藏 举报
分类:

html5 vue bootstrap学习报告

由于之前学过html,所以html5很快就看完了,另外vue和bootstrap都看了一部分,了解了一些基本操作。

学习成果是一个简单的登录框
登录框

上面两个输入框使用了html5中<input>标签的一个新属性placeholder.
效果就是数据框中默认出现的UsernamePassword,可以提示用户上面的框应该输入用户名,下面的框应该输入密码。
在我知道placeholder之前,为了实现这样的效果,我花了挺大的功夫去给这个输入框写js逻辑,然而最终结果也不是很理想。所以看到placeholder就有种相见恨晚的感觉。

输入框,按钮的样式都是使用bootstrap提供的class。我使用了bootstrap提供的网格系统来控制输入框的宽度。网格系统使得界面中各元素的大小有章可循,能在一定程度上避免混乱。另外bootstrap还提供了各种元素的样式,比如"form-control input-group btn btn-default",只要在写到class中就能使用bootstrap提供的样式。
网格系统

最后我用vue为这个登录框写了一个简单的逻辑,只有一个要求,用户名密码不能为空。vue有一个很方便的特性,所有东西都是响应式的,

<div class="form-group container" id = "loginBox">
    <div class="col-sm-3 input-group">
        <input type="text" name="username" placeholder="Username" class="form-control" v-model="username">
    </div>
</div>
var app = new Vue({
  el: '#loginBox',
  data: {
    username: ''
  }
})

这样当我在input中输入用户名后,app.username的值也会跟着改变这里写图片描述
所以为了检查用户名,只要在submit按钮上设置一个监听器v-on:click,当按钮按下后调用一个检查用户名的函数,检查通过后再提交表单。

通过普通的js与jquery也能完成同样的功能,但是用vue实现的代码看起来就优雅了很多。

这篇博客记录了我在初步学习bootstrap vue html5后,使用部分功能实现的一个简单登录框,更复杂的应用有待进一步的学习,接下来的计划是学习Nuxt.js和bootstrap-vue,目前还不清楚这两个东西具体有什么作用,先看看再说。。

查看评论

bootstrap实践学习总结(一)

1、导航中左右两块内容,左边logo,右边用户信息等 类如上图,css定义如下: 左侧:.logo      右侧:.navbar .main-header .logo{ float:left; ...
  • comeonstone
  • comeonstone
  • 2015年10月15日 11:57
  • 1405

前端学习总结(一)HTML5基础

html5总结
  • haoshidai
  • haoshidai
  • 2016年02月20日 14:27
  • 1790

HTML5入门学习总结

这两天了解学习了一下HTML5的一些特性,做一些简单的知识总结HTML5的设计 吸取了XHTML2的教训,HTML5的设计有一个主要的原则就是“支持已有的内容”,对于HTML5来说,并不存在创立的起始...
  • ST_Pace
  • ST_Pace
  • 2017年05月10日 21:59
  • 651

vue-cli快速构建项目以及引入bootstrap、jq

vue-cli快速构建项目以及引入boostrap、jq各种插件配置;
  • tanhao_282700
  • tanhao_282700
  • 2017年04月03日 01:41
  • 24829

HTML5 -- 网页框架bootstrap的简单使用

直接百度bootstrap可以搜到bootstrap中文网站,然后最好建议选择下载源码。下载完成后,将dist/css/bootstrap.min.css复制到项目的根目录下。具体的模块介绍和使用在中...
  • RedGuy_anluo
  • RedGuy_anluo
  • 2016年05月09日 18:42
  • 5268

vue引入bootstrap——webpack

vue引入bootstrap——webpack 想要在vue中引入bootstrap,引入的时候需要按照如下的步骤进行。 1、引入jquery 2、引入bootstrap 阅读本文前,...
  • wild46cat
  • wild46cat
  • 2017年08月29日 07:30
  • 10266

用 Vue 改造 Bootstrap,渐进提升项目框架

GitChat 作者:Meathill 关注微信公众号:「GitChat 技术杂谈」 一本正经的讲技术 Vue 横空出世,以迅雷不及掩耳之势横扫前端界,俨然有当年 jQuery 之势。我认为 V...
  • GitChat
  • GitChat
  • 2017年09月25日 16:43
  • 7073

Vue bootstrap的简单结合应用

这是一个VUE 框架一个小的应用,自己通过引用库很好的写出一个美观的框架。...
  • sunnyboysix
  • sunnyboysix
  • 2017年08月02日 11:45
  • 689

vue +bootstrap 写的小例子

vue和angular非常像都是MVVM。道理都是想通的,就是语法的差异 我觉得vue和angular区别: 1.vue更轻,更便捷,适用于移动开发 2.vue更简单。。 angular和vu...
  • u011537073
  • u011537073
  • 2017年06月08日 20:03
  • 1268

vue中引入bootstrap

Vue引入bootstrap主要有两种方法 方法一:在main.js中引入,此方法导入的bootstrap中对于html,body的一些预设置的css样式可能无效。 一。引入jQuery 在当前项目的...
  • qq_37055675
  • qq_37055675
  • 2017年06月25日 23:34
  • 5828
    个人资料
    持之以恒
    等级:
    访问量: 2万+
    积分: 390
    排名: 19万+