html5 vue bootstrap学习报告

html5 vue bootstrap学习报告

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

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

上面两个输入框使用了html5中<input>标签的一个新属性placeholder.
效果就是数据框中默认出现的Username和Password，可以提示用户上面的框应该输入用户名，下面的框应该输入密码。
在我知道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，目前还不清楚这两个东西具体有什么作用，先看看再说。。