人生中如果沒有雙花括號,那我們之間就無法有秘密了。
對 Vue.js 有了基本的背景了解後,一定會手癢開始想動手做吧!今天就直接來使用 Vue.js 吧!
在我們的文件裡至少要有這三個元素,才能使 Vue.js 正常的運作:
將下來我們實際來操作一遍:
使用 Vue.js 的起手式,是要先以 CDN 的方式將 Vue.js 載入我們的.html
文件裡。載入的版本有兩種選擇:「開發環境版本」或「生產環境版本」,初學建議使用「開發環境版本」。
// 開發環境版本,包含了有幫助的命令行警告
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
或者:
// 生產環境版本,優化了尺寸和速度
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
在.html
文件的 HTML 裡,以 ID 屬性建立一個 div
區塊,這個區塊也就是之後 渲染的目標,這裡的 ID 為 APP。
在.html
文件的 HTML 裡的<script>
區塊,以 New 的方式建立一個 Vue 的物件實例,在裡面設定初始值
<body>
<div id="app">
<!-- Vue 渲染的目標範圍 -->
</div>
<script>
// 用來初始化 Vue 實例
const vm = new Vue({
})
<script>
<body>
上面的例子我們已經把最基本的部分寫好了,接下來的只要在這個物件中,將初始資料與渲染目標的連結寫好,最基本的使用 vue 框架的網頁就寫好了!
在這個物件中,有兩個屬性(Key)是一定要的: el:
這個物件要渲染的目標、data:
渲染在畫面上的初始值。而data:
物件裡資料,將會透過 Vue 的模板語法:雙花括號{{ Mustache }}
來與data:
裡的資料做聯繫。
<body>
<div id="app">
<!-- 資料綁定 -->
{{ message }}
</div>
<script>
const vm = new Vue({
// 綁定渲染目標
el: '#app',
// 初始資料
data: {
message : 'Bonjour !',
}
})
<script>
<body>
現在我們從瀏覽器就可以看到{{ message }}
所對應的message : 'Bonjour !'
,這個值 Bonjour ! 已經對應渲染到畫面裡了。
每日一句法文有益身心:Bon voyage ! 繃.窩訝舉 --> 旅途愉快!