前端三大天王之一Vue.js_Chapter1_基礎教學

 

近幾年來Angular、React等前端MVC框架爆紅,

但是一直都沒有機會用到,

一來JQuery也用的熟手了,

二來公司並非一直追技術的專案或是新創公司,

但我還是很看好Vue的未來發展,

雖然沒有像兩個前輩有Google、Facebook去大力推展,

是中國人開發的框架,但其創作者也待過Google,

而且Vue的語法真的簡潔易學,易於推廣,

首先,和JQuery一樣,可以直接import這個library,

但是語法必須擺放在tag之後,

直接加入路徑來試驗看看,

<script src=“https://unpkg.com/vue/dist/vue.js”></script>

簡單的hello範例

code

sample1

 

可以看出vue是一個模板語法,幫助我們將資料綁定

加入邏輯判斷If  Else(v-if,v-else)

ifelsesample2

 

on:click

click

sample3

迴圈 v-for

forloop

sample4

V-model即時更新

v-model是用在表單、及元素來做雙向數據綁定

vmodel

sample5