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

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

一 Vue實例

vue應用是由一個根Vue實例開始的。Vue會將數據綁定到data中,當data數據改變時也會致使視圖的改變【觀察者模式】，能夠實現數據的雙向綁定【響應式】。vue實例中的屬性能夠經過$+屬性名的方式獲取,入$data

vue是在初始化時綁定數據的，若是初始化後再次添加元素，則不會致使視圖的變化。

二 Vue生命週期

vue實例初始化過程包含了一系列的過程，這些過程包含了設置數據監聽、編譯模板、掛載實例到DOM、在數據更新時更新DOM等。在此過程當中會有一些生命週期鉤子(lifecyle hook)函數，能夠在此過程當中添加本身的代碼，實現各項功能。
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必須和元素一塊兒使用，若是有多個元素，則能夠使用<template>將多條語句包裹起來。v-else;v-else-if[2.1.0及以上支持],v-if只有在條件爲真時纔會渲染
• v-show:同v-if相似，判斷是否顯示，v-show只是控制css的display，dom結構會一直存在
• v-for:循環語句，v-for比v-if有高的優先級

v-if和v-for在渲染時儘可能複用已有的dom結構，對於v-if僅僅改變綁定的值，dom結構並不會從新生成。v-for在渲染時若值相同不會再生成。能夠使用key來令vue生成新DOM

四 Vue觸發響應的操做

vue觸發響應的數組或者對象的操做見下圖：