DAY01 | 跟 Vue.js 認識的30天 -前言

發表於 更新於 分類於 ，

其實早在8月就有想過要參加這一次IT鐵人幫，但是那時候還深陷在六角學院「 JS 作品直播班 」的作業泥淖中，也一直不確定自己的主題要訂甚麼，後來才決定寫 Vue 的筆記，畢竟剛在六角學院學完，也一併趁這個機會來加深自己對 Vue 的了解。

這一次針對 Vue 的筆記，內容除了是從六角學院學習到的外，還有就是就是 Alex 宅幹嘛的[ 想入門，我陪你 ] Re Vue 重頭說起系列，很喜歡 Alex大大帶著我們一起看一遍 Vue 的文件說明，這也啟發我這次筆記的寫法，大概也會跟Alex大大學習，從 Vue 的文件說明來撰寫這次的IT鐵人邦文章。

如何開始

第一步

直接利用 CDN 載入(建議新手使用)
創建一個 index.html 檔案，並在</body>上方加入下方程式碼：

1
2
3
4
<!-- 開發環境版本，包含了有帮助的命令行警告(以下練習使用開發環境版本) -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生產環境版本，刪除了命令行警告、優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

第二步

創建 Vue 實例(Instaance)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<body>
  <!--被 Vue 綁定的 DOM 物件-->
  <div id="app">
    <!--內容-->
  </div>
  <!--載入 Vue 的 CDN -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!--撰寫 Vue -->
  <script>
  const vm = new Vue ({
    el: '#app',
    data: {
      // data資料
    }
  })
  </script>
</body>
  • Vue 實例(Instaance)的變數名可以自訂，不一定要用 vm 、 app 。
  • Vue 實例(Instaance)是利用屬性名 el 來綁定要操作的 HTML 物件，也只有綁定的那個 DOM 物件能被 Vue 操作，除此之外都不行。
  • data物件裡面放置各種可以用來響應連動的資料。

第三步

資料響應
使用模板語句將data內資料渲染到被綁定的 DOM 物件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
  <!--被 Vue 綁定的 DOM 物件-->
  <div id="app">
    <p>{{ message }}</p>
  </div>
  <!--載入 Vue 的 CDN -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!--撰寫 Vue -->
  <script>
  const vm = new Vue ({
    el: '#app',
    data: {
      // data資料
      message: 'Helle Vue！'
    }
  })
  </script>
</body>

See the Pen [DAY01]漸進式了解 VueJS -前言 by Celeste6666 (@celeste6666) on CodePen.

參考資料：
Yes