iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 2
0
自我挑戰組

輕鬆Vue一下系列 第 2

Day2-Hello Vue

  • 分享至 

  • xImage
  •  

1.先新建一個html網頁,並引入vue.js的cdn,藉此導入整個框架。
https://ithelp.ithome.com.tw/upload/images/20190918/20112076LReIuobsCS.jpg
2.因為在框架中是利用{{}}的格式獲取資料內容,而message則是自訂的資料名稱
https://ithelp.ithome.com.tw/upload/images/20190918/20112076NOO5OjZKXm.jpg
3.新建一個自訂javascript檔,創建一個vue物件,而物件中的el屬性是用來指定欲套用框架之元素,data屬性則是用來存放數據,並自訂各數據資料的名稱。

因此,當今天透過el:"#app"將html中id為app的div套用vue框架,再利用{{message}}將資料代入。
此時,網頁便會呈現Hello Vue:
https://ithelp.ithome.com.tw/upload/images/20190918/20112076uzfegR9AhK.jpg
明日預告:條件渲染


上一篇
Day1-為什麼要學Vue?
下一篇
Day3-條件渲染(1)
系列文
輕鬆Vue一下30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言