[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-vue使用vue3打造trello式的工作看板":3},{"id":4,"slug":5,"title":6,"description":7,"content":8,"date":9,"image":10,"imageAlt":6,"author":11,"categories":14,"path":21,"minRead":22},225,"vue使用vue3打造trello式的工作看板","[Vue]使用Vue3打造trello式的工作看板","使用vue3打造trello式的工作看板 今年參加了{Laravel x Vue}Conf Taiwan，第一 […]","\u003Ch1>使用vue3打造trello式的工作看板\u003C\u002Fh1>\n\u003Cp>今年參加了\u003Ca href=\"https:\u002F\u002Flaravelconf.tw\u002F\" title=\"{Laravel x Vue}Conf Taiwan\">{Laravel x Vue}Conf Taiwan\u003C\u002Fa>，第一天工作坊主題是使用Vue3打造類似trello的工作看板，藉此重新檢視自己在使用Vue3的習慣與詢問一些自學想不透的問題。\u003Cbr \u002F>\n很感謝Kuro的推廣與分享，幫忙打廣告一下，有興趣學Vue的人請務必購買「\u003Ca href=\"https:\u002F\u002Fwww.tenlong.com.tw\u002Fproducts\u002F9789864345687\" title=\"重新認識 Vue.js：008天絕對看不完的 Vue.js 3 指南\">重新認識 Vue.js：008天絕對看不完的 Vue.js 3 指南\u003C\u002Fa>」XDDDDD\u003Cbr \u002F>\n先附上本次工作坊的\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fbillxu0521\u002Fvue-trello-app\" title=\"repo\">repo\u003C\u002Fa>與\u003Ca href=\"https:\u002F\u002Fvue-trello-app.vercel.app\" title=\"demo\">demo\u003C\u002Fa>。\u003C\u002Fp>\n\u003Ch2>專案目標\u003C\u002Fh2>\n\u003Cp>本次專案是打造一個類似trello的工作記錄看板，工作坊的學習目標為以下：\u003C\u002Fp>\n\u003Col>\n\u003Cli>認識 vite 與 Vue.js 開發環境設定\u003C\u002Fli>\n\u003Cli>熟悉 Vue.js 3.x Compontions 與 Setup script\u003C\u002Fli>\n\u003Cli>使用 Tailwind CSS 結合 Vue.js 開發網頁介面\u003C\u002Fli>\n\u003Cli>使用 Pinia 管理跨元件狀態\u003C\u002Fli>\n\u003Cli>使用 Vue Router 實作前端路由功能 (edited)\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cp>使用技術如下：\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Vite 3.1.8\u003C\u002Fli>\n\u003Cli>Vue.js 3.2\u003C\u002Fli>\n\u003Cli>Vue Router 4.1.5\u003C\u002Fli>\n\u003Cli>Pinia 2.0\u003C\u002Fli>\n\u003Cli>Vue Use\u003C\u002Fli>\n\u003Cli>Tailwindcss 3.2.14\u003C\u002Fli>\n\u003Cli>Vue.draggable.next\u003C\u002Fli>\n\u003Cli>unplugin-vue-components\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>這邊就不做製作步驟，主要紀錄自己學到的重點，有問題的人可以留言給我。\u003C\u002Fp>\n\u003Ch2>工作坊筆記\u003C\u002Fh2>\n\u003Ch3>script setup 寫法\u003C\u002Fh3>\n\u003Cp>Vue3提供了setup的寫法，通常有兩種一種是傳統的export default\u003C\u002Fp>\n\u003Cpre>\u003Ccode>export default  {\n  setup() {\n  \u002F\u002F內容\n  }\n  }\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>另一種為script setup 寫法\u003C\u002Fp>\n\u003Cpre>\u003Ccode><script setup>\n\u002F\u002F內容\n<\u002Fscript>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>這邊建議是盡可能採用script setup 寫法，官方也較推薦這種撰寫方式，雖然要習慣一下，但好處是可以簡化程式碼，實際寫過真的感覺很清爽！\u003C\u002Fp>\n\u003Ch3>Vue Use\u003C\u002Fh3>\n\u003Cp>這是一個滿實用的Vue工作組，在這個專案中導入是為了 focus 與 onClickOutside這兩支api，可以協助我們快速處理元素的聚焦與脫離，像是在trello中，點擊某個卡片會跳出燈箱(lightbox)以及點擊燈箱後方的遮罩可以關閉燈箱這種流程。\u003C\u002Fp>\n\u003Ch3>v-bind傳遞物件到子元件\u003C\u002Fh3>\n\u003Cp>之前我會使用prop傳遞資料到子元件像是這樣\u003C\u002Fp>\n\u003Cpre>\u003Ccode><TaskItem\n          :id="element.id"\n          :title="element.title"\n          :tasks="element.tasks"\n        \u002F>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>但其實物件可以用v-bind來傳遞寫法如下：\u003C\u002Fp>\n\u003Cpre>\u003Ccode> <TaskItem\n          v-bind="element"\n        \u002F>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>而在子元件中需要這樣接值\u003C\u002Fp>\n\u003Cpre>\u003Ccode><script setup>\nimport { ref, computed } from "vue";\nconst props = defineProps({\n  id: String,\n  title: String,\n  content: String,\n}); \n<\u002Fscript>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>如果會對資料修改，那記得要再宣告一個變數來接避免污染父元件的物件喔\u003C\u002Fp>\n\u003Cpre>\u003Ccode>const title = ref(props.title);\n\u002F\u002F修改title\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Pinia\u003C\u002Fh3>\n\u003Cp>類似Vuex的狀態管理套件，超好用啊，我其實沒用過Vuex，只有用過原生的依賴注入，Pinia的使用真的方便很多。\u003Cbr \u002F>\n這邊就不寫使用方法了，請參考\u003Ca href=\"https:\u002F\u002Fpinia.vuejs.org\u002F\" title=\"官方資料\">官方資料\u003C\u002Fa>\u003C\u002Fp>\n\u003Ch4>取用函式與值\u003C\u002Fh4>\n\u003Cp>要注要透過Pinia取用函式與值的作法\u003Cbr \u002F>\n如果closeEditTask是函式，那可以用解構方式來引用，但這樣的話就無法觀察到物件中的狀態或值\u003C\u002Fp>\n\u003Cpre>\u003Ccode>以下兩種相同\nconst { closeEditTask } = store;  \u002F\u002F物件解構\nconst { closeEditTask } = store.closeEditTask;  \n解構無法被觀察\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>如果是狀態或值，則需要computed\u003C\u002Fp>\n\u003Cpre>\u003Ccode>const currentEditTask = computed(() => store.currentEditTask); \u002F\u002FcurrentEditTask這是狀態\n因為要關注狀態所以用computed\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>在script中取的DOM\u003C\u002Fh3>\n\u003Cp>想取得DOM內容的話可以用ref，像這樣\u003C\u002Fp>\n\u003Cpre>\u003Ccode>const target = ref();\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>然後網頁元入記得宣告\u003C\u002Fp>\n\u003Cpre>\u003Ccode><textarea\n      ref="target"    \n    ><\u002Ftextarea>\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>這樣就可以透過target來操作textarea的內容\u003C\u002Fp>\n\u003Ch3>偵測自己的click\u003C\u002Fh3>\n\u003Cp>有點像以前寫jQuery的監聽，對某元素監聽時要加上this不然會監聽到所有同元素，vue的@click也是\u003C\u002Fp>\n\u003Cpre>\u003Ccode><div\n    @click.self="closeEditTask"\n  >\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>src中的compoment與views命名習慣\u003C\u002Fh3>\n\u003Cp>這不是強制，習慣上只會在某地方特定使用一次的可以放在\u003Cstrong>views\u003C\u002Fstrong>中，例如首頁，如果是重複使用的元件則用\u003Cstrong>compoment\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Ch3>Vue.draggable.next\u003C\u002Fh3>\n\u003Cp>支援拖曳效果的套件，附上\u003Ca href=\"https:\u002F\u002Fsortablejs.github.io\u002Fvue.draggable.next\u002F#\u002Fsimple\" title=\"官方說明\">官方說明\u003C\u002Fa>\u003C\u002Fp>\n\u003Ch3>unplugin-vue-components\u003C\u002Fh3>\n\u003Cp>超棒的玩意，可以直接以命名呼叫compoment，以往我們要呼叫compoment通常要先引入\u003C\u002Fp>\n\u003Cpre>\u003Ccode>import {xxx} from  "xxx"\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>但這個套件可以直接省略import，以原名就能直接呼叫，太棒啦！\u003C\u002Fp>\n","2022-12-04T13:36:23","\u002Fapi\u002Fproxy-image?url=https%3A%2F%2Fpost.billxu.net%2Fwp-content%2Fuploads%2F2022%2F11%2F256px-Vue.js_Logo_2.svg_.png",{"name":12,"link":13},"Chih Fan","http:\u002F\u002Fpost.billxu.net",[15,17,19],{"name":16,"slug":16},"frontend",{"name":18,"slug":18},"node",{"name":20,"slug":20},"vue","\u002Fblog\u002Fvue使用vue3打造trello式的工作看板",1]