vue data資料修改_Vue 超清晰思維導圖（7張），詳細知識點梳理！

Vue思維導圖目錄

1. MVC

   與

   MVVM

   的差別

2. Vue

   基本代碼結構

3. Vue

   指令

4. Vue

   元件

5. class

   和

   style

   動态綁定

6. computed

   計算屬性

7. EventBus

8. 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 知識點 - 雲+社群 - 騰訊雲