最近又重新看vue的文件了,計畫是別人寫的,之前看過一次,沒有考慮太多,只考慮看懂能用就好.看完之後寫過寫demo,現在是零實際專案經驗的,所以這一次打算細看,算是官方文件的二次產物吧,但是不是全部直接複製貼上那種,中間加了些個人見解(或許是誤解)下去,寫出來也好讓別人指正自己.
vue例項
目標：
1、學會建立vue例項
2、掌握vue資料是如何響應的
3、了解vue例項的屬性和方法
4、理解vue例項的生命週期中各種鉤子的用法，牢記生命週期圖
前置條件: 引入了
vue.js
vue例項
1.1 建立例項
html:1.2 元件也是乙個vue例項<
div
id>}
div>
script:
var vm = new vue(,
components:
// ...還有其他例如計算屬性,偵聽器,週期鉤子等
})
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 以及更低版本瀏覽器。
vue例項的屬性(option)
3.1 data
主要存放資料的地方, 一般也就是會在這裡定義資料(這裡面的資料都是響應的),很少會在vue例項外面定義(全域性)資料.
示例:
...使用data:data:
...
(在例項內) 直接使用this.dataname 或 this.$data.dataname
例項外: 例項物件名代替this
在模版中使用就用模板語法
3.2 method(方法)
vue中所有的(普通)方法都放在這裡
3.3 其他常用屬性
components: //元件
computed: //計算屬性, 每個計算屬性都是乙個funciton, 這些function是有返回的.
watch: } //偵聽器, 當watch指定的data發生變化,響應會觸發執行相應的function
生命週期鉤子函式
vue例項的生命週期: vue例項整個生命週期包括了例項的,初始化,編譯,變化,銷毀等
在每個生命週期都會有相應的鉤子函式,當生命週期到達的時候就會執行.
生命週期圖示:
(圖侵刪)
...//生命週期鉤子函式
beforecreate() ,
created() ,
beforemount() ,
mounted() ,
beforeupdate() ,
updated() ,
beforedestroy() ,
destroyed()
...
vue學習筆記 vue基礎（一）
vue框架提供了乙個vue的建構函式 類 我們通過例項化vue，產生乙個vue物件，來構建應用 例如 new vue 在例項化vue的時候，傳入一些配置引數這些配置引數在vue官網的api中可以找到 選項 new vue 使用者看到的介面 產生頁面檢視的基礎結構 html 插值表示式 new vue...
Vue基礎語法（上） vue學習筆記
剛接觸一門程式語言或者框架，我們都應該先熟悉其基本語法，以及使用框架的基礎步驟，即使你是程式設計高手，熟悉並且熟練使用這些語法之後，首先可以提高編碼效率，其次，編碼的過程中也會運用的得心應手，順手拈來！學習基本語法，我們就以標籤引入html檔案的方式來學習，這樣對學習語法更加簡潔直觀，後邊再學習到工...
Vue模版基礎語法 Vue筆記 一
在vue模版中資料寫在 內，可以與vue例項data中的資料實現單向繫結，資料改變檢視改變 可為以下型別 1 js 資料 2 表示式輸出表示式執行結果 3 三元運算子運算結果 4 data中的key的vlaue 5 methods中函式執行的return返回值 data vue例項下的物件，valu...