Vue思維導(dǎo)圖目錄

MVC與MVVM的區(qū)別

Vue基本代碼結(jié)構(gòu)

Vue指令

Vue組件

class和style動(dòng)態(tài)綁定

computed計(jì)算屬性

EventBus

filter過(guò)濾器方法

Vue是一套構(gòu)建用戶界面的框架，只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合。(Vue有配套的第三方類庫(kù)，可以整合起來(lái)做大型項(xiàng)目的開(kāi)發(fā))

0.MVC 與MVVM的區(qū)別

• MVC是后端的分層開(kāi)發(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ù)來(lái)定義?method?函數(shù)?,this將不再指向vm實(shí)例
?props:{}?,//?可以是數(shù)組或?qū)ο箢愋?#xff0c;用于接收來(lái)自父組件的數(shù)據(jù)
?//對(duì)象允許配置高級(jí)選項(xiàng)，如類型檢測(cè)、自定義驗(yàn)證和設(shè)置默認(rèn)值
?watch:{?//?this->vm},
?computed:{},
?render(){},
?//?聲明周期鉤子函數(shù)
})

當(dāng)一個(gè)Vue實(shí)例被創(chuàng)建時(shí)，它將data對(duì)象中的所有的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)無(wú)法追蹤其變化。

實(shí)例屬性和方法

• 訪問(wèn)el屬性：vm.$el,`document.getElemnetById(‘a(chǎn)pp’)``;
• 訪問(wèn)data屬性：vm.$data
• 以_或$開(kāi)頭的property不會(huì)被Vue實(shí)例代理，因?yàn)樗鼈兛赡芎蚔ue內(nèi)置的property、API方法沖突。你可以使用例如vm.$data._property的方式訪問(wèn)這些property。
• 訪問(wèn)data中定義的變量：vm.a,vm.$data.a
• 訪問(wèn)methods中的方法：vm.方法名()
• 訪問(wèn)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ù)并沒(méi)有this，this會(huì)作為變量一直向上級(jí)詞法作用域查找，直至找到為止，經(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)容。寫在開(kāi)始標(biāo)簽中，以屬性的形式存在。會(huì)將html標(biāo)簽作為文本顯示。
• v-html(innerHTML)會(huì)覆蓋元素中原本的內(nèi)容，會(huì)將數(shù)據(jù)解析成html標(biāo)簽。

3. Vue組件

組件配置對(duì)象和vue實(shí)例的區(qū)別

• 組件配置對(duì)象沒(méi)有el，組件模板定義在template中；
• 組件配置對(duì)象中data是函數(shù)，該函數(shù)返回的對(duì)象作為數(shù)據(jù)。

創(chuàng)建組件模板

• 方法一

var?com?=?Vue.extend({
?//通過(guò)template屬性?指定組件要展示的html結(jié)構(gòu)
?template:'

這是使用Vue.extend搭建的全局組件

'?
})

• 方法二：使用對(duì)象創(chuàng)建模板

{
?template:'

這是使用Vue.extend搭建的全局組件-com3

'??????
}

• 方法三：使用template標(biāo)簽(寫在受控區(qū)域外面)創(chuàng)建模板，通過(guò)id建立聯(lián)系

"tmpl">?寫在受控區(qū)域外面
??......
</template>?
{?template:'#tmpl'??}

組件中的data是一個(gè)函數(shù)的原因

• 多次使用該組件，如果修改其中一個(gè)中的數(shù)據(jù)，另一個(gè)也會(huì)改變。
• 寫成函數(shù)的形式，每次調(diào)用函數(shù)，返回一個(gè)新的對(duì)象

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ù)組 ,不是對(duì)象
• this.$children[0]獲取第一個(gè)子組件

作用域插槽：父組件替換插槽的標(biāo)簽，內(nèi)容由子組件決定。

編譯的作用域：自身的數(shù)據(jù)在自身模板template標(biāo)簽中生效

• 插槽上添加?屬性綁定：data=’子組件中的數(shù)據(jù)’
• 父組件通過(guò)template標(biāo)簽，添加slot-scope=’slot’?slot-scope屬性接收子組件中的數(shù)據(jù)slot.data
• template標(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過(guò)濾器方法

訪問(wèn)?1024.Cool看更多精彩文章

總結(jié)

以上是生活随笔為你收集整理的slot传函数 vue_面试必备 Vue 知识点的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。