建立 components
就 2 個步驟
- 建立 components 資料夾
- 建立 .vue 檔案
小提醒 (1)：
每個 .vue 的結構都一樣，包含
- template
- script
- style
這很合理，因為這就是 html 的最基本結構
template 的部分就是放 html 語法的
小提醒(2)：
component 的目的就是分拆好管理
因此，每一個 component 把他想成是「獨立的 html 就對了
Components in Vue is a very powerful tool
- decompose our web page into smaller pieces that are easy to work with.
- web page become more scalable and bigger projects become easier to handle.
資料夾:
src/components
重點
- 1.
- 2.加入到專案 (Adding The Component)寫好獨立的了當 Component 後，當然就要加進專案囉怎麼加呢？大原則都一樣
- 要 import 進來
import FoodItem from './components/FoodItem.vue' - 要給一個名稱 // 之後才能對 component 操作
app.component('FoodItem', FoodItem) - 要放哪裡？
這也很直覺，當然用 html tag 語法，用名稱很合理 <food-item>
特別注意：- JS 用 PascalCase (大駝峰命名)
- Vue 用 kebab-case (短橫線 - 分隔)
理由請參考 FAQ
- 要 import 進來
- 3.每個 component 都是獨立的 (Individual Components)都一樣的 component 名稱，不會打架嗎？當然不會，這種細節 Vue 鐵定會處理的，不然怎麼可能成為三大前端框呢？怎麼驗證各自獨立呢？一個簡單的方式，就是對模組 click 後將 private 變數 + 1 就做到啦
- 4.傳參數 ~ prop既然是 html tag，傳參數當然就是用「屬性」 attribute 囉例如：<food-item food-name="Apples"/>就像 function 一樣，有傳入就要有接收
export default { props:[ 'foodName' ], data() { } };這超容易理解，也很直覺-
Vue 裡面要用到的變數，當然就是 JS 語法
- 和 data(), methods, template, watch, computed 的做法一致
小提醒：一樣遇到命名 convension 的問題- food-name (kebab-case)
- FoodName (camelCase)
因為 JavaScript 不認識 food-nameVue 會自動對應！
-
Vue 裡面要用到的變數，當然就是 JS 語法
評語
請登入後才可以評分