Vue.js+boostrap Project Practice (detailed case) _javascript skills

Why should I write this article?

Recently learned a bit of vue.js, but also review the boostrap, found that these two things if applied together, can play a very powerful role, boostrap elegant style and rich components make the page development becomes more beautiful and easier, while vue.js can be bound model and view (This corresponds to the relationship between M and V in MVC), making it easier to manipulate data transformations, simplifying a lot of logical code.

Second, learn this article need to have the knowledge

1, need to have vue.js knowledge

2, need to have some basic knowledge of HTML, CSS, JavaScript

3, because in the project will add some juqery, so still need a certain basis, but this can understand on the line

4, Boostrap knowledge is also wanted, but this I suggest a general look at the line, because the time does not understand directly to see the manual

Iii. Getting Started small project

The effect that we need to achieve in this project is to let the reader understand how vue.js is applied in practical work and, at the same time, to be the first project to bring you vue.js and boostrap together.

Don't say much nonsense, come down and see how it works.

PS: Because the editor in the blog Park is not allowed to embed JS files, so it is not directly here to show you

This is done using boostrap as a style, using vue.js to bind to related buttons to achieve the corresponding effect

The HTML code is as follows:

<!
DOCTYPE html>  

We need to pay attention to this,

1, the use of vue.js to introduce the time to pay attention to, vue.js version of the problem, the author himself is here a lot of genius found and resolved

2, {{variable}} This format is to represent the front end is the view layer to show the model of the place

JavaScript code

Window.onload=function () {
var demo=new Vue ({
el: ' #btngroup ',
data:{
Select: ' button 1 '
},
methods:{
makeactive:function (item) {
This.select=item}}}
);

Analytical:

EL:---This is the equivalent of a large scope, which specifies that the last bound object will take effect under the ID btngroup element, which is a large container

Data: This is to bind to the front end of the content, but we need to note that only inside we can not only have a key-value pair, multiple key value pairs is also feasible, that is, similar to

data:{
Select: "Button 1",
test:1

This is also acceptable, but if you want to make a change to this test and then return it, we can add a sentence in the scope of Vue

The CSS code is as follows:

*{
margin:0px;
padding:0px;
font-family: ' Lisu ';
FONT-SIZE:16PX!important;
}

Here we note that all of the examples we use are common to a CSS stylesheet, so below we will not mention the problem of style again, if we change the style we will write directly in HTML.

Here's why we want to use this!important attribute, because when you introduce Boostrap, you'll find that the Boostrap attribute is not replaceable in the stylesheet unless you change it in the inline style. So this time we have 3 ways to solve this problem.

1, in the Boostrap check, because the Boostrap is compiled using the less method, so support the user to customize Boostrap content

2, like me in the style of the property plus!important so that it can not be overridden by the conflicting styles in Boostrap

3, directly in the style sheet rewrite

I prefer the first approach, but the second approach does not feel good, and the third does not recommend it will be inflexible and increase the complexity of the code.

The first project okay we can rub this here preview

Iv. Advanced Project Practice

The above project is relatively simple, can only be regarded as a simple application of vue.js, we will have a new project, this project involves a number of dual-want to bind the application, as well as some other methods, want to be in the old driver to drive, spectators to remember in the message area clock

GIF effect:

HTML code:

<meta charset= "UTF-8" > <title>vue+boostrap best Practices 2</title> <link rel= "stylesheet" href= Cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css "> <link rel=" stylesheet "href=". /style.css ">  

Precautions:

1, when the V-model binding, placeholder is not working

2, V-model is used to do two-way binding, as the name implies is in it can change model, but also can be model changes

3, v-if after the value if the return is false, then the entire v-if modifier element exists, so the following HTML code will not show

JavaScript code

Window.onload=function () {
var demo=new Vue ({
el: ' #main ',
data:{
inp: "Please enter",
status:false
},
methods:{
hide:function () {
this.status=false;
},
toggle:function () {
This.status=!this.status
}}
}
);

There's nothing to say about this heart.

Look at the effect of rubbing here

Five, the actual combat small project takes you to fly

1, simulation of car statistics

Shopping cart This is something that everyone knows and how to use it, but this does not know whether you have thought that is the shopping cart in the total amount of statistics, if the use of traditional methods to achieve the words (that is, JavaScript to the original ecological implementation), this time we need to define a method, Used to get the number of current items and the amount of each amount, but if there are more items, this is very difficult for the entire logic, it is easy to make mistakes. So this time to use Vue.js is excellent, through the model changes to reach the model in the value is the final total amount

Effect Display:

This example if you have a serious study, you basically have mastered the basic application of vue.js, which involved in the Vue.js grammar is relatively comprehensive, if not familiar with the words, please see the Official document

HTML code:

<! DOCTYPE html>  

JavaScript code

Window.onload=function () {
//alert (1);
var data={ok:1,total:0,foods:[
{
name: ' Apple ',
status:false,
price:15,
isclick:false
},
{
name: ' Pears ',
status:false,
price:10,
isclick:false
},
{
name: ' Sindo ',
Status:false,
price:22,
isclick:false
},
{
name: ' Watermelon ',
status:false,
Price:13,
Isclick:false
}
]};
var demo=new Vue ({
el: ' #main ',
data:data,
methods:{
change:function () {
This.ok=!this.ok ;
},
updatetotal:function (food) {
if (food.status==true) {
food.price=-math.abs (food.price);
} else{
Food.price=math.abs (food.price);
}
Data.total+=food.price;
Food.status=!food.status;
Food.isclick=!food.isclick
}}
}
);

One of the bugs can not be solved, that is, after clicking on the click of the elements to add the class, this and I want to implement the click of the same time will add class this conflict, know hope everyone in the back enthusiastically message

Preview Address

2. Search Engine Simulation

Search engine simulation Here is a bit big, in fact, the real search is impossible to achieve through the front-end, which we all know because a lot of things to use the back end to crawl, but small series is in a small city work, so also saw some poorly produced, app Business Project, for example, Just like when you use the manual location of Baidu Takeout, if you enter a part of the relevant content will automatically filter the corresponding content listed, this detailed usage can be in the big mobile phone out of the app to see here I will not screenshot, but I found that my side of the app is not this function, So the user experience feels very bad. So here I would like to try the application of vue.js+boostrap to achieve this effect, I hope that the great God to teach you a lot

Show the effect:

HTML code:

<! DOCTYPE html>  

This time in order for the reader to understand each meaning more clearly, I write the comments in the code so that the reader can easily understand

JavaScript code

Window.onload=function () {
var data={
searchstring: "",
msgs:[
{
title: ' The best technology is The most basic ',
Author: ' Shei Chanyong '
},
{
title: ' Hijacking the JavaScript function ',
Author: ' Shei Chanyong '
{
title: ' Use Karma to test multiple broswer ',
Author: ' Masaki '
}
]};
Define a custom filter called Searchfor, passing a filter parameter searchstring
//The first parameter refers to the data source to be filtered
("Searchfor", function ( value,searchstring) {
//To determine if the incoming content is empty
if (!searchstring) {
//the object to be filtered returns, that is, the equivalent of nothing operation
// The program also terminates in this place will not continue to go down return
value;
}
Unify the input into lowercase or uppercase
Seearchstring=searchstring.trim (). toLowerCase ();
var result=[];
Item refers
to the current data Result=value.filter (function (item) {
//query content does not exist
if (Item.title.toLowerCase ()). indexOf (searchstring)!==-1) {return
item;
}
});
return result;
});
var demo=new Vue ({
el: ' #main ',
data:data,
})
}

The above is a small set to introduce the VUE.JS+BOOSTRAP project practice (detailed case), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!