iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 1
1
自我挑戰組

跟 VueJS 認識的30天系列 第 1

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

  • 分享至 

  • xImage
  •  

其實早在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 實例的變數名可以自訂,不一定要用 vmapp
  • 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天 -前言

參考資料:
Yes


下一篇
[DAY02]跟 Vue.js 認識的30天 - Vue 實體的生命週期(Lifecycle Hooks)及模板語法(Template Syntax)
系列文
跟 VueJS 認識的30天21
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言