Vue 超清晰思維導(dǎo)圖，帶你詳細(xì)梳理知識(shí)點(diǎn)
Vue思維導(dǎo)圖目錄
MVC與MVVM的區(qū)別Vue基本代碼結(jié)構(gòu)Vue指令Vue組件class和style動(dòng)態(tài)綁定computed計(jì)算屬性EventBusfilter過濾器方法
Vue是一套構(gòu)建用戶界面的框架，只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫或既有項(xiàng)目整合。（Vue有配套的第三方類庫，可以整合起來做大型項(xiàng)目的開發(fā)）
0.MVC 與MVVM的區(qū)別
MVC是后端的分層開發(fā)概念；MVVM是前端視圖層的概念，主要關(guān)注于?視圖層分離。MVVM把前端的視圖層分為了三部分：Model,View,VM ViewModel
1.Vue基本代碼結(jié)構(gòu)
const?vm?=?new?Vue({
?el:'#app',//所有的掛載元素會(huì)被?Vue?生成的?DOM?替換
?data:{?//?this->window?},
?methods:{?//?this->vm},
?//注意，不應(yīng)該使用箭頭函數(shù)來定義?method?函數(shù)?,this將不再指向vm實(shí)例
?props:{}?,//?可以是數(shù)組或?qū)ο箢愋?，用于接收來自父組件的數(shù)據(jù)
?//對象允許配置高級選項(xiàng)，如類型檢測、自定義驗(yàn)證和設(shè)置默認(rèn)值
?watch:{?//?this->vm},
?computed:{},
?render(){},
?//?聲明周期鉤子函數(shù)
})
當(dāng)一個(gè)Vue實(shí)例被創(chuàng)建時(shí)，它將data對象中的所有的property加入到Vue的響應(yīng)式系統(tǒng)中。當(dāng)這些property的值發(fā)生改變時(shí)，視圖將會(huì)產(chǎn)生?響應(yīng)，即匹配更新為新的值。
例外：
Vue實(shí)例外部新增的屬性改變時(shí)不會(huì)更新視圖。Object.freeze()，會(huì)阻止修改現(xiàn)有的property，響應(yīng)系統(tǒng)無法追蹤其變化。
實(shí)例屬性和方法
訪問 el屬性：vm.$el,`document.getElemnetById(‘a(chǎn)pp’)``;訪問 data屬性：vm.$data以 _或$開頭的property不會(huì)被Vue實(shí)例代理，因?yàn)樗鼈兛赡芎?code style="margin-right: 2px;margin-left: 2px;padding: 2px 4px;max-width: 100%;font-size: 14px;border-radius: 4px;background-color: rgba(27, 31, 35, 0.05);font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(53, 179, 120);box-sizing: border-box !important;overflow-wrap: break-word !important;">Vue內(nèi)置的property、API方法沖突。你可以使用例如vm.$data._property的方式訪問這些property。訪問 data中定義的變量：vm.a,vm.$data.a訪問 methods中的方法：vm.方法名()訪問 watch方法：vm.$watch()
不要在選項(xiàng)property或回調(diào)上使用箭頭函數(shù),this將不會(huì)指向Vue實(shí)例 比如created: () => console.log(this.a)或vm.$watch('a', newValue => this.myMethod())。
因?yàn)榧^函數(shù)并沒有this，this會(huì)作為變量一直向上級詞法作用域查找，直至找到為止，經(jīng)常導(dǎo)致Uncaught TypeError: Cannot read property of undefined或Uncaught TypeError: this.myMethod is not a function之類的錯(cuò)誤。
2. Vue指令
插入數(shù)據(jù)：
插值表達(dá)式相當(dāng)于占位符，不會(huì)清空元素中的其他內(nèi)容。直接寫在標(biāo)簽中。會(huì)將 html標(biāo)簽作為文本顯示。v-text會(huì)覆蓋元素中原本的內(nèi)容。寫在開始標(biāo)簽中，以屬性的形式存在。會(huì)將html標(biāo)簽作為文本顯示。v-html（innerHTML）會(huì)覆蓋元素中原本的內(nèi)容，會(huì)將數(shù)據(jù)解析成html標(biāo)簽。
3. Vue組件
組件配置對象和vue實(shí)例的區(qū)別
組件配置對象沒有 el，組件模板定義在template中；組件配置對象中 data是函數(shù)，該函數(shù)返回的對象作為數(shù)據(jù)。
創(chuàng)建組件模板
方法一
var?com?=?Vue.extend({
?//通過template屬性?指定組件要展示的html結(jié)構(gòu)
?template:'這是使用Vue.extend搭建的全局組件
'?
})
方法二：使用對象創(chuàng)建模板
{
?template:'這是使用Vue.extend搭建的全局組件-com3
'??????
}
方法三：使用 template標(biāo)簽（寫在受控區(qū)域外面）創(chuàng)建模板，通過id建立聯(lián)系
"tmpl">?寫在受控區(qū)域外面
??......
</template>?
{?template:'#tmpl'??}
組件中的data是一個(gè)函數(shù)的原因
多次使用該組件，如果修改其中一個(gè)中的數(shù)據(jù)，另一個(gè)也會(huì)改變。 寫成函數(shù)的形式，每次調(diào)用函數(shù)，返回一個(gè)新的對象
ref屬性
獲取 dom元素/組件：標(biāo)簽上添加ref屬性，this.$refs.ref屬性值獲取該dom元素/組件。this.$refs.ref屬性值.變量名獲取組件中的數(shù)據(jù)this.$refs.ref屬性值.方法名()獲取組件中的方法
$parent?和?$children?獲取 父/子組件的數(shù)據(jù)和方法
this.$parent獲取父組件$children由于子組件的個(gè)數(shù)不確定 返回的是一個(gè)數(shù)組 ,不是對象this.$children[0]獲取第一個(gè)子組件
作用域插槽：父組件替換插槽的標(biāo)簽，內(nèi)容由子組件決定。
編譯的作用域：自身的數(shù)據(jù)在自身模板
template標(biāo)簽中生效
插槽上添加?屬性綁定： data=’子組件中的數(shù)據(jù)’父組件通過 template標(biāo)簽，添加slot-scope=’slot’?slot-scope屬性接收子組件中的數(shù)據(jù)slot.datatemplate標(biāo)簽中的html結(jié)構(gòu)替換slot插槽中的默認(rèn)html結(jié)構(gòu)。
4.class和style動(dòng)態(tài)綁定
5.computed 計(jì)算屬性
6.EventBus
7.filter過濾器方法
專注分享當(dāng)下最實(shí)用的前端技術(shù)。關(guān)注前端達(dá)人，與達(dá)人一起學(xué)習(xí)進(jìn)步！
長按關(guān)注"前端達(dá)人"
評論
圖片
表情