###### tags: `網頁讀書會` # 12/05 共筆 今天參與人員幫我留下你的名字喔 >wO ## 簽到區 時間：111/12/05 地點：IB 12 R02 主持人：AN 參與人員：CCcat、Jovi_pig、AN、kevin蔡凱鈞、CaseyWang、yuwen、Alan邱懷恩、游翔霖 ### 粗流 |時間|安排| |---|---| |19:00-19:15|描述目前完成進度(Modern Layout 或其他題目）| |19:15-19:20|relative & absolute、before & after| |19:20-19:50|實作| |19:50-20:15|教 vue，把 Modern Layout 跟 vue 結合 (其實是邊講邊做)| |20:15-20:45|實作| |20:45-21:00|講棋盤| ### 當天要教的東西 #### css - relative、absolute 的關係 - after, before - flex, position 的混用 #### vue [檔案下載](https://unpkg.com/vue@3/dist/vue.global.js) [Vue 中文文檔](https://vuejs.bootcss.com/guide/) - 瀏覽器在 parsing code 的過程 - 生命週期(beforeCreate, create, mounted, beforeUnmount) - data、mounted、methods、watch... - v-for、v-bind #### chinese-chess board code part ```htmlembedded <div class="cube" v-for="el in 8 * 4" v-bind:style="{'width': cubeSize + 'px', 'height': cubeSize + 'px'}"></div> ``` ### 你各位的 codepen #### Modern Layout 芷安 https://codepen.io/zhian66/pen/JjZZGax 睿麟 https://codepen.io/jovi920204/pen/abKRqmY 鈺雯 https://codepen.io/Tinichiou/pen/WNyzRvN 正宏 https://codepen.io/chenghung-wang/pen/dyKJqER 凱鈞 https://codepen.io/kkabula/pen/NWzyazZ 小邱 https://codepen.io/robpsuso-the-animator/pen/jOKxerK 宇凡 https://codepen.io/wuyufan7605/pen/yLEGOWb 翔霖 https://codepen.io/IamXDD1/pen/xxzpoZz 沿沿 https://codepen.io/Gabriel9208/pen/qBKpLeR #### Chinese chess 鈺雯 https://codepen.io/Tinichiou/pen/rNKopLb 凱鈞 https://codepen.io/kkabula/pen/dyKLgWX