Vue學習計划基礎筆記(一) - vue實例

最近又重新看vue的文檔了,計划是別人寫的,之前看過一次,沒有考慮太多,只考慮看懂能用就好.看完之后寫過寫demo,現在是零實際項目經驗的,所以這一次打算細看,算是官方文檔的二次產物吧,但是不是全部直接復制粘貼那種,中間加了些個人見解(或許是誤解)下去,寫出來也好讓別人指正自己.

 

 vue實例

目標：

1、學會創建vue實例

2、掌握vue數據是如何響應的 

3、了解vue實例的屬性和方法

4、理解vue實例的生命周期中各種鈎子的用法，牢記生命周期圖

 

 

前置條件:  引入了vue.js

 

1. Vue實例

1.1 創建實例

Html:

<div id=”app”>{{msg}}</div>

Script:

var vm = new Vue({

el: ‘#app’,      // 綁定元素

data: {

    //數據

msg: ‘Hello’

},

components: {

    //組件聲明

}

// ...還有其他例如計算屬性,偵聽器,周期鈎子等

})

 

1.2 組件也是一個vue實例

 

1. Vue數據響應

MVVM: model(模型層,也就是數據), view(視圖層), ViewModel(視圖模型層)

這里的VM層,代替了傳統MVC模式的C層,實現了視圖和數據指向相互響應的橋梁, vue主要就是充提供了vm層.

Vue中的數據和視圖是相互響應的, 也就是data發生變化,頁面視圖(view)相應的值也會發生變化(更新視圖), 如果這些值決定的是某個數組或者對象,或者樣式的渲染,同樣也會最終讓視圖響應發生變化. 同樣視圖上改變了相應(綁定在視圖的)數據,data也會響應發生變化(更新數據).

 

使用 Object.defineProperty 把這些屬性全部轉為 getter/setter(所以直接打印出來的data也是會看到每個屬性都有一個setter和setter)

 

Object.defineProperty 是 ES5 中一個無法 shim (模擬)的特性，所以Vue 不支持 IE8 以及更低版本瀏覽器。

 

 

 

 

1. Vue實例的屬性(option)

3.1 Data

主要存放數據的地方, 一般也就是會在這里定義數據(這里面的數據都是響應的),很少會在vue實例外面定義(全局)數據.

 

示例:

...

data: {

msg: ‘hello’,

msgList: [‘h’,’e’,’l’,’l’,’o’]

}

...

 

使用data:

(在實例內) 直接使用this.dataname 或 this.$data.dataname

實例外: 實例對象名代替this

在模版中使用就用模板語法

 

3.2 method(方法)

Vue中所有的(普通)方法都放在這里

 

3.3 其他常用屬性

components: { }  //組件

computed: { xx: function( ...;  return ..;)}  //計算屬性, 每個計算屬性都是一個funciton, 這些function是有返回的.

 watch:  { dataname: function(){...} }   //偵聽器, 當watch指定的data發生變化,響應會觸發執行相應的function

 

 

 

1. 生命周期鈎子函數

Vue實例的生命周期: vue實例整個生命周期包括了實例的,初始化,編譯,變化,銷毀等

在每個生命周期都會有相應的鈎子函數,當生命周期到達的時候就會執行.

 

生命周期圖示:

 

(圖侵刪)

...

// 生命周期鈎子函數

beforeCreate() {

console.log('組件准備創建')

},

created() {

console.log('組件已經創建')

},

beforeMount() {

console.log('組件准備安裝')

},

mounted() {

console.log('組件已經安裝')

},

beforeUpdate() {

console.log('組件准備更新')

},

updated() {

console.log('組件已經更新')

},

beforeDestroy() {

console.log('組件准備銷毀')

},

destroyed() {

console.log('組件已經銷毀')

}

...