Vue知識點梳理-思維導圖
-
- 0.MVC 與MVVM的差別
- 1.Vue基本代碼結構
- 2. Vue指令
- 3. Vue元件
- 4.class和style動态綁定
- 5.computed 計算屬性
- 6.EventBus
- 7.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:'<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過濾器方法
本文總結自
- https://blog.csdn.net/Conradine_Lian/article/details/106884122?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param
- https://blog.csdn.net/ZiChen_Jiang/article/details/107806841
僅供學習使用，如若侵權，請聯系删除