html5 vue bootstrap学习报告

版权声明:本文为博主原创文章,转载请注明出处 https://blog.csdn.net/SGAFPZys/article/details/79950567

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,目前还不清楚这两个东西具体有什么作用,先看看再说。。

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页