一. vue簡(jiǎn)介
- 傳統(tǒng)前端開發(fā)模式（MVP）
MVP 全稱：Model-View-Presenter ；MVP 是從經(jīng)典的模式MVC演變而來
- Model：模型層妆毕，負(fù)責(zé)提供數(shù)據(jù)
- View：視圖層慎玖，負(fù)責(zé)顯示。
- Controller/Presenter：控制器笛粘，負(fù)責(zé)邏輯的處理
-
Vue 的MVVM模式
MVVM是Model-View-ViewModel的簡(jiǎn)寫趁怔。它本質(zhì)上就是MVC 的改進(jìn)版。MVVM 就是將其中的View 的狀態(tài)和行為抽象化薪前，讓我們將視圖 UI 和業(yè)務(wù)邏輯分開润努。
MVVM（Model-View-ViewModel）框架的由來便是MVP（Model-View-Presenter）模式與WPF結(jié)合的應(yīng)用方式時(shí)發(fā)展演變過來的一種新型架構(gòu)框架。它立足于原有MVP框架并且把WPF的新特性糅合進(jìn)去示括，以應(yīng)對(duì)客戶日益復(fù)雜的需求變化铺浇。
MVVM模式.png
二. Vue 簡(jiǎn)單了解
- 組件創(chuàng)建
通過new Vue({})接管元素，進(jìn)行Vue處理垛膝。
通過Vue.component({})創(chuàng)建組件 - 簡(jiǎn)單的組件間傳值和函數(shù)處理鳍侣。
父組件向子組件傳值，通過v-bind傳值
子組件接受父組件的傳值吼拥，通過props接受
通過methods進(jìn)行事件處理倚聚。
v-model //數(shù)據(jù)的雙向綁定
v-on //處理用戶輸入
v-for //條件與循環(huán)
v-if //條件與循環(huán)
v-bind //聲明式渲染
三. Vue的生命周期函數(shù)
- 生命周期函數(shù)，就是vue實(shí)例在某一個(gè)時(shí)間點(diǎn)會(huì)自動(dòng)執(zhí)行的函數(shù)凿可。
- vue 的模板語法
v-text //和{{}}一樣
v-html //不會(huì)轉(zhuǎn)義 <h1/>等標(biāo)簽
四. vue基礎(chǔ)語法
1. 模板語法
插值
- 文本
數(shù)據(jù)綁定最常見的形式就是使用“Mustache”語法 (雙大括號(hào)) 的文本插值：
<span>Message: {{ msg }}</span>
v-once //執(zhí)行一次性的插值 - 原始HTML
v-html //絕不要對(duì)用戶提供的內(nèi)容使用插值惑折，容易導(dǎo)致XSS攻擊
指令
指令 (Directives) 是帶有 v- 前綴的特殊特性。
- 參數(shù)
一些指令能夠接收一個(gè)“參數(shù)”，在指令名稱之后以冒號(hào)表示惨驶。
v-bind
v-on
- 動(dòng)態(tài)參數(shù)
- 縮寫
v-bind:herf="url" //縮寫 :href="url"
v-on:click="doSomething" //縮寫 :@click="doSomething"
2. 計(jì)算屬性和偵聽器
計(jì)算屬性
模板內(nèi)的表達(dá)式非常便利白热，但是設(shè)計(jì)它們的初衷是用于簡(jiǎn)單運(yùn)算的。在模板中放入太多的邏輯會(huì)讓模板過重且難以維護(hù)粗卜。
所以屋确，對(duì)于任何復(fù)雜邏輯，你都應(yīng)當(dāng)使用計(jì)算屬性休建。
- 計(jì)算屬性緩存vs方法
計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的乍恐。只在相關(guān)響應(yīng)式依賴發(fā)生改變時(shí)它們才會(huì)重新求值。 - 計(jì)算屬性vs偵聽屬性
Vue 提供了一種更通用的方式來觀察和響應(yīng) Vue 實(shí)例上的數(shù)據(jù)變動(dòng)：偵聽屬性测砂。 - 計(jì)算屬性的
setter
計(jì)算屬性默認(rèn)只有 getter 茵烈，不過在需要時(shí)你也可以提供一個(gè) setter ：
偵聽器
雖然計(jì)算屬性在大多數(shù)情況下更合適，但有時(shí)也需要一個(gè)自定義的偵聽器砌些。這就是為什么 Vue 通過 watch 選項(xiàng)提供了一個(gè)更通用的方法呜投，來響應(yīng)數(shù)據(jù)的變化。當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)存璃，這個(gè)方式是最有用的仑荐。
3. Class與Style綁定
綁定HTML Class
操作元素的 class 列表和內(nèi)聯(lián)樣式是數(shù)據(jù)綁定的一個(gè)常見需求。因?yàn)樗鼈兌际菍傩宰荻晕覀兛梢杂?v-bind 處理它們：只需要通過表達(dá)式計(jì)算出字符串結(jié)果即可粘招。不過，字符串拼接麻煩且易錯(cuò)偎球。因此洒扎，在將 v-bind 用于 class 和 style 時(shí)，Vue.js 做了專門的增強(qiáng)衰絮。表達(dá)式結(jié)果的類型除了字符串之外袍冷，還可以是對(duì)象或數(shù)組。
- 對(duì)象語法
v-bind:class="{ active: isActive, 'text-danger': hasError }" - 數(shù)組語法
<div v-bind:class="[activeClass, errorClass]"></div> - 用在組件上
當(dāng)在一個(gè)自定義組件上使用 class 屬性時(shí)猫牡，這些類將被添加到該組件的根元素上面胡诗。這個(gè)元素上已經(jīng)存在的類不會(huì)被覆蓋。
綁定內(nèi)聯(lián)樣式
- 對(duì)象語法
v-bind:style 的對(duì)象語法十分直觀——看著非常像 CSS淌友，但其實(shí)是一個(gè) JavaScript 對(duì)象煌恢。CSS 屬性名可以用駝峰式 (camelCase) 或短橫線分隔 (kebab-case，記得用引號(hào)括起來) 來命名： - 數(shù)組語法
- 自動(dòng)添加前綴
- 多重值
4. 條件渲染
v-if
v-if指令用于條件性地渲染一塊內(nèi)容震庭。這塊內(nèi)容只會(huì)在指令的表達(dá)式返回 truthy 值的時(shí)候被渲染症虑。
- 在
<template>元素上使用v-if條件渲染分組 v-elsev-else-if- 用
key管理可復(fù)用的元素
v-show
v-show 只是簡(jiǎn)單地切換元素的 CSS 屬性 display。
v-if 和v-show
有本質(zhì)的區(qū)別：一般來說归薛，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此主籍，如果需要非常頻繁地切換习贫，則使用 v-show 較好；如果在運(yùn)行時(shí)條件很少改變千元，則使用 v-if 較好苫昌。
v-if 和v-for
當(dāng) v-if 與 v-for 一起使用時(shí)，v-for 具有比 v-if 更高的優(yōu)先級(jí)幸海。
不推薦同時(shí)使用祟身。
5. 列表渲染
v-for
v-for 指令基于一個(gè)數(shù)組來渲染一個(gè)列表。v-for 指令需要使用 item in items 形式的特殊語法物独。
在 v-for 塊中袜硫，我們可以訪問所有父作用域的屬性。v-for 還支持一個(gè)可選的第二個(gè)參數(shù)挡篓，即當(dāng)前項(xiàng)的索引婉陷。<div v-for="(item, index) in items"></div>
在v-for里使用對(duì)象
你也可以用 v-for 來遍歷一個(gè)對(duì)象的屬性。
<div v-for="(value, name, index) in object"></div>
維護(hù)狀態(tài)
只適用于不依賴子組件狀態(tài)或臨時(shí) DOM 狀態(tài) (例如：表單輸入值) 的列表渲染輸出官研。
數(shù)組更新機(jī)制
- 變異方法
Vue 將被偵聽的數(shù)組的變異方法進(jìn)行了包裹秽澳，所以它們也將會(huì)觸發(fā)視圖更新。
push() //返回新長(zhǎng)度
unshift(） //返回新長(zhǎng)度
pop() //返回刪除的元素
shift() //返回刪除的元素
splice()
sort()
reverse()
- 替換數(shù)組
變異方法戏羽，顧名思義担神，會(huì)改變調(diào)用了這些方法的原始數(shù)組。相比之下始花，也有非變異 (non-mutating method) 方法龙优，例如 filter()劲适、concat() 和 slice() 。它們不會(huì)改變?cè)紨?shù)組，而總是返回一個(gè)新數(shù)組恭朗。當(dāng)使用非變異方法時(shí)，可以用新數(shù)組替換舊數(shù)組：
- 注意事項(xiàng)
由于 JavaScript 的限制被啼，Vue 不能檢測(cè)以下數(shù)組的變動(dòng)：
1.當(dāng)你利用索引直接設(shè)置一個(gè)數(shù)組項(xiàng)時(shí)曾撤，例如：vm.items[indexOfItem] = newValue
當(dāng)你修改數(shù)組的長(zhǎng)度時(shí)，例如：vm.items.length = newLength
四. vue 簡(jiǎn)單使用
- 計(jì)算屬性和偵聽器
（1）溜族、 計(jì)算屬性
computed:{} //緩存機(jī)制讹俊，提高執(zhí)行效率
當(dāng)模板渲染中遇到帶有邏輯計(jì)算的顯示，可以考慮使用計(jì)算屬性煌抒。
緩存機(jī)制舉例：a = b + c; a依賴于b和c仍劈，只有在b和c變更的時(shí)候，a才會(huì)變寡壮。
計(jì)算屬性默認(rèn)只有 getter 贩疙，不過在需要時(shí)你也可以提供一個(gè) setter ：
（2）讹弯、偵聽器
watch:{}
- vue 的樣式綁定
1、對(duì)象
2这溅、數(shù)組 - vue條件渲染
v-if
v-else
v-else-if
v-show
- v-if 指令用于條件性地渲染一塊內(nèi)容组民。這塊內(nèi)容只會(huì)在指令的表達(dá)式返回 truthy 值的時(shí)候被渲染。
- Vue 會(huì)盡可能高效地渲染元素悲靴，通常會(huì)復(fù)用已有元素而不是從頭開始渲染臭胜。這么做除了使 Vue 變得非常快之外癞尚，還有其它一些好處耸三。例如，如果你允許用戶在不同的登錄方式之間切換
vue列表渲染
1浇揩、變異方法//針對(duì)數(shù)組
2仪壮、改變引用//針對(duì)數(shù)組和對(duì)象
3、templete占位符vue的
set方法用于對(duì)象數(shù)據(jù)更新
Vue.set(vm.userInfo, 'name', '李四')
五. vue 高級(jí)使用
- 組件使用注意點(diǎn)
- 在使用
<ul></ul>,<tr></tr>,<select></select>等元素時(shí)临燃，如果需要在這些標(biāo)簽里嵌套子組件使用睛驳。html5編碼規(guī)則不允許在這些標(biāo)簽寫其他組件，恰當(dāng)使用is="row"可以解決膜廊。 - 關(guān)于vue實(shí)例中乏沸。vue的
data使用。vue根實(shí)例的data類型為對(duì)象爪瓜，子組件中的data必須為函數(shù)蹬跃。目的：子組件可能為多個(gè)地方使用，data函數(shù)返回單獨(dú)的數(shù)據(jù)铆铆，而非多個(gè)組件共用同一個(gè)data蝶缀。 - vue的ref的使用。vue不建議直接操作dom薄货，需要的時(shí)候可用ref翁都。可用在標(biāo)簽和組件上谅猾。
- 父子組件數(shù)據(jù)傳值
- 父組件向子組件傳遞數(shù)據(jù)柄慰，通過屬性的形式。和
react一樣税娜，都是單向數(shù)據(jù)流坐搔。 - 子組件向父組件傳值，通過事件的形式敬矩，
this.$emit(evn, params)
- 組件參數(shù)校驗(yàn)與非props特性
- 組件參數(shù)校驗(yàn)：子組件接受父組件的傳值概行，通過
props可以限制傳值的類型』≡溃或者更復(fù)雜的凳忙，長(zhǎng)度等等业踏。屬性值不會(huì)顯示在最外層標(biāo)簽之上。 - 非props特性：子組件沒有
props接受消略，不能使用堡称。屬性值會(huì)顯示在最外層標(biāo)簽之上。
- 給組件綁定元素事件
- 可以和
react一致的只有艺演。在組件名稱上定義事件，組件內(nèi)部使用桐臊。不方便胎撤。 - 可以使用
@click.native="handleClick"，直接調(diào)用組件內(nèi)部的原生dom函數(shù)断凶。
- 非父子組件之間的傳值
- vuex等數(shù)據(jù)管理框架
- Bus/總線/發(fā)布訂閱模式/觀察者模式
- vue中使用插槽（slot）
可以更方便的向子組件中插入dom元素 - vue的作用域插槽
slot-scope -
動(dòng)態(tài)組件與v-once指令
vue動(dòng)畫.png
六. vue 實(shí)戰(zhàn)
- 路由
路由：就是根據(jù)網(wǎng)址的不同伤提，返回不同的內(nèi)容給用戶。
