vue.js+boostrap項目實踐(案例詳解)
一、為什么要寫這篇文章
最近忙里偷閑學了一下vue.js，同時也復習了一下boostrap，發(fā)現(xiàn)這兩種東西如果同時運用到一起，可以發(fā)揮很強大的作用，boostrap優(yōu)雅的樣式和豐富的組件使得頁面開發(fā)變得更美觀和更容易，同時vue.js又是可以綁定model和view(這個相當于MVC中的，M和V之間的關(guān)系)，使得對數(shù)據(jù)變換的操作變得更加的簡易，簡化了很多的邏輯代碼。
二、學習這篇文章需要具備的知識
1、需要有vue.js的知識
2、需要有一定的HTML、CSS、JavaScript的基礎(chǔ)知識
3、由于在項目中會加入一些juqery，所以還需要一定的基礎(chǔ)，但是這個能看懂就行了
4、boostrap的知識也是要的，但是這個我建議大致的看一下就行了，因為到時候不懂就直接看手冊
三、開始入門小項目
這個項目我們需要要達到的效果是，讓讀者明白vue.js在實際工作中是怎樣應用的，同時，也算是第一個帶你將vue.js和boostrap相結(jié)合的開端項目吧
廢話不多說，下來看一下效果如何
PS:由于在博客園中的編輯器不允許嵌入JS文件所以沒法直接在這里給大家展示了
這個是使用boostrap來作為樣式，使用vue.js來與相關(guān)的按鈕進行綁定的從而達到相應的效果
HTML代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue導航菜單</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>當前選擇的是:{{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引入的時候要注意一下，vue.js的版本問題，作者本人就是在這里被坑了好多天才發(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: ---這個相當于是一個大的作用域，也就是指定了最后的那個綁定的對象在id為btngroup元素的下面才會生效的，所到底也就是一個大的容器
data:這個是制定要綁定到前端的內(nèi)容，但是我們需要注意的是，只里面我們不止是可以存在一個鍵值對的，多個鍵值對也是可行的，也就是類似于
data:{
select:"按鈕1"，
test:1
}
這樣的也是可以接受的，但是如果你是想對這個test進行更改了之后再進行返回的話我們可以在Vue的作用域內(nèi)加上這樣的一句
demo.test=2
CSS代碼如下：
*{
margin:0px;
padding:0px;
font-family:'LiSu';
font-size:16px !important;
}
這里我們注意一下，我們使用的所有的例子都是公用一份CSS樣式表的，所以在下面我們將不會再次提及樣式的問題，如果改動樣式我們會直接寫在HTML中。
這里我們我們所以下為什么要使用這個!important屬性，因為當你引入了boostrap的時候，會發(fā)現(xiàn)boostrap的屬性我們在樣式表中是無法對其進行替換的，除非你在行內(nèi)樣式中更改這個另當別論，所以這個時候我們有3種解決方法
1、在boostrap中進行勾選，因為boostrap是使用LESS的方法編譯而成的，所以支持用戶自定義boostrap的內(nèi)容
2、像我這樣在樣式中的屬性加上!important使其無法被boostrap中沖突的樣式覆蓋
3、直接在樣式表中改寫
我比較推崇的是第一種做法，但是第二種做法感覺上也沒什么不好的，第三種做法不推薦這樣會不夠靈活和加大代碼的復雜度
第一個項目好了，我們可以狠搓這里預覽
四、進階項目練習
上面的這個項目比較的簡單，只能算是對vue.js的一個簡單的應用，下面我們會有一個新的項目，這個項目中涉及到一些雙想綁定的應用，以及有些其他的方法，想在老司機就來開車了，看客要記得在留言區(qū)打卡
GIF效果：
HTML代碼：
<meta charset="UTF-8">
<title>vue+boostrap最佳實踐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="請輸入內(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>
注意事項：
1、在v-model綁定的時候，placeholder是不起作用的
2、v-model是用來做雙向綁定的，顧名思義就是在它可以改變model，同時也可以被model所改變
3、v-if后面的值如果返回的是false，那么整個v-if修飾Element也就存在，所以其下面的HTML代碼也就不會顯示
JavaScript代碼
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;
}
}
});
}
這個真心沒有什么可以說的
看效果猛搓這里
五、實戰(zhàn)小項目帶你飛
1、模擬購于車統(tǒng)計
購物車這個相信大家都知道是什么東西而且怎么用吧，但是這個不知道大家有沒有想過就是購物車在統(tǒng)計東西的總金額的時候，如果是使用傳統(tǒng)的方法來實現(xiàn)的話（也就是JavaScript來原生態(tài)實現(xiàn)），這個時候我們就需要定義一個方法，用來獲取當前的物品的數(shù)量以及每個數(shù)量的金額，但是如果物品多的話，這個對于整個邏輯上來實現(xiàn)是非常困難的，很容易出現(xiàn)錯誤。所以這個時候使用vue.js是極好，通過對model的改變從而到達model中的值也就是最終的總金額
效果展示：
這個例子如果你有認真學習的話，你基本上差不多也就掌握了vue.js 的基礎(chǔ)應用，里面涉及到的vue.js中的語法比較綜合，如果還不熟悉的話，請看官方文檔
HTML代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue+boostrap最佳實踐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:'蘋果',
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;
}
}
});
}
其中還有一個bug沒法解決，就是在點擊之后才會對點擊的元素添加上類，這個與我要實現(xiàn)的點擊的同時會添加類這個有所沖突，知道的希望大家在后面踴躍留言
2、搜索引擎模擬
搜索引擎模擬這里所得有點大了，事實上真正的搜索是不可能通過前端就實現(xiàn)的，這個大家都知道因為很多東西都要用后端去抓取，但是小編是在一個小城市工作的，所以也見過一些制作得比較差的，APP商業(yè)項目，舉個例子來說，就像你使用百度外賣的手動獲取地理位置的時候，你如果輸入一部分相關(guān)的內(nèi)容之后會自動篩選相應的內(nèi)容列出來，這個的詳細的用法可以在各大手機外賣APP上面看到這里我就不截圖了，但是我發(fā)現(xiàn)我這邊的APP是沒有這個功能的，所以用戶體驗感覺很是不好。所以在這里我就想嘗試一下應用vue.js+boostrap來實現(xiàn)這個效果，希望各位大神多多指教
展示一下效果：
HTML代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue+boostrap最佳實踐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="請輸入標題名稱">
<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代碼
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:"司徒正美"
}
]};
//定義一個自定的過濾器叫做searchFor,傳遞一個過濾參數(shù)searchString
//第一個參數(shù)指的是要過濾的數(shù)據(jù)源data
Vue.filter("searchFor",function(value,searchString){
//判斷傳入的內(nèi)容是否為空
if(!searchString){
//將要過濾的對象全部返回，也就是是相當于什么都沒有操作一樣
//程序也在這個地方終止不會繼續(xù)向下走
return value;
}
//將輸入的內(nèi)容統(tǒng)一為小寫或者大寫
seearchString=searchString.trim().toLowerCase();
var result=[];
//item指代當前數(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項目實踐(案例詳解)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Vue.js每天必學之數(shù)據(jù)雙向綁定，如何進行綁定，如何進行數(shù)據(jù)雙向綁定，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了vue2升級vue3遇到的問題bug解決分析整理,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
Vue3+Vite+ElementPlus管理系統(tǒng)常見問題
本文記錄了使用Vue3+Vite+ElementPlus從0開始搭建一個前端工程會面臨的常見問題，沒有技術(shù)深度，但全都是解決實際問題的干貨，可以當作是問題手冊以備后用，感興趣的朋友參考下2023-12-12
Vue.js每天必學之構(gòu)造器與生命周期，告訴大家什么是Vue.js構(gòu)造器與生命周期，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了vue實現(xiàn)橫向時間軸組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家介紹了vue如何封裝一個高質(zhì)量的表單通用組件方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
編譯優(yōu)化指的是編譯器將模板編譯為渲染函數(shù)的過程中，盡可能多的提取關(guān)鍵信息，并以此指導生成最優(yōu)代碼的過程，優(yōu)化的方向主要是區(qū)分動態(tài)內(nèi)容和靜態(tài)內(nèi)容，并針對不同的內(nèi)容采用不同的優(yōu)化策略2023-01-01
我們所熟知的Vue.js也在如何提取公共代碼復用方面也一直在探索優(yōu)化，本文小編就來和各位聊聊Vue.js代碼復用的前世今生，希望對大家學習Vue有一定的幫助2023-05-05
這篇文章主要介紹了vue使用Font Awesome的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了HBuilder導入vue項目并通過域名訪問,一般情況下運行vue項目需要安裝node.js，通過npm命令來安裝vue組件和運行vue項目，本文給大家介紹的非常詳細，需要的朋友可以參考下2022-05-05