vue學習筆記 2 vue簡介

本次學習主要來自官網的教程

vue應用是由乙個根vue例項開始的。vue會將資料繫結到data中,當data資料改變時也會導致檢視的改變【觀察者模式】，可以實現資料的雙向繫結【響應式】。vue例項中的屬性可以通過$+屬性名的方式獲取,入$data

vue是在初始化時繫結資料的，如果初始化後再次新增元素，則不會導致檢視的變化。

vue例項初始化過程包含了一系列的過程，這些過程包含了設定資料監聽、編譯模板、掛載例項到dom、在資料更新時更新dom等。在此過程中會有一些生命週期鉤子(lifecyle hook)函式，可以在此過程中新增自己的**，實現各項功能。

vue生命週期圖示如下：

vue模板都是合法的html,它是基於html語法的。vue會將模板渲染成為虛擬dom。

vue可以通過jsx語法來通過render函式實現dom的渲染。

vue使用}來進行插值，即佔位符。類似於freemaker。}插入的是文字字串，如果使用v-html則會插入實際的html**[這樣會導致xss，謹慎使用]。

vue常用指令：

v-if和v-for在渲染時盡量復用已有的dom結構，對於v-if僅僅改變繫結的值，dom結構並不會重新生成。v-for在渲染時若值相同不會再生成。可以使用key來令vue生成新dom

vue觸發響應的陣列或者物件的操作見下圖：