iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
5
自我挑戰組

【I Love Vue】 30天愛上 Vue系列 第 7

【I Love Vue 】 Day 07愛上 Vue- Template與 Hot Reloading

  • 分享至 

  • xImage
  •  

鑒於昨天一次拋出很大量的訊息量,今天我們的進度就緩一緩。

我們.vue 的檔案裏面分三的大區塊 templatescriptstyle
今天就來介紹 Template。

Template

這是一隻 .vue 檔案裡面的骨架,我們可以利用這個區塊搭建出我們網頁上的大模樣。
當然這邊除了可以寫標準的html語法之外,
也能夠支援Vue提供的Attributes(屬性)。
(在後面說明 script的時候會說明)

我們先來做一個簡單的例子:

  1. 先將原本
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>

改成


 <p>I Love Vue 第七天</p>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/> 

(按下儲存 ctrl + s)
https://ithelp.ithome.com.tw/upload/images/20200921/20115941uuipjRXs14.jpg
2. 在 Terminal 輸入 npm run serve
3. 打開網頁 http://localhost:8080/
https://ithelp.ithome.com.tw/upload/images/20200921/201159414jKxb90veP.jpg

為了有些對html語法不熟的小夥伴友善些,這邊說明一下。

 <p>I Love Vue 第七天</p>

這邊的意思是將 I Love Vue 第七天 的字串 放到段落 <p></p>裡面

  1. 我們接著在裡面再放入一個按鈕 <button></button>
  <p>I Love Vue 第七天</p>
  <button>按讚</button>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/> 

https://ithelp.ithome.com.tw/upload/images/20200921/20115941VI8lQaDQQD.jpg
5. 按下 CTRL + S
6. 打開網頁

接下來你會發現我們新打得按鈕神奇的直接出現在這上面了,
為什麼我不用重新整理就有新的畫面了?

Hot Reloading

Hot reloading(熱重載)這是近幾年來比較常見的一個技術。
在你修改.vue文件的時候他會幫你保留目前的狀態,並且幫你把新的畫面替換上去。
這讓我們開發人員大幅減少不斷重新關閉啟動網站的時間(關掉後 重新下 npm run serve)

當然這技術還是有所限制的,雖然template與style區塊內會重新加載並且完整的保留原本的狀態。
但是script中為了保持行為的一致性會將script銷毀再重新創建。
白話文就是, template 與 style 修改時可以依靠熱加載 不需要刷新介面,
如果有改到 script 你還是自求多福重新執行一次會比較安全。


結語

原本這篇是想一次介紹完templatescriptstyle
為了能更加詳盡介紹一些小細節,所以分成三個小短篇,
至於 hot reloading 如何關閉,日後有機會碰到的話我們在專門做一期為大家講解。
(不知有沒有人會有既視感)
如果有興趣的小夥伴可以到這個網站( https://vue-loader.vuejs.org/guide/hot-reload.html )
先去看看熱加載的介紹及如何關閉。


上一篇
【I Love Vue 】 Day 06 愛上 Vue- 一切的開端(程式進入點)
下一篇
【I Love Vue 】 Day 08愛上 Vue- 這是我的Style
系列文
【I Love Vue】 30天愛上 Vue30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言