Vue思維導圖目錄
MVC與MVVM的區別Vue基本代碼結構Vue指令Vue組件class和style動態綁定computed計算屬性EventBusfilter過濾器方法
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:'<h3>這是使用Vue.extend搭建的全局組件</h3>'
})
- 方法二：使用對象創建模板
{
template:'<h3>這是使用Vue.extend搭建的全局組件-com3</h3>'
}
- 方法三：使用
template標籤（寫在受控區域外面）創建模板，通過id建立聯繫
<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過濾器方法
