本文同步發表於斜槓女紙部落格：Day4 新手村的探險：專案環境設定和指令(Directives)

嗨！今天終於要打開VSCode準備開始撰寫專案了！先讓大家看看這個專案中我大概會用到的資料夾：

• js資料夾：引入Vue.js檔案以及這個專案中會使用到的所有程式碼
• scss資料夾：引入Bootstrap和專案SCSS，會另外轉譯成css資料夾，到時候不會上傳至github
• master資料夾：用來放一些專案頁面的原始檔案如images、fonts，到時候不會上傳至github

SCSS設定

平常上班的時候其實不會用到SCSS，，但其實自從上次的時光屋九週挑戰使用過SCSS後就完全入迷。使用SCSS來管理專案的樣式真的非常方便來著，快跟我一起入坑XD。

這個專案中我使用SCSS引入Bootstrap，同樣是下載Bootstrap原始碼 使用。

我自己常用的基本設定如下：

[補充] 設定可看：Alex大大的開掛囉!!! VSCode 工作學習效率加倍術

"liveSassCompile.settings.formats": [{
        "format": "expanded",
        "extensionName": ".css",
        "savePath": "/css"
    },
    {
        "extensionName": ".min.css",
        "format": "compressed",
        "savePath": "/dist/css"
    }
],
"liveSassCompile.settings.excludeList": [
    "**/node_modules/**",
    ".vscode/**"
],
"liveSassCompile.settings.generateMap": true,
"liveSassCompile.settings.autoprefix": [
    "> 1%",
    "last 2 versions"
],
"vsicons.dontShowNewVersionMessage": true,

建立應用程式

每個Vue的應用程式畫面都是透宣告Vue函数建立而來，網頁裡可以放入1個以上的應用程式，但無法將應用程式使用巢狀結構包裹。

var 參數 = new Vue({
    el: '#app',   //#app為網頁元素ID，可自由命名，是Vue App的作用範圍
    // 其他資料
})

實際範例

與JavaScript、JQuery直接操控畫面上的網頁元素不同，Vue.js是以『資料狀態』操作畫面，若要將Vue函数的資料呈現網頁畫面上的話，則使用雙大括號{{msg}} 的方式呈現

//HTML
    <div id="app">
      <h1>{{ message }}</h1>
    </div>
    
//JS
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Mio!'
      }
    })

實際範例

常用指令

Vue.js的指令(Directives)是帶有v-前綴的特殊特性，以下是在Vue.js中常用的指令：

v-text：單向綁定資料，以純文字顯示

<span v-text="msg"></span>
<!-- 和下面的一樣 -->
<span>{{msg}}</span>

v-html：單向綁定資料，同等於JavaScript的innerHTML以html 標籤方式顯示

v-bind：用來綁定動態資料的屬性，使用v-bind指令:後面接欲綁定的HTML屬性，可以縮寫成:屬性，例如:v-bind:class 等同於 :class

<!-- 綁定src屬性 -->
<img v-bind:src="imageSrc">

<!-- class 綁定 -->
<div :class="[classA, classB]"></div>

v-on：用來監聽JS事件，並執行後續方法。可以縮寫成@事件，例如：v-on:click等同於 @class

<!-- 綁定事件 -->
<button v-on:click="doThis"></button>  //點擊後執行doThis函式

<!-- 縮寫 -->
<button @click="doThis"></button>

v-for：用來跑迴圈，把一些重複的HTML元素，清單或下拉選單等等，可利用v-for語法來把陣列或物件的資料顯示出來。

//HTML
    <div v-for="item in lists">
      {{ item }}
    </div>

//JS
    <script>
        new Vue({
          el: "#app",
          data: {
            lists: [
              '吃飯',
              '睡覺',
              '寫文章'
            ]
          }
        });
    </script>

v-if：用來條件判斷，v-else, v-else-if也是相同類型的指令，邏輯與javascript的條件判斷式一樣，true出現、false就不出現

因為我比較喜歡從實例中學習，總覺得這樣比單純觀看說明還要能來的加深印象。所以這邊只有簡單地記錄下常用指令的簡述，未來實作遇到實在記錄下詳細使用的眉角。今天就先到這邊囉～

參考資料

• 從0開始vue.js的30天學習日誌
• 一下子就搞懂Vue.js在做什麼的範例程式碼