vue基礎指令

離空半夏發表於2021-10-18

vue核心概念

  • 1.vue的本質宣告式/響應式(尋常的指令)元件化。(定製)
  • 2.vue簡介:MVVM框架(不完全是,react完全是),漸近式(可大可小,既可以做簡單的html頁面,又可以做大型的管理系統)
  • 3.vue開發思想:當我們想要改變檢視介面時,我們只需要改變檢視介面對應的宣告式變數即可(間接)
  • 4.jquery開發思想:當我們想要改變檢視介面時,我們要使用$選擇器獲取DOM元素物件,再使用DOM API操作DOM(直接)

指令

  • 1.指令是vue中的特色(在react中是沒有的),Angular,微信小程式也有指令。
  • 2.指令的本質,就是DOM封裝。指令就是一組相似的DOM操作
  • 3.降低我們直接操作DOM的頻率。(儘可能減少DOM操作(濫殺無辜,只想改變一個列表某一行時,把全部列表重新渲染),不推薦使用者直接操作DOM)
  • 4.指令如果有值,這個值是變數(變數必須在元件中可以通過this訪問),也可以是表示式(有變數參與的運算)

一、文字指令

  • 1.{{}}文字插值。缺點有“一閃而過”的效果(不夠美觀)。可以使用v-text替代,或者用v-clock替代,但是要設定css樣式[display:none]但是某些情況下只能用{{}},存在即合理。
  • 2.v-text專門用於渲染文字,如字串,數字等,但是null,undefined不會渲染,直接顯示為空
    • 注意,渲染Boolean值時,vue會自動的隱式轉化為字串
      進一步理解:v-text就相當於是innerText
  • 3.v-html 專門渲染HTML字串。
    • v-html的值是HTML字串,這些字串會被Vue引擎解析渲染成真實的DOM結構
    • v-html預設具有“防注入攻擊XSS”的功能,可以放心使用v-html
  • 4.v-once
    • 在語法上:v-once和v-cloak一樣,沒有值,不能這麼使用:v-once=‘msg’
    • 它有一個非常重要的特點,它所作用的DOM節點上的宣告式變數只會渲染一次。換句話說,當它對應的宣告式變數發生改變時,檢視不會發生改變。
    • 說明:工作中幾乎不會用到

動態屬性

  • v-bind給標籤動態新增屬性,凡是可以使用的屬性都可以變成動態的
    • 簡寫: v-bind:style 簡寫成:style=‘’
    • 進階:使用v-bind實現動態class,動態style,是非常重要的,在“元件化”時用的非常多

事件繫結

  • v-on 給標籤繫結事件(事件是網頁互動的基礎)
    +.可以繫結哪些事件?什麼事件都可以繫結,如:滑鼠事件,鍵盤事件,滾動事件等...
    +.簡寫:v-on:事件名=‘事件處理器’ 簡寫為 @事件名 = ‘事件處理器’
    +.事件修飾符(可以鏈式呼叫):.enter/.stop阻止冒泡/.prevent阻止預設行為/...
    +. 事件物件
    +.(1)當沒有事件傳參時,事件處理器預設的第一個引數就是事件物件。(如果沒有引數時,定義不要加())當事件傳參時,需要手動傳入$event事件物件。
    在什麼場景下會使用事件傳參?通常為了複用“事件處理器”,減少methods封裝
    語法1:沒有事件傳參<tag @click='handle'>
    語法2:有事件傳參時<tag @click='handle(變數1,$event)'>

四、表單繫結

  • v-model用於表單雙向繫結,即方便我們取表單值。(這不是響應式的原理)
  • 約定:一般我們談論的“雙向繫結”指的是表單的v-model,談論“響應式/宣告式”指的是vue響應式的原理。
  • 怎麼理解雙向繫結?從表單的角度,當表單檢視發生改變時,對應的生名式變數自動更新。當v-model對應的宣告式變數發生變化時。表單檢視自動更新
  • 好處:有了v-model,我們取表單的值非常的簡單
    三個修飾符:
  • trim去掉文字類表單值首位的字串/空格
  • number用於把由數字組成的字串,轉化成Number型別.
  • lazy用於“長表單”的v-model,當長表單游標失焦時,再把表單檢視上的更新值更行到其對應的宣告式變數上。這是一種效能優化。

五、列表迴圈

  • v-for常用於迴圈陣列,數字,字串,物件,一切可迭代的變數(如:map,set)
    • vue工作中很少使用Map,Set,原因是Vue沒辦法把Map,Set這類資料變成響應式資料
    • 提示:在v-for中很少用於迴圈Map,SET
    • 說明:常用於迴圈陣列,數值
    • 問題:v-for迴圈時要加key,後續再補充

六、條件渲染

  • v-show對元素進行顯示與隱藏
    • 背後的原理是給元素新增或移除{display:none}的css樣式來實現顯示與隱藏
      語法的坑:v-show=‘Boolean(表示式)’,v-show的值永遠都是布林值,一定要留意v-show值的資料型別
  • v-if/v-else-if/v-else 用於對元素進行顯示與隱藏
    • 背後的原理:是通過DOM操作對元素節點進行插入與刪除(removeChild&appendChild)
    • 語法的坑:v-if=‘Boolean(表示式)’,v-id和v-else-id的值必須是布林值,vue會自動隱式型別轉化
    • 注意:當v-if/v-else-if/v-else成為‘一組’時,在這組兄弟節點中不能插入其他節點
    • v-else 是不用給‘值’的
  • v-if和v-show的區別?
    • v-show是通過css的{display:none}來實現顯示與隱藏的。而v-if是通過DOM元素操作實現的。
    • 使用v-show實現隱藏功能時,頁面初始化的開銷比較大,而使用v-if實現隱藏功能時,頁面初始化開銷比較小。當一個元素節點需要頻繁進行顯示與隱藏,建議使用v-show來做,反之建議使用v-if

七、其他指令

  • v-slot插槽,是元件化的基礎語法之一,它可以簡寫為#
  • v-pre 一般用於除錯。特點:一般被v-pre所包裹的都沒節點,都不參與vue編譯和解析。這個指令不常使用。

相關文章