vue學習筆記（四） Vue例項以及生命週期

1.構造器(例項化)

var vm = new vue(  ------指定元件的渲染和觀察期間未捕獲錯誤的處理函式。

vue.config.ignoredelements = ['my-custom-web-component', 'another-web-component'

]　　　------忽略在vue 之外的自定義元素。

vue.config.keycodes   　　　　　　　　　　　　　------給v-on自定義鍵位別名

vue例項有乙個完整的生命週期，從開始建立、初始化資料、編譯模板、掛載dom、渲染→更新→渲染、解除安裝等一系列過程，我們稱這是vue的生命週期。通俗說就是vue例項從建立到銷毀的過程，就是生命週期。

**自：

那麼下面我們來進行測試一下

var myvue=new vue(,

beforecreate:function(),
created:function(),
beforemount:function(),
mounted:function(),
beforeupdate:function(),
updated:function(),
beforedestroy:function(),
destroyed:function()
})

由上圖可知：

1、beforecreate 此時$el、data 的值都為undefined

2、create之後，此時可以拿到data的值，但是$el依舊為undefined

3、mount之前，$el的值為「虛擬」的元素節點

4、mount之後，mounted之前，「虛擬」的dom節點被真實的dom節點替換，並將其插入到dom樹中，於是在觸發mounted時，可以獲取到$el為真實的dom元素()

接著，在console中修改data，更新檢視

觸發beforeupdata 和updated

接著，執行myvue.$destroy()

總結一下，對官方文件的那張圖簡化一下，就得到了這張圖

**自：

再看乙個綜合的實戰的例子，可能涉及到ajax和元件，不過先看一下vue的生命週期的例子的用法：

import axios from 'axios'       //

這是乙個輕量級的ajax庫，import是es6模組匯入的語法。
export default ,
data: 
function
() },
mounted: 
function () 
}).then(
function
(res) .bind(
this
)) })
}}

Vue學習計畫基礎筆記 一 vue例項

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

vue學習 vue例項（instance）

這一章主要是列舉vue例項一些實用的方法和屬性，大概講解一下用到的地方，有些涉及元件部分的屬性，暫時跳過，待到學完元件章節，再回過頭來補充。主要講解 vue instance宣告方式 vue instance上的屬性 vue instance上的方法 vue instance宣告方式 const v...

vue學習筆記 vue元件

元件 是頁面的一部分，將介面切分成部分，每部分稱為 元件 定義乙個全域性的元件，元件支援 駝峰命名 規則 vue.component todoitem 迴圈遍歷 list 每一次遍歷都把值給 item item 再通過 v bind 把值傳遞給 content compoent 通過 props 獲...