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