HTML5 Vue Bootstrap Study report

HTML5 Vue Bootstrap study report

Because of the previous study of HTML, so HTML5 soon finished, and Vue and Bootstrap have seen a part of some basic operations.

Learning achievement is a simple login box

The above two input boxes use a new property placeholder for the <input> tag in HTML5.
The effect is the default in the Data box username and password, you can prompt the user above the box should enter the user name, the following box should enter a password.
Before I know placeholder, in order to achieve this effect, I spent a lot of time to write the input box JS logic, but the end result is not very ideal. So see placeholder have a kind of encounter feeling.

Input box, the style of the button is the class provided using Bootstrap. I used the grid system provided by bootstrap to control the width of the input box. Grid system makes the elements in the interface of the size of the rule-based, to some extent to avoid confusion. In addition, Bootstrap also provides styles for various elements, such as "Form-control Input-group btn Btn-default", which can be used in the style provided by Bootstrap as long as it is written to class.

Finally, I used Vue to write a simple logic for this login box, only one request, the username password can not be empty. Vue has a very handy feature, and everything is responsive,

<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: '
  }
})

So when I enter the username in input, the value of App.username will change.
So in order to check the username, just set a listener V-on:click on the submit button, call a function to check the user name when the button is pressed, and then submit the form after checking it.

The same functionality can be done with common JS and jquery, but the code implemented with Vue looks a lot more elegant.

This blog recorded my initial learning bootstrap vue HTML5, using a part of the function to achieve a simple login box, more complex applications to be further study, The next plan is to learn nuxt.js and Bootstrap-vue, it is not clear what the effect of these two things, first look at what to say.