[ Vue.js ] 元件樣板template - iT 邦幫忙 | new vue template
學習完Vue之後,想要透過單元測試守護你的專案,但又不知道從何起手?別擔心,快來訂閱作者最新系列文《小白也能輕鬆瞭解的Vue3單元測試!》[1]讓你的Vue專案更上一層樓!時間過得很快,不知不覺已經過了十天了!而前兩天我們花了一點時間在介紹元件的註冊方式與用法,除了能夠建立一個元件並使用對應的
學習完 Vue 之後,想要透過單元測試守護你的專案,但又不知道從何起手?別擔心,快來訂閱作者最新系列文 《小白也能輕鬆瞭解的 Vue3 單元測試!》[1]讓你的 Vue 專案更上一層樓!
時間過得很快,不知不覺已經過了十天了!而前兩天我們花了一點時間在介紹元件的註冊方式與用法,除了能夠建立一個元件並使用對應的 <tag> 標籤建立在網頁上,也能將元件塞入其他元件當中成為他的子元件。
然而,對於真正顯示的內容,最主要還是得依靠 template 所產生,回顧一下之前生命週期[2]的章節會發現到,Vue.js 的生命週期中,會有一段過程檢查實體中是否有包含 template 的選項:
若有 template 的情況:最後會使用 render function去編譯裡面的內容到網頁上。 若沒有 template 的情況:則是會使用綁定 el 元素的 outerHTML來做為編譯範圍。其中 template 指的就是元件樣板的部分,我們可以透過不同的封裝方式來管理內容,例如使用 HTML 標籤來進行封裝:
HTML標籤封裝 let vm = new Vue({ el:#app, template:<div>HTML封裝方式</div> })作法是直接在 template 中以 HTML 字串方式直接編寫,但是內容一多的時候將會變成非常長一條,不易於閱讀,而所幸在 JavaScript ES6 中我們可以透過模版字符串(template literal)的方式去書寫,透過反引號快速解決這個難處:
let vm = new Vue({ el:#app, template:` <div> <h1>HTML封裝方式</h1> <div>ES6 讓這種方式變得更容易閱讀了!</div> </div>` }) inline-template這種封裝方式,則是在編寫樣板的時候直接在元件上加上 i...