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:'<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過濾器方法

原作者姓名：1024 FED
原出處：騰訊云
原文鏈接：面試必備 Vue 知識點 - 云+社區 - 騰訊云

總結

以上是生活随笔為你收集整理的vue data数据修改_Vue 超清晰思维导图（7张），详细知识点梳理！的全部內容，希望文章能夠幫你解決所遇到的問題。

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