Vue思維導圖目錄

MVC與MVVM的區別

Vue基本代碼結構

Vue指令

Vue組件

class和style動態綁定

computed計算屬性

EventBus

filter過濾器方法

Vue是一套構建用戶界面的框架，只關注視圖層，它不僅易于上手，還便于與第三方庫或既有項目整合。(Vue有配套的第三方類庫，可以整合起來做大型項目的開發)

0.MVC 與MVVM的區別

• MVC是后端的分層開發概念；
• MVVM是前端視圖層的概念，主要關注于?視圖層分離。MVVM把前端的視圖層分為了三部分：Model,View,VM ViewModel

1.Vue基本代碼結構

const?vm?=?new?Vue({
?el:'#app',//所有的掛載元素會被?Vue?生成的?DOM?替換
?data:{?//?this->window?},
?methods:{?//?this->vm},
?//注意，不應該使用箭頭函數來定義?method?函數?,this將不再指向vm實例
?props:{}?,//?可以是數組或對象類型，用于接收來自父組件的數據
?//對象允許配置高級選項，如類型檢測、自定義驗證和設置默認值
?watch:{?//?this->vm},
?computed:{},
?render(){},
?//?聲明周期鉤子函數
})

當一個Vue實例被創建時，它將data對象中的所有的property加入到Vue的響應式系統中。當這些property的值發生改變時，視圖將會產生?響應，即匹配更新為新的值。

例外：

• Vue實例外部新增的屬性改變時不會更新視圖。
• Object.freeze()，會阻止修改現有的property，響應系統無法追蹤其變化。

實例屬性和方法

• 訪問el屬性：vm.$el,`document.getElemnetById(‘app’)``;
• 訪問data屬性：vm.$data
• 以_或$開頭的property不會被Vue實例代理，因為它們可能和Vue內置的property、API方法沖突。你可以使用例如vm.$data._property的方式訪問這些property。
• 訪問data中定義的變量：vm.a,vm.$data.a
• 訪問methods中的方法：vm.方法名()
• 訪問watch方法：vm.$watch()

不要在選項property或回調上使用箭頭函數,this將不會指向Vue實例 比如created: () => console.log(this.a)或vm.$watch('a', newValue => this.myMethod())。

因為箭頭函數并沒有this，this會作為變量一直向上級詞法作用域查找，直至找到為止，經常導致Uncaught TypeError: Cannot read property of undefined或Uncaught TypeError: this.myMethod is not a function之類的錯誤。

2. Vue指令

插入數據：

• 插值表達式相當于占位符，不會清空元素中的其他內容。直接寫在標簽中。會將html標簽作為文本顯示。
• v-text會覆蓋元素中原本的內容。寫在開始標簽中，以屬性的形式存在。會將html標簽作為文本顯示。
• v-html(innerHTML)會覆蓋元素中原本的內容，會將數據解析成html標簽。

3. Vue組件

組件配置對象和vue實例的區別

• 組件配置對象沒有el，組件模板定義在template中；
• 組件配置對象中data是函數，該函數返回的對象作為數據。

創建組件模板

• 方法一

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

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

'?
})

• 方法二：使用對象創建模板

{
?template:'

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

'??????
}

• 方法三：使用template標簽(寫在受控區域外面)創建模板，通過id建立聯系

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

組件中的data是一個函數的原因

• 多次使用該組件，如果修改其中一個中的數據，另一個也會改變。
• 寫成函數的形式，每次調用函數，返回一個新的對象

ref屬性

• 獲取dom元素/組件：標簽上添加ref屬性，this.$refs.ref屬性值獲取該dom元素/組件。
• this.$refs.ref屬性值.變量名獲取組件中的數據
• this.$refs.ref屬性值.方法名()獲取組件中的方法

$parent?和?$children?獲取 父/子組件的數據和方法

• this.$parent獲取父組件
• $children由于子組件的個數不確定 返回的是一個數組 ,不是對象
• this.$children[0]獲取第一個子組件

作用域插槽：父組件替換插槽的標簽，內容由子組件決定。

編譯的作用域：自身的數據在自身模板template標簽中生效

• 插槽上添加?屬性綁定：data=’子組件中的數據’
• 父組件通過template標簽，添加slot-scope=’slot’?slot-scope屬性接收子組件中的數據slot.data
• template標簽中的html結構替換slot插槽中的默認html結構。

4.class和style動態綁定

5.computed 計算屬性

6.EventBus

7.filter過濾器方法

訪問?1024.Cool看更多精彩文章

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。