First, why write this article
Chill recently learned about vue.js, also brushed up boostrap, find these two things together if both apply, can play a very powerful role, boostrap elegant style and rich component enables page developers to become more beautiful and more easily, but also can bind at the same time vue.js model and view (the relation between M and V MVC is equivalent), so that the operation of the transformed data to become more simple, much simplified logic code .
Second, the study need to have knowledge of this article
1, need to have knowledge vue.js
2, need to have some basic knowledge of HTML, CSS, JavaScript's
3, since the project will add some juqery, so it will take some foundation, but this can be read on the line
4, knowledge boostrap also want, but I recommend this rough look on the line, because you do not know when to look at the manual directly
Third, get started small projects
This project we need to achieve the effect is to make the reader understand vue.js in practice is how to apply, as well, can be considered the beginning of the project first take you to combine vue.js and boostrap it
Ado, take a look at how effective
PS: As the editor in the blog does not allow the garden so I can not embed JS file directly here to show you
This pattern is used as boostrap used to bind vue.js button associated with the corresponding effect so as to achieve
HTML code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue导航菜单</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div v-on:click.prevent id="btngroup" style="margin-left: 20px;margin-top: 20px" class="btn-group">
<div v-on:click=makeActive("按钮1") class="btn btn-primary">按钮1</div>
<div v-on:click=makeActive("按钮2") class="btn btn-success">按钮2</div>
<P> is currently selected: {{select}} </
<br>
button. 3 </ div>button 3") class = "btn btn<div v-on: click =
</ div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="../vue.js"></script>
</body>
</html>
That which we need to pay attention to these,
1, vue.js introduced in time to take note, vue.js version of the problem, the author is here in the tank a lot of talent to find and solve the
2, the variable {{}} where the format is a front end view of the Model layer is to be displayed
JavaScript code
window.onload=function(){
var demo=new Vue({
el:'#btngroup',
data:{
select:'按钮1'
},
methods:{
makeActive:function(item){
this.select=item;
}
}
});
}
Resolution:
el: --- This is the equivalent of a large scope, which is the last of the specified object binding in the id of the element below btngroup to take effect, as in the end is a large container
data: The content is developed to bind to the front, but we need to note is that we not only can only exist inside a key-value pair, a plurality of key-value pairs are possible, which is similar to the
Data: {
SELECT: "button. 1",
Test:. 1
}
This is also acceptable, but if you want to make changes after this test then return, then we can add this sentence in the scope of Vue
demo.test=2
CSS code is as follows:
*{
margin:0px;
padding:0px;
font-family:'LiSu';
font-size:16px !important;
}
Here we note that all the examples we use are common to a CSS style sheet, so below we will not mention the issue of style again, if we change the style will be directly written in HTML.
So we here at why we use the! Important attribute, because when you introduce a boostrap time, you will find the property boostrap we can not be replaced in the stylesheet, unless you change the style within the line when another different matter, so this time we have three kinds of solutions
1, the check in boostrap because boostrap using LESS compiled from the method, the support for custom content boostrap
2, like me, in the style of the property plus! Important that it can not be overwritten style conflict boostrap
3, direct overwrite in a stylesheet
I am more respected is the first approach, but feel there's nothing wrong in the second approach, the third approach would not recommend this enough flexible and increasing code complexity
The first project well, we can rub here ruthless Preview
Fourth, the project advanced practice
The above project is relatively simple, can only be regarded as a simple application of vue.js, here we have a new project, which involved some applications want to double binding, as well as some other methods, like in the old driver came by car, and spectators to remember punch in the message area
GIF effect:
HTML code:
<meta charset="UTF-8">
<title>vue+boostrap最佳实践2</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="../style.css">
</head>
<body>
<div id="main">
<div v-if="status" style="margin-top: 10px;margin-left: 10px;width:400px" class="input-group">
<div class="input-group-addon">输入框</div>
<input v-model="inp" type="text" class="form-control"
placeholder="请输入内容">
</div>
<div style="margin-top: 15px;margin-left: 150px"class="btn btn-default" type="button">
<div v-on:click="toggle()" class=" glyphicon glyphicon-search">{{inp}}</div>
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="../vue.js"></script>
</body>
</html>
Precautions:
1, when the v-model binding, is ineffective placeholder
2, v-model is used to make two-way binding, that is, as the name suggests it can change model, but can also be altered by model
3, the value of v-if the latter is returned if false, then the entire Element modified v-if it exists, so the following HTML code will not appear
JavaScript code
window.onload=function(){
var demo=new Vue({
el:'#main',
data:{
inp:"请输入",
status:false
},
methods:{
hide:function(){
this.status=false;
},
toggle:function(){
this.status=!this.status;
}
}
});
}
This really is not anything to say
Look at the effect of fierce twist here
Fifth, real small projects with you fly
1, analog purchased vehicle statistics
Cart I believe we all know what it is and how to use it, but this do not know if you have ever thought that cart, when the total amount of statistical thing, if it is to achieve using traditional methods, then (ie JavaScript to the original ecological realization), this time we need to define a method for obtaining the number and amount of each of the current number of items, but if the articles and more, up to achieve this for the whole logic is very difficult, error prone . So this is an excellent time to use vue.js, by changing the value of the model so as to reach the final model of which is the total amount
Show results:
This example if you have to study hard, you basically almost vue.js also mastered the basic application, which vue.js involved in the syntax more integrated, if not familiar with the case, see the official documents
HTML code:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>vue+boostrap最佳实践3</title>
6 <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
7 <link rel="stylesheet" href="../style.css">
8 <style>
9 .color{
10 background:#E35885;
11 }
12 </style>
13 </head>
14 <body>
15 <div style="width:500px;margin-top: 20px;margin-left: 20px;" id="main">
16 <a href="#" v-on:click="change "class =" list-group -item active "> Product Total Amount: Total {{}}
18 is </a>
. 17 <div> </ div>
19 <template v-if="ok">
20 <div v-for="food in foods">
21 <a href="#" v-bind:class="{'color':food.isClick}" class="list-group-item" v-on:click="UpdateTotal(food)">{{food.name}}
22 <span style="float:right" class="label label-default">￥{{*food.price}}</span>
23 </a>
24 </div>
25 </template>
26 </div>
27 <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
28 <script src="script.js"></script>
29 <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
30 <script src="../vue.js"></script>
31
32 </body>
33 </html>
JavaScript代码
1 window.onload=function(){
2 //alert(1);
3 var data={ok:1,total:0,foods:[
4 {
5 name:'苹果',
6 status:false,
7 price:15,
8 isClick:false
9 },
10 {
11 name:'梨子',
12 status:false,
13 price:10,
14 isClick:false
15 },
16 {
17 name:'殷桃',
18 status:false,
19 price:22,
20 isClick:false
21 },
22 {
23 name:'西瓜',
24 status:false,
25 price:13,
26 isClick:false
27 }
28 ]};
29 var demo=new Vue({
30 el:'#main',
31 data:data,
32 methods:{
33 change:function(){
34 this.ok=!this.ok;
35 },
36 UpdateTotal:function(food){
37 if(food.status==true){
38 food.price=-Math.abs(food.price);
39 }else{
40 food.price=Math.abs(food.price);
41 }
42 data.total+=food.price;
43 food.status=!food.status;
44 food.isClick=!food.isClick;
45 }
46 }
47 });
48 }
其中还有一个bug没法解决，就是在点击之后才会对点击的元素添加上类，这个与我要实现的点击的同时会添加类这个有所冲突，知道的希望大家在后面踊跃留言
预览地址
2、搜索引擎模拟
搜索引擎模拟这里所得有点大了，事实上真正的搜索是不可能通过前端就实现的，这个大家都知道因为很多东西都要用后端去抓取，但是小编是在一个小城市工作的，所以也见过一些制作得比较差的，APP商业项目，举个例子来说，就像你使用百度外卖的手动获取地理位置的时候，你如果输入一部分相关的内容之后会自动筛选相应的内容列出来，这个的详细的用法可以在各大手机外卖APP上面看到这里我就不截图了，但是我发现我这边的APP是没有这个功能的，所以用户体验感觉很是不好。所以在这里我就想尝试一下应用vue.js+boostrap来实现这个效果，希望各位大神多多指教
展示一下效果：
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue+boostrap最佳实践4</title>
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="../style.css">
</head>
<body>
<div style="margin-left: 100px;margin-top: 100px;width:600px" id="main">
<div class="input-group">
<input v-model="searchString" type="text" class="form-control" placeholder="请输入标题名称">
<div class="input-group-addon">搜索</div>
</div>
<ul class="list-group">
<template v-for="msg in msgs|searchFor searchString">
<li class="list-group-item">
<span>{{msg.title}}</span>
<span style="margin-left:10px">{{msg.author}}</span>
</li>
</template>
</ul>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="script.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="../vue.js"></script>
</body>
</html>
这一次为了读者能够更清楚的理解每个的意义，我将注释都写在代码中这样读者就能够更方便的理解
javascript代码
1 window.onload=function(){
2 var data={
3 searchString:"",
4 msgs:[
5 {
6 title:'the best technology is the most basic',
7 author:'谢灿勇'
8 },
9 {
10 title:'hijacking the javascript function',
11 author:'谢灿勇'
12 },
13 {
14 title:'use karma to test multiple broswer',
15 author:"司徒正美"
16 }
17 ]};
18 //定义一个自定的过滤器叫做searchFor,传递一个过滤参数searchString
19 //第一个参数指的是要过滤的数据源data
20 Vue.filter("searchFor",function(value,searchString){
21 //判断传入的内容是否为空
22 if(!searchString){
23 //将要过滤的对象全部返回，也就是是相当于什么都没有操作一样
24 //程序也在这个地方终止不会继续向下走
25 return value;
26 }
27 //将输入的内容统一为小写或者大写
28 seearchString=searchString.trim().toLowerCase();
29 var result=[];
30 //item指代当前数据
31 result=value.filter(function(item){
32 //查询的内容不存在
33 if(item.title.toLowerCase().indexOf(searchString) !== -1){
34 return item;
35 }
36 });
37 return result;
38 });
39 was demon = new Vue ({
40 etc: '# main',
41 data: data,
42
43})
44}
To explain the contents are generally in the comment above, if you still do not understand, then you can go to ask questions in the comments
VI Summary
Short article, although not able to fully show the charm of boostrap and vue.js, but if you are serious about learning, I believe that you will be able to gain a lot in there, if you want to learn more about boostrap, you can I found the article to learn article on boostrap there, but I have not yet prepared the source you download the address , and finally say, this is my original work, please indicate the source reprinted