--- tags: JavaScript 實戰班, Day16 --- # 設計魔劍三組 ## 6/29：Day 16 真心鎮的警備隊在小明進入城鎮時，就開始部署大量的警力，準備抓捕小明。小明雖然很快速地搭上小美的卡車，但後方的警力依然不斷的追上，就算是掌握 ES6 技能的小美也難以應對這麼大量的警力... 小美：沒辦法了，只好用出這招（從背後拿出大捲軸攤開） ![](https://i.imgur.com/R6EGW8Y.png) 小明：J 格是.... 小美：這是基於 JS 能力所封印的捲軸，解開以後可以快速的運用各種術 小美：你來開車，我來阻止他們！ 小明：可是我沒駕照啊～～～ 小美拍了小明肩膀說：「沒關係，我也沒有」，說完話後立刻轉身後飛躍到卡車後方，開始進行 Vue 的術式。 #### 任務 - 閱讀[課前預習](https://hackmd.io/@hexschool/S1DJeKTdL/%2FRhud3_1PR9qv1RJyMfwUmA) - 測驗 1：將小美所準備好的 Vue 資料呈現於畫面上（只能操作 HTML） https://codepen.io/Wcc723/pen/jOWLdeZ - 測驗 2：小明也要玩玩看：前方已經有小美所準備好的 {{ }}，請試著把 data 補上，讓畫面可運作 https://codepen.io/Wcc723/pen/OJMjdap #### 繳交作業說明： 請 fork 課程中所提供的 Codepen，並以 iframe 的方式內嵌於團隊內的 HackMD ![](https://i.imgur.com/uD7iszx.png) iframe 範例（同上，選擇右下方的 Embed 的 iframe 選項） <iframe height="265" style="width: 100%;" scrolling="no" title="Vue 將資料呈現於畫面上" src="https://codepen.io/Wcc723/embed/jOWLdeZ?height=265&theme-id=light&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/Wcc723/pen/jOWLdeZ'>Vue 將資料呈現於畫面上</a> by Wcc723 (<a href='https://codepen.io/Wcc723'>@Wcc723</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> #### 學習重點 - 著重在 Vue 的 **語法認識** - 運作的觀念會在直播課程中做介紹 --- ### Yoyo <iframe height="265" style="width: 100%;" scrolling="no" title="Vue 將資料呈現於畫面上" src="https://codepen.io/notte-the-lessful/embed/vYLeKrZ?height=265&theme-id=light&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/notte-the-lessful/pen/vYLeKrZ'>Vue 將資料呈現於畫面上</a> by notte (<a href='https://codepen.io/notte-the-lessful'>@notte-the-lessful</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> <iframe height="265" style="width: 100%;" scrolling="no" title="Vue 創建資料" src="https://codepen.io/notte-the-lessful/embed/qBbPNYN?height=265&theme-id=light&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/notte-the-lessful/pen/qBbPNYN'>Vue 創建資料</a> by notte (<a href='https://codepen.io/notte-the-lessful'>@notte-the-lessful</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> > 助教回覆：作業做的很好哦，Vue 操作的很正確 :+1: > --- ### Ryan 測驗1： <iframe height="265" style="width: 100%;" scrolling="no" title="Vue 將資料呈現於畫面上" src="https://codepen.io/RyanYD/embed/eYJGzbY?height=265&theme-id=light&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/RyanYD/pen/eYJGzbY'>Vue 將資料呈現於畫面上</a> by Ryan (<a href='https://codepen.io/RyanYD'>@RyanYD</a>) on <a href='https://codepen.io'>CodePen</a> </iframe> 測驗2： <iframe height="265" style="width: 100%;" scrolling="no" title="Vue 創建資料" src="https://codepen.io/RyanYD/embed/LYGzZMx?height=265&theme-id=light&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/RyanYD/pen/LYGzZMx'>Vue 創建資料</a> by Ryan (<a href='https://codepen.io/RyanYD'>@RyanYD</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> > 助教回覆：作業做的很好哦，Vue 操作的很正確 :+1: > --- ### Vivian Chiang 測驗一： <iframe height="265" style="width: 100%;" scrolling="no" title="Vue 將資料呈現於畫面上" src="https://codepen.io/vivian820225/embed/yLezgYx?height=265&theme-id=light&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/vivian820225/pen/yLezgYx'>Vue 將資料呈現於畫面上</a> by Vivian Chiang (<a href='https://codepen.io/vivian820225'>@vivian820225</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> 測驗二： <iframe height="265" style="width: 100%;" scrolling="no" title="Vue 創建資料" src="https://codepen.io/vivian820225/embed/MWKEJaP?height=265&theme-id=light&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/vivian820225/pen/MWKEJaP'>Vue 創建資料</a> by Vivian Chiang (<a href='https://codepen.io/vivian820225'>@vivian820225</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> > 助教回覆：作業做的很好哦，Vue 操作的很正確 :+1: > --- ### Jerry 測驗一： <iframe height="265" style="width: 100%;" scrolling="no" title="Vue test1" src="https://codepen.io/x82072002/embed/qBbPpeK?height=265&theme-id=dark&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/x82072002/pen/qBbPpeK'>Vue test1</a> by Lu,Shao-Chuan (<a href='https://codepen.io/x82072002'>@x82072002</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> 測驗二： <iframe height="265" style="width: 100%;" scrolling="no" title="qBbPxWK" src="https://codepen.io/x82072002/embed/qBbPxWK?height=265&theme-id=dark&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/x82072002/pen/qBbPxWK'>qBbPxWK</a> by Lu,Shao-Chuan (<a href='https://codepen.io/x82072002'>@x82072002</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> > 助教回覆：作業做的很好哦，Vue 操作的很正確 :+1: >同學是我看到最寫實的 XD ---