vue.js+boostrap項(xiàng)目實(shí)踐(案例詳解)

更新時(shí)間：2016年09月21日 10:37:11 作者：謝燦勇

這篇文章主要介紹了vue.js+boostrap項(xiàng)目實(shí)踐(案例詳解)的相關(guān)資料,本文圖文并茂介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下

一、為什么要寫(xiě)這篇文章

最近忙里偷閑學(xué)了一下vue.js，同時(shí)也復(fù)習(xí)了一下boostrap，發(fā)現(xiàn)這兩種東西如果同時(shí)運(yùn)用到一起，可以發(fā)揮很強(qiáng)大的作用，boostrap優(yōu)雅的樣式和豐富的組件使得頁(yè)面開(kāi)發(fā)變得更美觀和更容易，同時(shí)vue.js又是可以綁定model和view(這個(gè)相當(dāng)于MVC中的，M和V之間的關(guān)系)，使得對(duì)數(shù)據(jù)變換的操作變得更加的簡(jiǎn)易，簡(jiǎn)化了很多的邏輯代碼。

二、學(xué)習(xí)這篇文章需要具備的知識(shí)

1、需要有vue.js的知識(shí)

2、需要有一定的HTML、CSS、JavaScript的基礎(chǔ)知識(shí)

3、由于在項(xiàng)目中會(huì)加入一些juqery，所以還需要一定的基礎(chǔ)，但是這個(gè)能看懂就行了

4、boostrap的知識(shí)也是要的，但是這個(gè)我建議大致的看一下就行了，因?yàn)榈綍r(shí)候不懂就直接看手冊(cè)

三、開(kāi)始入門(mén)小項(xiàng)目

這個(gè)項(xiàng)目我們需要要達(dá)到的效果是，讓讀者明白vue.js在實(shí)際工作中是怎樣應(yīng)用的，同時(shí)，也算是第一個(gè)帶你將vue.js和boostrap相結(jié)合的開(kāi)端項(xiàng)目吧

廢話不多說(shuō)，下來(lái)看一下效果如何

PS:由于在博客園中的編輯器不允許嵌入JS文件所以沒(méi)法直接在這里給大家展示了

這個(gè)是使用boostrap來(lái)作為樣式，使用vue.js來(lái)與相關(guān)的按鈕進(jìn)行綁定的從而達(dá)到相應(yīng)的效果

HTML代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue導(dǎo)航菜單</title>
<link rel="stylesheet" >
<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>
<div v-on:click=makeActive("按鈕3") class="btn btn-info">按鈕3</div>
<br>
<p>當(dāng)前選擇的是:{{select}}</p>
</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>

這里面我們需要注意這些，

1、使用vue.js引入的時(shí)候要注意一下，vue.js的版本問(wèn)題，作者本人就是在這里被坑了好多天才發(fā)現(xiàn)和解決的

2、{{變量}}這樣的格式是表示在前端也就是view層要顯示的Model的地方

JavaScript代碼

window.onload=function(){
var demo=new Vue({
el:'#btngroup',
data:{
select:'按鈕1'
},
methods:{
makeActive:function(item){
this.select=item;
}
}
});
}

解析：

el: ---這個(gè)相當(dāng)于是一個(gè)大的作用域，也就是指定了最后的那個(gè)綁定的對(duì)象在id為btngroup元素的下面才會(huì)生效的，所到底也就是一個(gè)大的容器

data:這個(gè)是制定要綁定到前端的內(nèi)容，但是我們需要注意的是，只里面我們不止是可以存在一個(gè)鍵值對(duì)的，多個(gè)鍵值對(duì)也是可行的，也就是類似于

data:{
　　select:"按鈕1"，
　　test:1
}

這樣的也是可以接受的，但是如果你是想對(duì)這個(gè)test進(jìn)行更改了之后再進(jìn)行返回的話我們可以在Vue的作用域內(nèi)加上這樣的一句

demo.test=2

CSS代碼如下：

*{
margin:0px;
padding:0px;
font-family:'LiSu';
font-size:16px !important;
}

這里我們注意一下，我們使用的所有的例子都是公用一份CSS樣式表的，所以在下面我們將不會(huì)再次提及樣式的問(wèn)題，如果改動(dòng)樣式我們會(huì)直接寫(xiě)在HTML中。

這里我們我們所以下為什么要使用這個(gè)!important屬性，因?yàn)楫?dāng)你引入了boostrap的時(shí)候，會(huì)發(fā)現(xiàn)boostrap的屬性我們?cè)跇邮奖碇惺菬o(wú)法對(duì)其進(jìn)行替換的，除非你在行內(nèi)樣式中更改這個(gè)另當(dāng)別論，所以這個(gè)時(shí)候我們有3種解決方法

1、在boostrap中進(jìn)行勾選，因?yàn)閎oostrap是使用LESS的方法編譯而成的，所以支持用戶自定義boostrap的內(nèi)容

2、像我這樣在樣式中的屬性加上!important使其無(wú)法被boostrap中沖突的樣式覆蓋

3、直接在樣式表中改寫(xiě)

我比較推崇的是第一種做法，但是第二種做法感覺(jué)上也沒(méi)什么不好的，第三種做法不推薦這樣會(huì)不夠靈活和加大代碼的復(fù)雜度

第一個(gè)項(xiàng)目好了，我們可以狠搓這里預(yù)覽

四、進(jìn)階項(xiàng)目練習(xí)

上面的這個(gè)項(xiàng)目比較的簡(jiǎn)單，只能算是對(duì)vue.js的一個(gè)簡(jiǎn)單的應(yīng)用，下面我們會(huì)有一個(gè)新的項(xiàng)目，這個(gè)項(xiàng)目中涉及到一些雙想綁定的應(yīng)用，以及有些其他的方法，想在老司機(jī)就來(lái)開(kāi)車(chē)了，看客要記得在留言區(qū)打卡

GIF效果：

HTML代碼：

<meta charset="UTF-8">
<title>vue+boostrap最佳實(shí)踐2</title>
<link rel="stylesheet" >
<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="請(qǐng)輸入內(nèi)容">
</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>

注意事項(xiàng)：

1、在v-model綁定的時(shí)候，placeholder是不起作用的

2、v-model是用來(lái)做雙向綁定的，顧名思義就是在它可以改變model，同時(shí)也可以被model所改變

3、v-if后面的值如果返回的是false，那么整個(gè)v-if修飾Element也就存在，所以其下面的HTML代碼也就不會(huì)顯示

JavaScript代碼

window.onload=function(){
var demo=new Vue({
el:'#main',
data:{
inp:"請(qǐng)輸入",
status:false
},
methods:{
hide:function(){
this.status=false;
},
toggle:function(){
this.status=!this.status;
}
}
});
}

這個(gè)真心沒(méi)有什么可以說(shuō)的

看效果猛搓這里

五、實(shí)戰(zhàn)小項(xiàng)目帶你飛

1、模擬購(gòu)于車(chē)統(tǒng)計(jì)

購(gòu)物車(chē)這個(gè)相信大家都知道是什么東西而且怎么用吧，但是這個(gè)不知道大家有沒(méi)有想過(guò)就是購(gòu)物車(chē)在統(tǒng)計(jì)東西的總金額的時(shí)候，如果是使用傳統(tǒng)的方法來(lái)實(shí)現(xiàn)的話（也就是JavaScript來(lái)原生態(tài)實(shí)現(xiàn)），這個(gè)時(shí)候我們就需要定義一個(gè)方法，用來(lái)獲取當(dāng)前的物品的數(shù)量以及每個(gè)數(shù)量的金額，但是如果物品多的話，這個(gè)對(duì)于整個(gè)邏輯上來(lái)實(shí)現(xiàn)是非常困難的，很容易出現(xiàn)錯(cuò)誤。所以這個(gè)時(shí)候使用vue.js是極好，通過(guò)對(duì)model的改變從而到達(dá)model中的值也就是最終的總金額

效果展示：

這個(gè)例子如果你有認(rèn)真學(xué)習(xí)的話，你基本上差不多也就掌握了vue.js 的基礎(chǔ)應(yīng)用，里面涉及到的vue.js中的語(yǔ)法比較綜合，如果還不熟悉的話，請(qǐng)看官方文檔

HTML代碼：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue+boostrap最佳實(shí)踐3</title>
<link rel="stylesheet" >
<link rel="stylesheet" href="../style.css">
<style>
.color{
background:#E35885;
}
</style>
</head>
<body>
<div style="width:500px;margin-top: 20px;margin-left: 20px;" id="main">
<a href="#" v-on:click="change" class="list-group-item active">商品總金額: {{total}}
<div></div>
</a>
<template v-if="ok">
<div v-for="food in foods">
<a href="#" v-bind:class="{'color':food.isClick}" class="list-group-item" v-on:click="UpdateTotal(food)">{{food.name}}
<span style="float:right" class="label label-default">￥{{*food.price}}</span>
</a>
</div>
</template>
</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代碼

window.onload=function(){
//alert(1);
var data={ok:1,total:0,foods:[
{
name:'蘋(píng)果',
status:false,
price:15,
isClick:false
},
{
name:'梨子',
status:false,
price:10,
isClick:false
},
{
name:'殷桃',
status:false,
price:22,
isClick:false
},
{
name:'西瓜',
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;
}
}
});
}

其中還有一個(gè)bug沒(méi)法解決，就是在點(diǎn)擊之后才會(huì)對(duì)點(diǎn)擊的元素添加上類，這個(gè)與我要實(shí)現(xiàn)的點(diǎn)擊的同時(shí)會(huì)添加類這個(gè)有所沖突，知道的希望大家在后面踴躍留言

預(yù)覽地址

2、搜索引擎模擬

搜索引擎模擬這里所得有點(diǎn)大了，事實(shí)上真正的搜索是不可能通過(guò)前端就實(shí)現(xiàn)的，這個(gè)大家都知道因?yàn)楹芏鄸|西都要用后端去抓取，但是小編是在一個(gè)小城市工作的，所以也見(jiàn)過(guò)一些制作得比較差的，APP商業(yè)項(xiàng)目，舉個(gè)例子來(lái)說(shuō)，就像你使用百度外賣(mài)的手動(dòng)獲取地理位置的時(shí)候，你如果輸入一部分相關(guān)的內(nèi)容之后會(huì)自動(dòng)篩選相應(yīng)的內(nèi)容列出來(lái)，這個(gè)的詳細(xì)的用法可以在各大手機(jī)外賣(mài)APP上面看到這里我就不截圖了，但是我發(fā)現(xiàn)我這邊的APP是沒(méi)有這個(gè)功能的，所以用戶體驗(yàn)感覺(jué)很是不好。所以在這里我就想嘗試一下應(yīng)用vue.js+boostrap來(lái)實(shí)現(xiàn)這個(gè)效果，希望各位大神多多指教

展示一下效果：

HTML代碼：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue+boostrap最佳實(shí)踐4</title>
<link rel="stylesheet" >
<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="請(qǐng)輸入標(biāo)題名稱">
<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>

這一次為了讀者能夠更清楚的理解每個(gè)的意義，我將注釋都寫(xiě)在代碼中這樣讀者就能夠更方便的理解

javascript代碼

window.onload=function(){
var data={
searchString:"",
msgs:[
{
title:'the best technology is the most basic',
author:'謝燦勇'
},
{
title:'hijacking the javascript function',
author:'謝燦勇'
},
{
title:'use karma to test multiple broswer',
author:"司徒正美"
}
]};
//定義一個(gè)自定的過(guò)濾器叫做searchFor,傳遞一個(gè)過(guò)濾參數(shù)searchString
//第一個(gè)參數(shù)指的是要過(guò)濾的數(shù)據(jù)源data
Vue.filter("searchFor",function(value,searchString){
//判斷傳入的內(nèi)容是否為空
if(!searchString){
//將要過(guò)濾的對(duì)象全部返回，也就是是相當(dāng)于什么都沒(méi)有操作一樣
//程序也在這個(gè)地方終止不會(huì)繼續(xù)向下走
return value;
}
//將輸入的內(nèi)容統(tǒng)一為小寫(xiě)或者大寫(xiě)
seearchString=searchString.trim().toLowerCase();
var result=[];
//item指代當(dāng)前數(shù)據(jù)
result=value.filter(function(item){
//查詢的內(nèi)容不存在
if(item.title.toLowerCase().indexOf(searchString) !== -1){
return item;
}
});
return result;
});
var demo=new Vue({
el:'#main',
data:data,
})
}

以上所述是小編給大家介紹的vue.js+boostrap項(xiàng)目實(shí)踐(案例詳解)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: