Vue.js 入坑準備的初試水溫

一直有很想學好一個前端框架,當初是有興趣想學 Vue.js,不過因為一些因素一直斷斷續續,這次下定決心要好好跟著 Alex 學好,所以就從此開始記錄這段學習歷程了,這次主要是記錄關於開發工具準備與簡單的入門實作的部分,相信對於有些基礎的人看起來也都是相當容易。

前置準備

開發工具

  1. Visual Studio Code : 編寫程式碼用的編輯器。
  2. Vue.js devtools : Chrome 上的擴充套件,便於 Vue 在 Chrome 上進行 Debug,按 F12 開啟開發者工具後,上排頁籤選擇 Vue 即可使用。
  3. Node.js

VS Code 套件

  1. cdnjs : 快速使用一些 CDN 的服務。
  2. Live Server : 在 Local (本機)端有一個即時更新的網頁 Server 可馬上察看結果。
  3. Prettier - Code formatter : 格式化 Javascript / Typescript / CSS 程式碼,讓程式碼更漂亮。
  4. Vetur : Vue 相關的開發套件。

推薦字型

  1. Hasklig
  2. Source Code Pro

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>

參考資料

Alex 宅幹嘛