本文為轉載，原文：Vue學習筆記入門篇——數據及DOM

數據

data

類型

Object | Function

詳細

Vue 實例的數據對象。Vue 將會遞歸將 data 的屬性轉換為 getter/setter，從而讓 data 的屬性能夠響應數據變化。對象必須是純粹的對象(含有零個或多個的key/value對)：瀏覽器 API 創建的原生對象，原型上的屬性會被忽略。大概來說，data 應該只能是數據 - 不推薦觀察擁有狀態行為的對象。

一旦觀察過，不需要再次在數據對象上添加響應式屬性。因此推薦在創建實例之前，就聲明所有的根級響應式屬性。

實例創建之后，可以通過 vm.$data 訪問原始數據對象。Vue 實例也代理了 data 對象上所有的屬性，因此訪問 vm.a 等價于訪問 vm.$data.a。

以 _ 或 $ 開頭的屬性 不會 被 Vue 實例代理，因為它們可能和 Vue 內置的屬性、 API 方法沖突。你可以使用例如 vm.$data._property 的方式訪問這些屬性。

當一個組件被定義， data 必須聲明為返回一個初始數據對象的函數，因為組件可能被用來創建多個實例。如果 data 仍然是一個純粹的對象，則所有的實例將共享引用同一個數據對象！通過提供 data 函數，每次創建一個新實例后，我們能夠調用 data 函數，從而返回初始數據的一個全新副本數據對象。

如果需要，可以通過將 vm.$data 傳入 JSON.parse(JSON.stringify(…)) 得到深拷貝的原始數據對象。
示例代碼：

var data = { a: 1 } // 直接創建一個實例 var vm = new Vue({data: data }) vm.a // -> 1 vm.$data === data // -> true // Vue.extend() 中 data 必須是函數 var Component = Vue.extend({data: function () {return { a: 1 }} })

?

method

類型:

{ [key: string]: Function }

詳細

methods 將被混入到 Vue 實例中。可以直接通過 VM 實例訪問這些方法，或者在指令表達式中使用。方法中的 this 自動綁定為 Vue 實例。
示例代碼：

<div id="app-method"><button @click="click">click me</button> </div> var app_method = new Vue({el:'#app-method',methods:{click:function () {alert(this.getMessage())},getMessage:function () {return 'hello chain'}} })

?

點擊按鈕后，結果如下：

watch

類型

{ [key: string]: string | Function | Object }

詳細

一個對象，鍵是需要觀察的表達式，值是對應回調函數。值也可以是方法名，或者包含選項的對象。Vue 實例將會在實例化時調用 $watch()，遍歷 watch 對象的每一個屬性。
示例代碼：

<div id="app-watch"><p>First Name: <input type="text" v-model="firstname"></p><p>Last Name: <input type="text" v-model="lastname"></p><p>{{fullname}}</p> </div> var app_watch = new Vue({el:'#app-watch',data:{firstname:'',lastname:'',fullname:''},watch:{firstname:function (newVal, oldVal) {this.fullname = newVal + ' ' + this.lastname},lastname:function (newVal, oldVal) {this.fullname = this.firstname + ' ' + newVal}} })

?

在輸入框內輸入內容，便可看到如下結果：

computed

類型

{ [key: string]: Function | { get: Function, set: Function } }

詳細

計算屬性將被混入到 Vue 實例中。所有 getter 和 setter 的 this 上下文自動地綁定為 Vue 實例。

計算屬性的結果會被緩存，除非依賴的響應式屬性變化才會重新計算。注意，如果實例范疇之外的依賴 (比如非響應式的 not reactive) 是不會觸發計算屬性更新的。
示例代碼：

<div id="app-computed"><p>Original message: "{{ message }}"</p><p>Computed reversed message: "{{ reversedMessage }}"</p> </div> var app_computed = new Vue({el:'#app-computed',data:{message:'hello chain'},computed:{reversedMessage:function () {return this.message.split('').reverse().join('')}} })

?

運行結果如下圖：

computed與methods對比

我們可以將同一函數定義為一個 method 而不是一個計算屬性。對于最終的結果，兩種方式確實是相同的。然而，不同的是計算屬性是基于它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時才會重新求值。這就意味著只要 message 還沒有發生改變，多次訪問 reversedMessage 計算屬性會立即返回之前的計算結果，而不必再次執行函數。

computed與watch對比

Vue 確實提供了一種更通用的方式來觀察和響應 Vue 實例上的數據變動：watch 屬性。當你有一些數據需要隨著其它數據變動而變動時，你很容易濫用 watch——特別是如果你之前使用過 AngularJS。然而，通常更好的想法是使用 computed 屬性而不是命令式的 watch 回調。
例如之前講到watch的時候的那個例子，如果換成computed的話，代碼如下：

<div id="app-computed-watch"><p>First Name: <input type="text" v-model="firstname"></p><p>Last Name: <input type="text" v-model="lastname"></p><p>{{fullname}}</p> </div> var app_computed_watch = new Vue({el:'#app-computed-watch',data:{firstname:'',lastname:''},computed:{fullname:function () {return this.firstname + ' ' + this.lastname}} })

?

運行結果如下:

在這種場合下，這種寫法是不是更好呢？答案是肯定的。

DOM

el

類型

string | HTMLElement

限制

只在由 new 創建的實例中遵守。

詳細

提供一個在頁面上已存在的 DOM 元素作為 Vue 實例的掛載目標。可以是 CSS 選擇器，也可以是一個 HTMLElement 實例。

在實例掛載之后， 元素可以用 vm.$el 訪問。

如果這個選項在實例化時有作用，實例將立即進入編譯過程，否則，需要顯式調用 vm.$mount() 手動開啟編譯。

template

類型

string

詳細

一個字符串模板作為 Vue 實例的標識使用。模板將會 替換 掛載的元素。掛載元素的內容都將被忽略，除非模板的內容有分發 slot。

如果值以 # 開始，則它用作選項符，將使用匹配元素的 innerHTML 作為模板。
例如：

Vue.component('child-component', {template: '<div v-show="someChildProperty">Child</div>',data: function () {return {someChildProperty: true}} })

?

完

轉載請注明出處
上一節：Vue學習筆記入門篇——安裝及常用指令介紹
返回目錄

轉載于:https://www.cnblogs.com/ChainZhang/p/7130479.html

總結

以上是生活随笔為你收集整理的Vue学习笔记入门篇——数据及DOM的全部內容，希望文章能夠幫你解決所遇到的問題。

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