Lecture 5—VueJS
Introducing VueJS
Vue == View
Vue
- Vue has similar file size as jQuery.
- Both ~75 KB and ~30KB when minified.
vue-devtools
安裝 vue-devtools
https://github.com/vuejs/vue-devtools
澳門圖書館列表
Sample JSON
{
"澳門中區": [
{"name":"澳門中央圖書館", "open_hour":"星期一至日 10:00 – 20:00"},
{"name":"何賢公園圖書館", "open_hour":"星期二至星期日 8:00 - 20:00"}
],
"澳門南區": [
{"name":"何東圖書館", "open_hour":"星期一至六 10:00 – 19:00 星期日 11:00 – 19:00"},
{"name":"下環圖書館", "open_hour":"星期二至星期日 8:00 - 20:00"}
],
"澳門西區": [
{"name":"沙梨頭圖書館", "open_hour":"星期一 14:00 - 20:30 星期二至星期日 09:30 - 20:30"},
{"name":"紅街市圖書館", "open_hour":"星期一至日 全日開放"},
{"name":"白鴿巢公園黃營均圖書館", "open_hour":"星期二至星期日 8:00 - 20:00"}
],
"澳門北區": [
{"name":"青洲圖書館", "open_hour":"星期一至六 10:00 – 20:00 星期日 12:00 – 20:00"},
{"name":"望廈圖書館", "open_hour":"星期一至日 12:00 – 19:00"},
{"name":"紀念孫中山公園黃營均圖書館", "open_hour":"星期二至星期日 8:00 - 20:00"},
{"name":"黑沙環公園黃營均圖書館", "open_hour":"星期二至星期日 8:00 - 20:00"},
{"name":"黑沙環公園黃營均兒童圖書館", "open_hour":"星期二至星期日 8:00 - 20:00"}
],
"氹仔": [
{"name":"氹仔圖書館", "open_hour":"星期一14:00 - 20:30 星期二至星期日9:30 – 20:30"},
{"name":"氹仔黃營均圖書館", "open_hour":"星期二至星期日 8:00 - 20:00"}
],
"路環": [
{"name":"路環圖書館", "open_hour":"星期一至六 13:00 – 19:00"}
],
"其他": [
{"name":"流動圖書館", "open_hour":"星期一、二及五 12:00 - 19:00 星期三 12:30 - 18:30"},
{"name":"民政總署大樓圖書館", "open_hour":"星期一至六 13:00 – 19:00"}
]
}
Sample—Vue List demo
Sample—Position Sticky
Sample—Vue with Component
Fetching JSON API with fetch
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
Fetch Example
fetch("https://s3-us-west-2.amazonaws.com/s.cdpn.io/15649/macao-library.json")
.then( (response) => {
return response.json();
})
.then( (data) => {
this.libraries = data;
this.isLoaded = true;
});
Multiple views example
<div id="about" class="scene" v-if="scene === 'about'">
<header>
<h1>關於澳門圖書館</h1>
</header>
<div class="content">
<p>只是一個範例。資料來源自<a href="https://www.library.gov.mo/">澳門公共圖書館</a>網站。</p>
<p><a href="#home" class="button" @click="scene='home'">返回列表</a></p>
</div>
</div>