vue學習筆記(2)－－vue實例和模板語法

一、vue 實例#

1. 創建 vue 實例#

一個 vue 實例應該通過new Vue來創建根實例，所有的 vue 組件其實都是 vue 實例

var vm = new Vue({
  ...
})

當一個實例被創建時，data對象中的 property 都被加入到 vue 的響應式系統中，當值發生改變時，視圖也會改變

var data = {a: 1}

var vm = new Vue({
  data: data
})

此時在控制台輸入vm.a == data.a會返回 true，變量data已經被賦給vue實例中的data對象了

同時，對兩個對象的數據進行操作改變也會影響到另一個

vm.a = 2
// data.a = 2

data.a = 3
// vm.a = 3

當數據改變時，視圖也會重新渲染，如果在 vue 實例被創建後，又添加了一個新的 property，則不會被加入到響應式系統中

如果一開始就知道後面會添加一個 property，但是一開始不存在或為空，需要設置一些初始值

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTods: fasle,
  todos: [],
  error: null
}

使用 Object.freeze () 方法的時候，無法修改數據引起視圖變化

Object.freeze () 方法可以凍結一個對象。一個被冻结的對象再也不能被修改；凍結了一個對象則不能向這個對象添加新的屬性，不能刪除已有屬性，不能修改該對象已有屬性的可枚舉性、可配置性、可寫性，以及不能修改已有屬性的值。此外，凍結一個對象後該對象的原型也不能被修改。freeze () 返回和傳入的參數相同的對象。

<div id="app">{{message}}</div>

<script>
  var data = {message: 'hello,wolrd'}
  Object.freeze(data)

  var vm = new Vue({
    el: '#app',
    data: data
  })
</script>

在控制台改變vm.message的值會直接報錯，因為 data 對象已經被冻结了，不可改變

vm.$data

代表 vue 實例觀察的數據對象

console.log(vm.$data)
// 返回數據對象的數組形式

var data = { a: 1 }
var vm = new Vue({
  el: '#app',
  data: data
})

vm.$data === data // true
vm.$el === document.getElementById('app') // true

2. 生命週期函數#

每個實例在被創建的時候，都要經歷一些初始化過程，比如：設置數據監聽，編譯模板，將實例掛載到 dom，更新 dom 等

在這個過程中會運行一些叫做生命週期的鉤子函數，可以在不同階段添加自己需要的代碼

比如created鉤子可以用來表示一個實例被創建之後執行的代碼

new Vue({
  data: {
    a: 1
  },
  created: function () {
    console.log('a is: ' + this.a)
  }
})
// "a is: 1"

this用來指向 vm 實例

但是不要在 property 或者回調上使用箭頭函數，created: () => console.log(this.a)，因為箭頭函數沒有this的概念，他會把this當作變量一直向上級作用域查找，經常產生Uncaught TypeError: Cannot read property of undefined或Uncaught TypeError: this.myMethod is not a function之類的報錯

二、模板語法#

1. 插值#

最簡單的就是

<div id="app">{{message}}</div>

<script>
    var app = new Vue({
        el: "#app",
        data: {
            message: 'hello,world'
        }
    })
</script>
</script>

。。。

下面這段代碼給input綁定了一個disabled屬性，但是通過ok的真偽來控制屬性是否渲染

當ok為fasle,null,undefined值時，屬性都不會被渲染，有點類似於v-if，但是這種寫法只是針對屬性

<div id="app">
    <input type="text" v-bind:disabled="ok">
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'hello,wolrd',
            ok: false
        }
    })
</script>

在模板語法中還可以使用 javascript 表達式

<div id="app">
    <div>{{number + 1}}</div>
    <div v-bind:id="'list-' + id"></div>
    <div>{{message.split('').reverse().join('')}}</div>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            number: 2,
            id: 'li',
            message: 'hello,wolrd'
        }
    })
</script>

每個模板只能包含一個 javascript 表達式，如果有多個，則不會生效

<!-- 這是語句，不是表達式 -->
{{ var a = 1 }}

<!-- 流控制也不會生效，請使用三元表達式 -->
{{ if (ok) { return message } }}

2. 指令#

參數

一些指令能夠接收一個 “參數”，在指令名稱之後以冒號表示。例如，v-bind指令可以用於響應式地更新 HTML attribute：

<div id="app">
    <a v-bind:href="url">百度</a>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            url: 'https://www.baidu.com'
        }
    })
</script>

在這裡href是參數，告知v-bind指令將該元素的hrefattribute 與表達式url的值綁定

另一個例子是v-on指令，它用於監聽 dom 事件

<a v-on:click="doSomething">...</a>

動態參數

從 2.6.0 開始，可以用方括號括起來的 JavaScript 表達式作為一個指令的參數

<!--注意，參數表達式的寫法存在一些約束，如之後的“對動態參數表達式的約束”章節所述。-->
<a v-bind:[attributeName]="url">...</a>

這裡的attributeName會被作為一個 javascript 表達式進行動態求值，最終結果被作為參數來使用

比如：vue 實例中有一個attributeName屬性其值為href，則這個綁定將等價於v-bind:href

<a v-bind:href="url>...</a>

也可以使用動態的事件名綁定監聽函數

<a v-on:[eventName]="doSomething"> ... </a>

如果eventName值為click，則該綁定等價於v-on:click="doSomething"，一個鼠標點擊事件

對動態參數的值的約束

動態參數預期會求出一個字符串，異常情況下值為null，這個特殊的null值可以被顯性地用於移除綁定。任何其它非字符串類型的值都將會觸發一個警告。

對動態參數表達式的約束

動態參數表達式有一些語法約束，因為某些字符，如空格和引號，放在 HTML attribute 名裡是無效的，例如：

<!-- 這會觸發一個編譯警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

因此，盡量不要使用空格和引號的表達式，或者採用計算屬性來替代這種複雜表達式

在 DOM 中使用模板時 (直接在一個 HTML 文件裡撰寫模板)，還需要避免使用大寫字符來命名鍵名，因為瀏覽器會把 attribute 名全部強制轉為小寫

修飾符

修飾符是以.指明的特殊後綴，用於指出一個指令應該以特殊方式綁定，例如，.prevent修飾符告訴v-on指令對於觸發的事件調用event.preentDefault()

<form v-on:submit.prevent="onSubmit">...</form>

3. 縮寫#

v-前綴作為一種視覺提示，用來識別模板中 Vue 特定的 attribute。當你在使用 Vue.js 為現有標籤添加動態行為 (dynamic behavior) 時，v-前綴很有幫助，然而，對於一些頻繁用到的指令來說，就會感到使用繁瑣。同時，在構建由 Vue 管理所有模板的單頁面應用程序 (SPA - single page application) 時，v-前綴也變得沒那麼重要了。因此，Vue 為v-bind和v-on這兩個最常用的指令，提供了特定簡寫

v-bind

<!-- 完整語法 -->
<a v-bind:href="url">...</a>

<!-- 縮寫 -->
<a :href="url">...</a>

<!-- 動態參數的縮寫 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on

<!-- 完整語法 -->
<a v-on:click="doSomething">...</a>

<!-- 縮寫 -->
<a @click="doSomething">...</a>

<!-- 動態參數的縮寫 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

它們看起來可能與普通的 HTML 略有不同，但:與@對於 attribute 名來說都是合法字符，在所有支持 Vue 的瀏覽器都能被正確地解析。而且，它們不會出現在最終渲染的標記中。縮寫語法是完全可選的，但隨著你更深入地了解它們的作用，你會慶幸擁有它們。