首頁  >  文章  >  web前端  >  vue學習筆記(2)--vue簡介

vue學習筆記(2)--vue簡介

不言
不言原創
2018-03-31 10:16:201303瀏覽

這篇文章和大家分享了Vue的簡介的一些內容,有興趣的朋友可以看一下

這次學習主要來自官網的教程https://cn.vuejs.org/v2/ guide

一Vue實例

vue應用程式是由一個根Vue實例開始的。 Vue會將資料綁定到data中,當data資料改變時也會導致視圖的改變【觀察者模式】,可以實現資料的雙向綁定【響應式】。 vue實例中的屬性可以透過$+屬性名稱的方式取得,入$data

vue是在初始化時綁定資料的,如果初始化後再次新增元素,則不會導致視圖的變化。

二Vue生命週期

vue實例初始化過程包含了一系列的過程,這些過程包含了設定資料監聽、編譯模板、掛載實例到DOM、在資料更新時更新DOM等。過程中會有一些生命週期鉤子(lifecyle hook)函數,可以在過程中加入自己的程式碼,實現各項功能。
Vue生命週期圖示如下:
vue學習筆記(2)--vue簡介

三Vue模板

vue模板都是合法的html,它是基於html語法的。 vue會將範本渲染為虛擬DOM。  
vue可以透過JSX語法來透過render函數實現DOM的渲染。  
vue使用{{}}來進行內插,即佔位符。類似freemaker。 {{}}插入的是文字字串,如果使用v-html則會插入實際的html代碼[這樣會導致xss,謹慎使用]。
vue常用指令:

  • v-bind:可以綁定html屬性,可簡寫為:xx

  • v-on:綁定事件,可簡寫為@xxxx

  • v-model:雙向綁定資料

  • v-if:判斷語句,v- if必須和元素一起使用,如果有多個元素,則可以使用