性別：


        


        
姓名：{{ username }}
        
性別：{{ gender }}

        


        

（3）屬性綁定指令

如果需要為元素的屬性動態(tài)綁定屬性值，則需要用到 v-bind 屬性綁定指令。用法示例如下：

3.1 屬性綁定指令的簡寫形式

由于 v-bind 指令在開發(fā)中使用頻率非常高，因此，vue 官方為其提供了簡寫形式（簡寫為英文的 : ）。

3.2 使用 Javascript 表達(dá)式

在 vue 提供的模板渲染語法中，除了支持綁定簡單的數(shù)據(jù)值之外，還支持 Javascript 表達(dá)式的運算，例如：

3.3 屬性綁定指令 - 完整代碼演示

    
    
    
    



    
    
        
        

        
        

        

        
1 + 2 的結(jié)果是：{{ 1 + 2 }}
        
{{ tips }} 反轉(zhuǎn)的結(jié)果是：{{ tips.split('').reverse().join('') }}
        這是一個 div
    

    
    
    
    

（4）事件綁定指令

1?? vue 提供了 v-on 事件綁定指令，用來輔助程序員為 DOM 元素綁定事件監(jiān)聽。語法格式如下：

?溫馨提醒?：原生 DOM 對象有 onclick、oninput、onkeyup 等原生事件，替換為 vue 的事件綁定形式后，分別為：v-on:click、v-on:input、v-on:keyup

2?? 通過 v-on 綁定的事件處理函數(shù)，需要在 methods 節(jié)點中進(jìn)行聲明：

4.1 事件綁定的簡寫形式

由于 v-on 指令在開發(fā)中使用頻率非常高，因此，vue 官方為其提供了簡寫形式（簡寫為英文的 @ ）。

4.2 事件參數(shù)對象

在原生的 DOM 事件綁定中，可以在事件處理函數(shù)的形參處，接收事件參數(shù)對象 event。同理，在 v-on 指令（簡寫為 @ ）所綁定的事件處理函數(shù)中，同樣可以接收到事件參數(shù)對象 event，示例代碼如下：

4.3 綁定事件并傳參

在使用 v-on 指令綁定事件時，可以使用 ( ) 進(jìn)行傳參，示例代碼如下：

4.4 事件綁定指令 - 完整代碼演示

    
    
    
    



    
    
        
count 的值是：{{ count }}
        
        
        +1
        -1
    

    
    
    
    

4.5 $event

$event 是 vue 提供的特殊變量，用來表示原生的事件參數(shù)對象 event。$event 可以解決事件參數(shù)對象event被覆蓋的問題。示例用法如下：

完整代碼演示如下：

    
    
    
    



    
    
        
count 的值是：{{ count }}
        
        
        
        +N
    

    
    
    
    

4.6 事件修飾符

在事件處理函數(shù)中調(diào)用event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。因此，vue 提供了事件修飾符的概念，來輔助程序員更方便的對事件的觸發(fā)進(jìn)行控制。常用的 5 個事件修飾符如下：

完整代碼演示如下：

    
    
    
    



    
    
        跳轉(zhuǎn)到百度首頁

        


        
            按鈕
        
    

    
    
    
    

4.7 按鍵修飾符

在監(jiān)聽鍵盤事件時，我們經(jīng)常需要判斷詳細(xì)的按鍵。此時，可以為鍵盤相關(guān)的事件添加按鍵修飾符。

完整代碼演示如下：

（5）雙向綁定指令

vue 提供了 v-model 雙向數(shù)據(jù)綁定指令，用來輔助開發(fā)者在不操作 DOM 的前提下，快速獲取表單的數(shù)據(jù)。

完整代碼演示如下：

    
    
    
    



    
    
        
用戶的名字是：{{ username }}
        
        

        
        

        
            請選擇城市
            北京
            上海
            廣州
        
    

    
    
    
    

5.1 v-model 指令的修飾符

為了方便對用戶輸入的內(nèi)容進(jìn)行處理，vue 為 v-model 指令提供了 3 個修飾符，分別是：

完整代碼演示如下：

    
    
    
    



    
    
         +  = {{ n1 + n2 }}
        

        
        獲取用戶名
        

        
    

    
    
    
    

（6）條件渲染指令

條件渲染指令用來輔助開發(fā)者按需控制 DOM 的顯示與隱藏。條件渲染指令有如下兩個，分別是：

• v-if

• v-show

代碼演示如下：

6.1 v-if 和 v-show 的區(qū)別（面試常問）

實現(xiàn)原理不同：

• v-if 指令會動態(tài)地創(chuàng)建或移除DOM 元素，從而控制元素在頁面上的顯示與隱藏；

• v-show 指令會動態(tài)為元素添加或移除 style=“display: none;” 樣式，從而控制元素的顯示與隱藏；

性能消耗不同：v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此：

• 如果需要非常頻繁地切換，則使用 v-show 較好；

• 如果在運行時條件很少改變，則使用 v-if 較好；

6.2 v-else

v-if 可以單獨使用，或配合 v-else 指令一起使用：

?溫馨提醒?：v-else 指令必須配合 v-if 指令一起使用，否則它將不會被識別！

6.3 v-else-if

v-else-if 指令，顧名思義，充當(dāng) v-if 的“else-if 塊”，可以連續(xù)使用：

?溫馨提醒?：v-else-if 指令必須配合 v-if 指令一起使用，否則它將不會被識別！

6.4 條件渲染指令 - 完整代碼演示

    
    
    
    



    
    
        這是被 v-if 控制的元素

        這是被 v-show 控制的元素


        

        優(yōu)秀
        良好
        一般
        差
    

    
    
    
    

（7）列表渲染指令

vue 提供了 v-for 列表渲染指令，用來輔助開發(fā)者基于一個數(shù)組來循環(huán)渲染一個列表結(jié)構(gòu)。v-for 指令需要使用 item in items 形式的特殊語法，其中：

• items 是待循環(huán)的數(shù)組；

• item 是被循環(huán)的每一項；

代碼演示如下：

7.1 v-for 中的索引

v-for 指令還支持一個可選的第二個參數(shù)，即當(dāng)前項的索引。語法格式為 (item, index) in items，示例代碼如下：

?溫馨提醒?：v-for 指令中的 item 項和 index 索引都是形參，可以根據(jù)需要進(jìn)行重命名。例如 (user, i) in userlist

7.2 列表渲染指令 - 完整代碼演示

    
    
    
    
    



    
    
        
            
                索引
                Id
                姓名
            
            
                
                
                
                
                
                    {{ index }}
                    {{ item.id }}
                    {{ item.name }}
                
            
        
    

    
    
    
    

7.3 使用 key 維護(hù)列表的狀態(tài)

1?? 當(dāng)列表的數(shù)據(jù)變化時，默認(rèn)情況下，vue 會盡可能的復(fù)用已存在的DOM 元素，從而提升渲染的性能。但這種默認(rèn)的性能優(yōu)化策略，會導(dǎo)致有狀態(tài)的列表無法被正確更新。

2?? 為了給 vue 一個提示，以便它能跟蹤每個節(jié)點的身份，從而在保證有狀態(tài)的列表被正確更新的前提下，提升渲染的性能。此時，需要為每項提供一個唯一的 key 屬性：

完整代碼演示如下：

    
    
    



    
    

        
        

            
            添加
        

        
        

            
                
                姓名：{{user.name}}
            
        
    

    
    

7.4 key 的注意事項

• key 的值只能是字符串或數(shù)字類型

• key 的值必須具有唯一性（即：key 的值不能重復(fù)）

• 建議把數(shù)據(jù)項 id 屬性的值作為 key 的值（因為 id 屬性的值具有唯一性）

• 使用 index 的值當(dāng)作 key 的值沒有任何意義（因為index 的值不具有唯一性）

• 建議使用 v-for 指令時一定要指定 key 的值（既提升性能、又防止列表狀態(tài)紊亂）

感謝各位的閱讀，以上就是“Vue中的調(diào)試工具和指令怎么使用”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Vue中的調(diào)試工具和指令怎么使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！