一直有很想學好一個前端框架，當初是有興趣想學 Vue.js，不過因為一些因素一直斷斷續續，這次下定決心要好好跟著 Alex 學好，所以就從此開始記錄這段學習歷程了，這次主要是記錄關於開發工具準備與簡單的入門實作的部分，相信對於有些基礎的人看起來也都是相當容易。
前置準備
開發工具
- Visual Studio Code ： 編寫程式碼用的編輯器。
- Vue.js devtools ： Chrome 上的擴充套件，便於 Vue 在 Chrome 上進行 Debug，按 F12 開啟開發者工具後，上排頁籤選擇 Vue 即可使用。
- Node.js
VS Code 套件
- cdnjs ： 快速使用一些 CDN 的服務。
- Live Server ： 在 Local (本機)端有一個即時更新的網頁 Server 可馬上察看結果。
- Prettier - Code formatter ： 格式化 Javascript / Typescript / CSS 程式碼，讓程式碼更漂亮。
- Vetur ： Vue 相關的開發套件。
推薦字型
VS Code 設定
{
"files.autoSave": "onFocusChange",
"editor.formatOnSave": true,
"editor.fontFamily": "Hasklig, 'Source Code Pro'",
"editor.fontLigatures": true,
"editor.rulers": [80, 120],
"editor.wordWrap": "on",
"editor.tabSize": 2,
"emmet.triggerExpansionOnTab": true,
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
"emmet.includeLanguages": {
"vue-html": "html",
"vue": "html"
},
"vetur.format.styleInitialIndent": true,
"vetur.format.scriptInitialIndent": true,
"vetur.format.defaultFormatter.html": "js-beautify-html",
"prettier.semi": false,
"prettier.singleQuote": true,
"prettier.eslintIntegration": true,
"html.format.wrapAttributes": "force-expand-multiline"
}
Vue.js
Vue.js 是一種資料驅動話面的框架，屬於 MVVM 架構。
- M (Model，資料模型) ： 網頁中所需使用到的資料，主要放置於 Javascript 程式碼中。
- V (View，畫面) ： 網頁中所看見的畫面輸出結果，主要指 HTML 程式碼。
- VM (ViewModel，畫面模型) ： 用於綁定 Model 及 View ，讓資料可以在有任何異動時直接更新到畫面，使輸出結果立即變動，Vue.js 的主要功能就在於此處的處理；會跟 jQuery 的處理邏輯有所不同，因為 jQuery 並沒有將資料與畫面綁定，所以當異動資料後，仍需撰寫有去更改話面的程式碼，而不同於 Vue.js 僅需撰寫綁定的部分即可。
Vue.js 語法
使用 CDN
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<!-- 添加這行，可使用 VS Code 的套件 cdnjs 來快速添加 -->
<!-- 先按下 Ctrl + Shift + P 再輸入 cdnjs -->
<!-- 再選擇 cdnjs:Search for libraries -->
<!-- 輸入相關關鍵字搜尋欲找之 cdn ，此處輸入 vue -->
<!-- 再選取第一個 vue，然後選取版本，此處選 2.5.17 -->
<!-- 再選取欲使用的 js 檔案，最後按下插入即可，此處選 vue.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
</body>
</html>
Javascript
// 這邊是宣告我們的資料
let data = {
src: './images/logo.png',
title: 'Vue.js 從零開始吃炸雞'
}
// 這邊是使用 Vue.js 產生一個 Vue 物件作為 VM
// 用於實作綁定資料及畫面的功能
// Vue 物件中 el 屬性代表要綁定的畫面(元素，即HTML元素)
// Vue 物件中 data 屬性代表要綁定的資料
let vm = new Vue({
el: '#app',
data: data
})
HTML
- 標籤內容(文字)綁定
<!-- 下列三種方法皆可將 Vue 物件中 data 屬性內的物件的 title 屬性的值填入 HTML 起始及結尾標籤之中 -->
<!-- 通常較少使用 v-html 因為會直接綁成 HTML 元素進去，一般較少使用 -->
<h1 v-text="title"></h1>
<h1 v-html="title"></h1>
<h1>{{ title }}</h1>
- 屬性值綁定
<!-- 以下方法皆可將 Vue 物件中的 data 屬性內的物件的 src 屬性值綁定到 HTML 元素的屬性值中 -->
<!-- 正規寫法為 v-bind: ，省略寫法為 : -->
<img class="logo" v-bind:src="src" />
<img class="logo" :src="src" />
完整程式碼
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<div id="app">
<section>
<div class="container">
<div class="title">
<img class="logo" v-bind:src="src" />
<img class="logo" :src="src" />
<h1 v-text="title"></h1>
<h1 v-html="title"></h1>
<h1>{{ title }}</h1>
</div>
</div>
</section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script>
let data = {
src: './images/logo.png',
title: 'Vue.js 從零開始吃炸雞'
}
let vm = new Vue({
el: '#app',
data: data
})
</script>
</body>
</html>