Vue 框架基礎知識（一）

1、Vue是什麼？

a：vue是一套用於構建用戶界面的漸進式框架 。

b：vue的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合 。

c：使用vue將helloworld渲染到頁面 ：

 

2、指令 ：

（1）概念 ：本質就是自定義屬性 ；Vue都是以 v- 開頭 ；

a：v-cloak ，防止頁面加載時出現閃爍問題 ；

b：v-text ，用於將數據填充到標籤中 ，做用於插值表達式相似 ，可是沒有閃爍問題 ；

　　　　　　若是數據中有HTML標籤會將html標籤一併輸出 。

　　　　　　注意 ：此處爲單項綁定 ，數據對象上的值改變 ，插值會發生變化 ；可是當插值發生變化並不會影響數據對象的值 。

c：v-html ，用法和v-text類似 ，當時他能夠將HTML片斷填充到標籤中 。

　　　　　　可能有安全問題 ，通常只在可信任內容上使用 v-html ，永不用再用戶提交的內容上 。

　　　　　　區別 ：v-text輸出的是純文本 ，瀏覽器不會對其在進行html解析 ，單v-html會將其當html標籤解析後輸出 。

d：v-pre ，顯示原始信息跳過編譯過程 。

　　　　　　跳過這個元素和它的子元素的編譯過程 。

　　　　　　一些靜態的內容不須要編譯加這個指令能夠加快渲染 。

e：v-once ，執行一次性的插值【當數據改變時 ，插值處的內容不會繼續更新】

f：雙向數據綁定 ：v-model ，

　　　　　　功能 ：當數據發生變化的時候 ，視圖也就發生變化 。當視圖發生變化的時候 ，數據也會跟着同步變化 。

　　　　　　　限制 ：（<input>、<select>、<textarea>、<components>中使用）。

h：mvvm ：

　　　　（1）MVC是後端的分層開發概念 ；MVVM是前端視圖層的概念 ，主要關注於視圖層分離 ，也就是說：mvvm把前端的視圖層 ，

　　　　　　　分爲了三部分  Model 、View 、VM ViewModel 。

　　　　（2）m ：model ，數據層 Vue中 數據層 都放在data裏面 。

　　　　　　　　v ：view 視圖 ，Vue中view 即咱們的HTML頁面 。

　　　　　　　　vm ：（view-model）控制器將數據和視圖創建聯繫 ，vm即Vue的實例 就是vm 。

i：v-on ，用來綁定事件的 ，形式如 ：v-on ：click縮寫爲@click ；

　　（1）事件函數中傳入參數 ：

 

 j：事件修飾符 ：（1）在事件處理程序中調用 event . preventDefault（）或event . stoppropagation（）是很是常見的需求。

　　　　　　　　（2）Vue 不推薦咱們操做DOM 爲了解決這個問題 ，Vue .js爲 v-on提供了事件修飾符。

　　　　　　　　（3）修飾符是由點開頭的指令後綴來表示的 。

k：按鍵修飾符：（1）在作項目中有時會用到鍵盤事件 ，在監聽鍵盤事件時，咱們常常須要要檢查詳細的按鍵 。

　　　　　　　　　　　容許爲 v-on在監聽鍵盤事件事件時添加按鍵修飾符 。

　　　　　　　　（2）經常使用的按鍵修飾符 ：

　　　　　　　　　　　　A：.enter => （enter鍵）、.tab=>tab鍵 、delete(捕獲「刪除」和「退格按鍵」)=>刪除鍵 、

l：自定義按鍵修飾符別名 ：

　　　　　　　　　　（1）在Vue中能夠經過 config.keyCodes自定義按鍵修飾符別名 。　

m：v-bind指令 :

　　　　　　　　(1) v-bind指令被用來響應的更新HTML屬性 。

　　　　　　　　（2）v-bind：href 能夠縮寫爲 ：href 。

　　　　　　　　（3）綁定對象 ：咱們能夠給v -bind ：class 一個對象 ，以動態地切換class ，

　　　　　　　　　　　　　　　　注意 ：v-bind：class指令能夠與普通的class特性共存 。

　　　　　　　　（4）綁定對象和綁定數組的區別 ：

　　　　　　　　　　　　　　1>綁定對象的時候 對象的屬性 即要渲染的類名 對象的屬性值對應的是 data中的數據。

　　　　　　　　　　　　　　2>綁定數組的時候數組裏面存在的是data中的數據 。