Vue_初識

前端三大框架：

1. vue：開發效率至關高了。

2. angalar：適合作後臺管理系統，入手容易，可是越日後會越難受。
3. react：虛擬dom(渲染內存中存儲的dom，通過操做後，纔會去渲染瀏覽器的真實dom)。

 

對瀏覽器來說，view視圖就是頁面。便是一個dom樹。

瀏覽器會把當前html文檔當作一個dom樹。

 

jquery：js類庫。js操做dom，進行打包。

• jquery操做dom。可是功能相對較少。
• 可是還能夠更牛逼，更簡單。

bootstrap：css方向的框架。

 

先後端分離：（ajax）

• 直白點說：django的render方法不再會用了
• 而是返回一個json數據。返回值永遠都是json數據。
• 前端人員負責html、css、js。
• 它發ajax請求，要數據。任何數據請求要發ajax。
• 後端就寫業務邏輯，返回json數據。

• 這樣的好處：
• 職責明確。

 

VUE是啥？

vue是一個自動構建用戶界面的js框架。

自動生成js，css，html

vue是前端框架。

vue從官方來講是一個構建用戶界面的javascript框架。

vue繼承了其餘倆框架的優勢。

爲何用？

輕量、高效。

前端三大框架之一VUE & react & angelar

 

 

關於指令：

什麼是指令：

就是帶有V-前綴的特殊屬性，經過屬性來操做dom元素。

1. v-text：在元素當中插入文本
2. v-html：在元素當中不只能夠插入文本，還能夠插入標籤
3. v-if：根據表達式的真假值，來動態插入或移除元素。能夠單獨寫，可是基本都是與else一塊兒的。  這個和show的區別，若是if爲false，整個標籤都沒的了
4. v-show：這個是display=none
5. v-for：
• 若是是對象object的話：
• (value,key,index)
• 若是是數組array的話：
• (value,index)
6. v-on：監聽元素事件，並執行響應的操做   簡寫  @
7. v-model：進行數據和視圖的雙向數據綁定

視圖(dom) --> 數據(model)  # 視圖就認爲是一個標籤元素。

數據(model)-->視圖(dom)    #

數據驅動視圖：

• 不須要找到標籤，我只須要關心個人數據就行
• 找到響應的變量，修改了變量裏面的值就會發生改變。

視圖驅動數據：

• 找個某個標籤並賦值，而後數據也會發生改變。

　　分爲三個任務：

1. 1. 把數據和DOM(元素)的值綁定。

1. 2. 當輸入內容時，數據同步發生變化。  --> 實現視圖到數據的驅動
   3. 當改變數據時，輸入內容也會發生變化。 --> 實現數據到視圖的驅動

8. v-bind：對標籤屬性進行操做的，簡寫  :
1. 能夠綁定多種屬性
2. 若是你的href是一個動態的，就能夠用v-bind來綁定一下。
3. 若是是一個靜態的url，則麼必要

v-show和v-if的區別：

v-show：若是爲false，在前端會有屬性爲display：none。

v-if：若是爲false，整個標籤就沒了。

 

9. 自定義指令：

　　　　友情連接：Vue_自定義指令

 

 補充知識點：

1. 只聲明未賦值: Undefind
2. 變量提高：先使用，後定義
3. 對於瀏覽器來講。會把html當成一個dom樹。

document-->html-->head/body

 

4. shift:把數組的第一個元素刪除，而且返回第一個元素的值。若是數組爲空，則該方法不執行任何操做，返回undeifined
5. push：在最前面添加一個
6. pop：從後面刪一個
7. splice：指哪刪哪