Vue.js 單檔元件

學習如何使用 Vue 創建單一檔案來封裝一個組件的所有相關內容,集中管理外觀和行為。 一個 Vue 組件可以在一個 JavaScript 檔案(.js)中這樣聲明: Vue.component('component-name', { /* 選項 */ }) 或者: new Vue({ /* 選項 */ }) 也可以在一個 .vue 檔案中指定。 這個 .vue 檔案非常酷,因為它允許你在一個檔案中定義以下內容: JavaScript 邏輯 HTML 代碼模板 CSS 樣式 所有這些內容都包含在一個檔案中,因此它得名為單檔元件。 以下是一個例子: <template> <p>{{ hello }}</p> </template> <script> export default { data() { return { hello: 'Hello World!' } } } </script> <style scoped> p { color: blue; } </style> 所有這些都是可能的,感謝 webpack 的使用。Vue CLI 讓這一切變得非常容易並且支援開箱即用。在沒有 webpack 設置的情況下,無法使用 ....