vue基礎指令

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編譯和解析。這個指令不常使用。