一起幫忙解決難題,拯救IT 人的一天 | vue js typescript
這天小E提及到幾個問題Vue的Single-FileComponent混合HTML/Code內容放一起的問題.Vue的Single-FileComponent檔案結構基本如下
這天小E 提及到幾個問題
Vue 的 Single-File Component 混合HTML / Code 內容放一起的問題.Vue 的 Single-File Component 檔案結構基本如下
<template> <div>This will be pre-compiled</div> </template> <script src="./my-component.js"></script> <style src="./my-component.css"></style>Single-File Component 檔案可以把HTML , CSS 以及 JavaScript/Typescript 內容集中在一個檔案,但也可以把這三種類型內容分開到三個檔案 .vue .css .js 或 .ts
關注點分離, 在該原則下,系統應該按照其業務來將系統本身劃分成不同的部分,從而進一步降低耦合性.
那麼首先,關注點是什麼呢?比如說這個Single-File Component 裡面最主要有兩種業務區隔,就是基本的Code 實現層(infrastruture) 和UI 展現層(Persistent ).
對Developer 角度來說, 他最常修改最關心的地方就是Javascript/Typescript Code 的部分, 它對Developer 是有用的,我們就稱它為一個關注點.對UI Designer 來說, 他最常修改關注的點, 則就是UI 展現層的 template 和 css.
對Developer 瀏覽程式碼角度來說, 打開一個Single-File Component 檔案, 開頭映入眼中卻是HTML 內容,當HTML 內容很大, 就得移動游標到code block 地方. 這實在是不方便.
我的建議是分兩種檔案類型就可以了.my-component.vue 和 my-component.ts
Develo...