vue基礎指令

• 2021 年 10 月 18 日
• 筆記
• 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類型.