vue.js
? ??????`vue.js`?是一套用于構(gòu)建用戶界面的漸進式框架
漸進式
Vue?核心
????????-?聲明式渲染
????????-?組件
引入
????????我們還是先通過?\<script\>?的方式來引入?<u>vue</u>
組件
????????`vue`?的核心功能之一就是組件
組件基本分類
????????-?根組件
????????-?可復(fù)用的功能組件
根組件的創(chuàng)建
????????通過?`vue`?提供的構(gòu)造函數(shù)可以實例化出來一個跟組件實例對象
可復(fù)用的功能組件
????????通過?`Vue`?提供的靜態(tài)方法?`component`?窗口可復(fù)用的功能組件
????????組件配置選項：https://cn.vuejs.org/v2/api/
組件內(nèi)容渲染
????????渲染一個組件的內(nèi)容可以通過兩種方式來進行
????????????????-?template?選項（模板）
????????????????-?render?選項（函數(shù)）
template（模板）
????????type?:?string
????????????????組件的模板結(jié)構(gòu)（HTML）办素，模板內(nèi)容會被?`vue`?進行渲染，生成最終的?`HTML`?內(nèi)容熬尺，并替換占位（掛載）元素
el
????????type?:?string?|?Element
????????????????提供一個在頁面上已存在的?DOM?元素作為?Vue?實例的掛載目標(biāo)摸屠。可以是?CSS?選擇器粱哼，也可以是一個?HTMLElement?實例季二，
????????????????????????-?該選擇只對?`new`?創(chuàng)建的實例有效
????????????????????????-?如果提供?`el`?，但是沒有提供?`template`?揭措，則?`el`?的內(nèi)容講作為?`template`
render函數(shù)
????????type?:?(createElement:?()?=>?VNode)?=>?VNode
????????????????發(fā)揮?`JavaScript`?最大的編程能力胯舷，直接創(chuàng)建?`VNode`?（虛擬dom對象），優(yōu)先級高于?`el`?和?`template`
????????????????????????-?有更強大的編程能力
????????????????????????-?有更高的性能
????????????????????????????????????https://cn.vuejs.org/v2/guide/render-function.html
使用?$mount?方法延遲?`Vue`?實例的掛載
????????當(dāng)?`Vue`?實例沒有?`el`?選項的時候绊含，它會處于一種?未掛載?的狀態(tài)桑嘶，我們可以通過組件?`Vue`?實例對象的?`$mount`?方法來手動掛載，
????????通過該方式躬充，我們也可以達到延遲?`Vue`?實例的掛載的目的
組件中的數(shù)據(jù)（狀態(tài)）
data
????????組件內(nèi)部使用的數(shù)據(jù)逃顶，`data`?是一個對象，`data`?中的值可以中模板中直接訪問
????????????????-?`Vue`?實例組件（根組件）的?`data`?是一個對象
????????????????-?可復(fù)用功能組件的?`data`?必須是一個函數(shù)充甚，且該函數(shù)必須返回一個對象（因為復(fù)用性以政，避免多個組件實例引用同一個對象。
? ? ? ? ? ? ? ? ? 換句話說伴找，組件中使用的數(shù)據(jù)必須是一個對象盈蛮，但是可復(fù)用組件的這個數(shù)據(jù)對象必須通過函數(shù)返回
data?的訪問
????????`data`?數(shù)據(jù)可以直接通過組件實例對象訪問，也可以通過實例對象下的?`$data`?屬性進行訪問
????????????????組件實例對象下有很多的以?`$`?開頭的屬性技矮，這些都是實例對象內(nèi)置的一些屬性和方法抖誉，`vue`?為了區(qū)分數(shù)據(jù)與內(nèi)置屬性方法，
????????????????內(nèi)置的屬性和方法默認都是以?`$`?開始的衰倦，所以我們中數(shù)據(jù)中應(yīng)該避免使用?`$`?開頭的數(shù)據(jù)
模板語法
????????vue?使用了基于?html?的模板語法袒炉，使用聲明式的方式把實例中的數(shù)據(jù)（`data`）與?DOM?進行綁定，`data`?中的數(shù)據(jù)在模板中可以
????????直接使用
Mustache（雙大括號樊零，大胡子）?語法
????????在?vue?中梳杏，我們是通過一對雙大括號把實例中的數(shù)據(jù)渲染到模板內(nèi)容中
插值表達式
????????在?{{????}}?中，我們可以放置表達式值
數(shù)據(jù)到視圖的更新
????????vue?會把??`data`?中的數(shù)據(jù)掛載到實例屬性下，同時對它們進行主動的監(jiān)聽攔截十性，當(dāng)數(shù)據(jù)發(fā)生變化的時候叛溢，重新渲染模板。我們可以
????????通過實例對象對數(shù)據(jù)進行修改
檢測變化的注意事項
????????在?vue3?之前劲适，數(shù)據(jù)的監(jiān)聽是通過?`Object.defineProperty`?方法來實現(xiàn)的楷掉，但是該方法只能監(jiān)聽攔截單個數(shù)據(jù)，對于對象新增屬性無法
????????監(jiān)聽攔截霞势。所以烹植，對于數(shù)據(jù)對象中新增的屬性，我們需要調(diào)用?vue?提供的方法來進行處理
擴展
????????通過?`Object.defineProperty`?監(jiān)聽攔截中存在一些問題
????????????????-?屬性新增屬性
????????????????-?數(shù)組方法：push愕贡、pop草雕、shift、unshift固以、splice墩虹、sort、reverse
????????????????-?數(shù)組新增值：[????]
????????????????-?數(shù)組?length?屬性
????????以上的操作中并不會觸發(fā)監(jiān)聽攔截
? ? ? ? ? ? ? ? `vue`?對數(shù)組中的?`push`憨琳、`pop`?等方法進行重新包裝诫钓，所以在?`vue`?中調(diào)用這些方法，可以對數(shù)組的修改進行監(jiān)聽攔截
? ? ? ? ? ? ? ? [https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC%82%E6%96%B9%E6%B3%95-mutation-method]
? ? ? ? ? ? ? ? (https://cn.vuejs.org/v2/guide/list.html#變異方法-mutation-method)
使用?Vue.set?方法添加新數(shù)據(jù)
????????在模板中篙螟，我們使用了一個不存在的數(shù)據(jù)?`user.gender`
????????如果我們通過?`app.user.gender?=?'男'?`的方式來新增菌湃，是不會被?vue?攔截監(jiān)聽處理的，我們需要使用
????????這樣的方式遍略，`set`?方法給?`app.user`??添加?`gender`?屬性的同時惧所，對它進行了?`defineProperty`
指令
????????表達式的值除了可以出現(xiàn)內(nèi)容中，也可以使用在其它位置绪杏，比如：屬性纯路。但是不能使用?`{{????}}`?語法，而是需要?`指令`
????????在?`vue`?中寞忿，指令是一個帶有?`v-`?前綴的屬性，與普通屬性不一樣的地方在于顶岸，指令的值是引號括起來的?`表達式`腔彰，不同的指令有不同
????????的作用，`vue`?內(nèi)置了一些常用的指令辖佣，后期我們還可以自定義屬于自己的指令
????????????????-?內(nèi)容輸出
????????????????-?循環(huán)
????????????????-?邏輯
????????????????-?屬性綁定
????????????????-?事件
????????????????-?其它
內(nèi)容輸出
????????通過?`{{????}}`?我們可以很方便的中模板中輸出數(shù)據(jù)霹抛，但是這種方式會有一個問題，當(dāng)頁面加載渲染比較慢的時候卷谈，頁面中會
????????出現(xiàn)?`{{????}}`?杯拐，`vue`?提供了幾個指令來解決這個問題
指令中的表達式不需要使用?`{{????}}`
v-text（推薦下面的方法）
????????弊端：`v-text`?會填充整個?`innerHTML`，會把整個title填充掉，p再寫數(shù)據(jù)也沒用
v-cloak（這種寫法用的比較多端逼，結(jié)合{{? ??}}和v-text的優(yōu)點）
????????需要配合?css?進行處理
v-html
????????為了防止?`xss`?攻擊朗兵，默認情況下輸出是不會作為?`html`?解析的，通過?`v-html`?可以讓內(nèi)容作為?`html`?進行解析
v-once
????????只渲染元素和組件一次顶滩，后期的更新不再渲染
v-pre
????????忽略這個元素和它子元素內(nèi)容的編譯
邏輯處理
v-show
????????根據(jù)表達式的值（布爾值）余掖，切換元素的顯示與隱藏（display?屬性）
????????????????適用于狀態(tài)切換比較頻繁的情況
v-if
????????根據(jù)表達式的值（布爾值），創(chuàng)建或銷毀元素
????????????????適用于狀態(tài)切換不頻繁的情況
v-else?/?v-else-if
? ??????與?`v-else`?配合
循環(huán)與列表
v-for
????????根據(jù)數(shù)據(jù)循環(huán)渲染?`v-for`?指令所在的元素及其子元素
????????????????可以循環(huán)的數(shù)據(jù)：Array?|?Object?|?number?|?string?|?Iterable?(2.6?新增)
? ? ? ? v-for?中也可以使用?of?語法礁鲁，在?vue?中兩者沒有什么區(qū)別
:key
????????默認情況下盐欺，在渲染?`DOM`?過程中使用?原地復(fù)用?，這樣一般情況下會比較高效仅醇，但是對于循環(huán)列表冗美，特別是依賴某種狀態(tài)的列表，
????????會有一些問題析二，我們可以通過?`:key`?屬性粉洼，來給每個循環(huán)節(jié)點添加一個標(biāo)識
屬性綁定
v-bind
????????綁定數(shù)據(jù)（表達式）到指定的屬性上，`<div?v-bind:參數(shù)="值/表達式"></div>`甲抖，這里的參數(shù)就是指定的屬性名稱
縮寫
????????有的一些常用指令會有對應(yīng)的縮寫漆改，`v-bind`?對應(yīng)的縮寫為 `:`
樣式
????????針對樣式屬性，`v-bind`?值有一些特殊的寫法
style
原生普通寫法
v-bind?寫法
對象寫法
數(shù)組寫法
class
原生普通寫法
v-bind?寫法
數(shù)組寫法
對象寫法
????????使用對象寫法准谚，可以根據(jù)值（boolean）動態(tài)添加對應(yīng)的?class
單向數(shù)據(jù)流
????????通過上面的知識點和案例挫剑，我們可以看到，當(dāng)數(shù)據(jù)更新的時候柱衔，頁面視圖就會更新樊破，但是頁面視圖中綁定的元素更新的時候，
????????對應(yīng)的數(shù)據(jù)是不會更新的
????????我們稱為：單向數(shù)據(jù)流?數(shù)據(jù)?->?視圖
????????????????在?vue?中唆铐，還有一種雙向數(shù)據(jù)流綁定的方式
v-model
? ? ? ? 數(shù)據(jù)?`title`?更新哲戚，視圖中?`input`?的?`value`?就會更新。同時艾岂，當(dāng)?input?中的?`value`?更新的時候顺少，數(shù)據(jù)?`title`?也會更新，這就是我們說的
????????數(shù)據(jù)雙向綁定?[與?React?中的受控組件類似]
表單
????????針對一般元素王浴，比如?div脆炎、span、p氓辣、img?等秒裕，采用的是單向綁定：v-bind，只需要把數(shù)據(jù)綁定到視圖中就可以钞啸，但是對于表單這種交互
????????性比較強的元素或組件几蜻，我們一般可能需求雙向綁定喇潘，即：用戶對視圖元素的操作同時更新數(shù)據(jù)
????????????????v-model?在內(nèi)部為不同的輸入元素使用不同的屬性和事件來處理數(shù)據(jù)
`text`?和?`textarea`
`checkbox`?和?`radio`
單選框綁定一個值
? ? 綁定的v3不是value，是單選框的check值
多選框綁定到一個布爾值或數(shù)組
`select`
單選綁定到值梭稚，多選綁定到數(shù)組
指令修飾符
????????一個指令可以包含的內(nèi)容包括：
????????????????-?指令名稱
????????????????-?指令值
????????????????-?指令參數(shù)
????????????????-?指令修飾符
.lazy（懶）
????????取代?`input`?監(jiān)聽?`change`?事件颖低，焦點失去后觸發(fā)
.number
????????輸入字符串轉(zhuǎn)為有效的數(shù)字
.trim
????????輸入首尾空格過濾
