Why 前端框架前端框架幫助我們把資料對應成Html
Why VueVue和Angular類似,都可以達到資料分離、全部畫面同步更動等效果,那像是Angular比較偏向前後端一起做,功能完善但寫起來也比較麻煩,沒辦法在短短幾篇講清楚,再加上Vue沒那麼heavy,所以這是我選擇Vue的原因,相信你可以得到更快的feedback STEP 1 - Build a HTML<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello Vue's World</title> </head> <body> <p>Let's Start!</p> </body> </html> STEP 2 - A Hello World with Vue # {{}}寫程式能懶即懶,所以直接用*CDN做import就好,省時省力 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> //此為開發者version,包含console warnings. 🍐CDN(Content delivery network): 中文名為內容傳遞網路,那直接從這個詞去聯想=>將內容在網路上傳輸的快取機制。 換句話說,連上一個網站等同連上這個網站所在Server,因此不用重新向伺服器Request,那Sever架在哪裡都不會影響用戶讀取網站的速度,像是Vue, Jquery, Bootstrap等都有使用CDN服務,User就可以依佈有CDN最近國家存取,補充 : https://zh.wikipedia.org/wiki/內容傳遞網路 廢話不多說,網站寫起來建立一個最簡單的網站,帶有id設為dayo的div,這div等等會以Vue的方式操作 <!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <meta charset="UTF-8"> <title>Hello Vue's World</title> </head> <body><div id="dayo"></div> </body> </html> 接著,我們在dayo裡面寫點內容(content) <div id="dayo">{{content}}</div> 然後我們將這個message代換為Hello Vue <script> var vm = new Vue({ el: '#dayo', data: { content: 'Hello Vue!' } }) </script> 所以可以想像的現在的網頁變成 <div id="dayo">Hello Vue!</div> 就會出現一個網頁寫Hello Vue囉! 有感覺後,故事才剛開始我們可以在這短短的幾行code得知
STEP 3 - Add an array # []我們先增加一個why,裡面放這次的參加原因,那我的原因有很多 - 好玩、有趣、和大家分享 data: { content: "Hello Vue!", why:["好玩","有趣","和大家分享"] } 接著,我們將剛剛定義好的why動態更新至我們的HTML,這邊矩陣使用的方式一樣,用中括號[]、index從0開始 <div id="dayo"> {{content}} <p>為甚麼參加IT邦? {{why[0]}}</p> <p>參加可以幹嘛? {{why[2]}}</p> </div> 我們的結果就出來囉,是不是很簡單呢,那我們繼續看下去… STEP 4 - 資料太多不用怕 # v-for我們的data一樣 data: { content: "Hello Vue!", why:["好玩","有趣","和大家分享"] } 但是這次我們的HTML內要改放v-for,他的使用方法是 a in b,b是我們原本在data裡開的array,那a就是index去run這個array,寫法如下: <div id="dayo">{{content}} <p>為甚麼參加IT邦?</p> <ul> <li v-for="reasons in why">{{reasons}}</li> </div> 可想而知,這個for在網頁上會解析成 <ul> <li>好玩</li> <li>有趣</li> <li>和大家分享</li> </ul> 這種方法是不是很方便呢,再多的資料都能用for完成
那今天我們先到這邊,消化一下,Vue還有很多功能,讓我們一天一天來練習 讓我們把今天學會的做個紀錄
0 評論
|
Author一位平凡大學生,熱愛手語、擔任志工、工作努力賺錢、科技新知。 |