Vue指令總結---小白同學必看


今天主要復習一下我們最熟悉vue指令,想要代碼擼得快,就要多看書,多看看官方的文檔和學習指令,學習編程是一個非常享受的過程,尤其是你不斷地去解決問題,獲得一項技能,實現薪水的上漲。進行Vue的指令烹飪吧。

  1. v-text :string  用法:更新元素的textContent,更新部分的textContent,需要使用{{Mustache}}插值
  2. v-html: string 用法:更新元素的innerHTML;注意:網站動態渲染任意HTML,容易導致XXS攻擊
  3. v-show:any 用法:根據表達式真假值,切換元素的 display css 屬性 
  4. v-if:any  用法:表達式的真假條件渲染元素。在切換時元素以及它的數據綁定/組件被銷毀並且重建。如果是<template>,並提出它的內容作為條件塊。 條件變化時改指令出發過渡效果。
  5. v-else :不需要表達式  用法:前面必須用 v-if 或者 v-else-if
  6. v-else-if:any 用法:前面必須用v-if 或者v-else-if  表示v-if的else if塊。可以鏈式調用
  7. v-for :Array | Object | number | string  用法:基於源數據多次渲染元素或者模板塊 語法:alias in expression
  8. v-on: 縮寫@;:Function |  Inline Statement  參數 $event( required) 修飾符     
               .stop---調用 event.stopPropagation(),
                .capture --添加事件偵聽器時使用capture模式
                .prevent ---調用event.preventDefault()
                .self---只當事件是從着特定鍵觸發時才觸發回調
                .{keyCode | keyAlias} -- 只當事件是從特定鍵觸發時才觸發回調
                (PS:官網是這么說的 
            .self - 只當事件是從偵聽器綁定的元素本身觸發時才觸發回調
         .{keyCode | keyAlias} - 只當事件是從偵聽器綁定的元素本身觸發時才觸發回調。
            我這里理解成了 特定鍵觸發時才觸發回調,注意偵聽器綁定的元素)
                .native ---監聽組件根元素的原生事件
                .once----只觸發一次回調
                .left---(2.2.0)只當點擊鼠標左鍵時觸發
                .right ---(2.2.0)只當點擊鼠標右鍵時觸發
                .middle ---(2.2.0)只當點擊鼠標中鍵時觸發
    用法:綁定事件監聽器。事件類型由參數指定

    9.v-bind:縮寫:;類型: any (with argument)  | Object  (without argument) 參數:attrOrProp (optional) ;修飾符: .prop ---被用於綁定DOM 屬性;.camel ---transform the kebab-case attribute name into camelCase .(supported since 2.1.0) 用法: 在綁定 class 和 style 特性時,支持其它類型的值。如對象和數組;在綁定prop時,子組件必須聲明prop 

    10.v-model :限制<input> <select> components ;
       修飾符:.lazy---取代input 監聽change事件
                  .number ---輸出字符串轉為數字
                  .trim----輸入首尾空格
    11. v-pre  用法:跳過這個元素和它的子元素的編譯過程
    12.v-cloak:用法:{v-cloak} {display:none}可以隱藏未編譯的Mustach標簽直到實例准備完畢
    13.v-once :詳細 只能渲染元素和組件一次,隨后的重新渲染,元素/組件及其所有的子節點將被視為靜態內容並跳過。這可以用於優化更新性能。

     

最后致謝 vue官方提供的指令:指令


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM