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

12th鐵人賽 vue.js vue學習筆記

Celeste

2020-09-15 18:04:23

5038 瀏覽

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

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

如何開始

第一步

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

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

第二步

創建 Vue 實例

<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 實例的變數名可以自訂，不一定要用 vm 、 app 。
Vue 實例是利用屬性名 el 來綁定要操作的 HTML 物件，也只有綁定的那個 DOM 物件能被 Vue 操作，除此之外都不行。
data物件裡面放置各種可以用來響應連動的資料。

第三步

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

<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>

Demo：[DAY01]跟 VueJS 認識的30天 -前言

參考資料：