vue.js+boostrap最佳實踐

時間  2019-11-19
標籤 vue.js+boostrap vue boostrap 最佳 實踐 欄目 JavaScript 简体版
原文   原文鏈接

1、爲何要寫這篇文章javascript

 最近忙裏偷閒學了一下vue.js，同時也複習了一下boostrap，發現這兩種東西若是同時運用到一塊兒，能夠發揮很強大的做用，boostrap優雅的樣式和豐富的組件使得頁面開發變得更美觀和更容易，同時vue.js又是能夠綁定model和view(這個至關於MVC中的，M和V之間的關係)，使得對數據變換的操做變得更加的簡易，簡化了不少的邏輯代碼。css

 

2、學習這篇文章須要具有的知識html

 一、須要有vue.js的知識前端

二、須要有必定的HTML、CSS、JavaScript的基礎知識vue

三、因爲在項目中會加入一些juqery，因此還須要必定的基礎，可是這個能看懂就好了java

四、boostrap的知識也是要的，可是這個我建議大體的看一下就好了，由於到時候不懂就直接看手冊jquery

 

3、開始入門小項目bootstrap

 這個項目咱們須要要達到的效果是，讓讀者明白vue.js在實際工做中是怎樣應用的，同時，也算是第一個帶你將vue.js和boostrap相結合的開端項目吧後端

廢話很少說，下來看一下效果如何編輯器

PS:因爲在博客園中的編輯器不容許嵌入JS文件因此無法直接在這裏給你們展現了

這個是使用boostrap來做爲樣式，使用vue.js來與相關的按鈕進行綁定的從而達到相應的效果

HTML代碼以下：

 

<!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>
        <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>

這裏面咱們須要注意這些，

一、使用vue.js引入的時候要注意一下，vue.js的版本問題，做者本人就是在這裏被坑了好多天才發現和解決的

二、{{變量}}這樣的格式是表示在前端也就是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:這個是制定要綁定到前端的內容，可是咱們須要注意的是，只裏面咱們不止是能夠存在一個鍵值對的，多個鍵值對也是可行的，也就是相似於

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

 

這樣的也是能夠接受的，可是若是你是想對這個test進行更改了以後再進行返回的話咱們能夠在Vue的做用域內加上這樣的一句

demo.test=2

 

CSS代碼以下：

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

 

這裏咱們注意一下，咱們使用的全部的例子都是公用一份CSS樣式表的，因此在下面咱們將不會再次說起樣式的問題，若是改動樣式咱們會直接寫在HTML中。

這裏咱們咱們因此下爲何要使用這個!important屬性，由於當你引入了boostrap的時候，會發現boostrap的屬性咱們在樣式表中是沒法對其進行替換的，除非你在行內樣式中更改這個另當別論，因此這個時候咱們有3種解決方法

一、在boostrap中進行勾選，由於boostrap是使用LESS的方法編譯而成的，因此支持用戶自定義boostrap的內容

二、像我這樣在樣式中的屬性加上!important使其沒法被boostrap中衝突的樣式覆蓋

三、直接在樣式表中改寫

我比較推崇的是第一種作法，可是第二種作法感受上也沒什麼很差的，第三種作法不推薦這樣會不夠靈活和加大代碼的複雜度

第一個項目好了，咱們能夠狠搓這裏預覽

 

4、進階項目練習

 上面的這個項目比較的簡單，只能算是對vue.js的一個簡單的應用，下面咱們會有一個新的項目，這個項目中涉及到一些雙想綁定的應用，以及有些其餘的方法，想在老司機就來開車了，看客要記得在留言區打卡

GIF效果：

HTML代碼：

<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>

 

注意事項：

一、在v-model綁定的時候，placeholder是不起做用的

二、v-model是用來作雙向綁定的，顧名思義就是在它能夠改變model，同時也能夠被model所改變

三、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;
            }
        }
    });
}

 

這個真心沒有什麼能夠說的

看效果猛搓這裏

 

5、實戰小項目帶你飛

 一、模擬購於車統計

 購物車這個相信你們都知道是什麼東西並且怎麼用吧，可是這個不知道你們有沒有想過就是購物車在統計東西的總金額的時候，若是是使用傳統的方法來實現的話（也就是JavaScript來原生態實現），這個時候咱們就須要定義一個方法，用來獲取當前的物品的數量以及每一個數量的金額，可是若是物品多的話，這個對於整個邏輯上來實現是很是困難的，很容易出現錯誤。因此這個時候使用vue.js是極好，經過對model的改變從而到達model中的值也就是最終的總金額

 效果展現：

這個例子若是你有認真學習的話，你基本上差很少也就掌握了vue.js 的基礎應用，裏面涉及到的vue.js中的語法比較綜合，若是還不熟悉的話，請看官方文檔

HTML代碼：

 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">商品總金額:  {{total}}
17         <div></div>
18         </a>
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>
View Code

 

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 }
View Code

 

其中還有一個bug無法解決，就是在點擊以後纔會對點擊的元素添加上類，這個與我要實現的點擊的同時會添加類這個有所衝突，知道的但願你們在後面踊躍留言

預覽地址

二、搜索引擎模擬

搜索引擎模擬這裏所得有點大了，事實上真正的搜索是不可能經過前端就實現的，這個你們都知道由於不少東西都要用後端去抓取，可是小編是在一個小城市工做的，因此也見過一些製做得比較差的，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     var demo=new Vue({
40         el:'#main',
41         data:data,
42 
43     })
44 }
View Code

 

 

 

大體上要講解的內容都在註釋上面，若是仍是不懂的話能夠在留言上去提問

 

6、案例總結

 短短的一篇文章，雖然不可以充分的展示boostrap和vue.js的魅力，可是若是你認真的學習的話， 相信你必定能夠在裏面收穫到不少，若是想學習更多的關於boostrap的話，能夠去個人文章中找到那邊對boostrap的學習文章，同時我還未你們準備了源碼下載地址 ，最後說一句，本文是本人的原創做品，轉載時請註明出處

你的點贊是我前進的動力

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程