--- title: Vue3 - Lesson 0 tags: Vue3 --- Vue3 - Lesson 0 == #### Why Vue3 因為React太複雜，Angular過氣，Vue最潮。 #### Install 初學者用CDN就好，不要假裝自己很會。 ```htmlembedded= <html> <header> <script src="https://unpkg.com/vue@next"></script> </header> <body> </body> </html> ``` #### Declarative Rendering 加上一個最簡單的渲染，Hello TryTryMeow2! ```htmlembedded <html> <header> <script src="https://unpkg.com/vue@next"></script> </header> <body> <div id="myMeowApp"> {{ message }} </div> <script type="text/javascript"> const mysteryMeow = { data() { return { message: 'Hello TryTryMeow2!' } } } Vue.createApp(mysteryMeow).mount('#myMeowApp'); </script> </body> </html> ``` > You can [Try On CodePen](https://codepen.io/trytrymeow2/pen/PoWWXKZ) #### CodePen上的範例 <iframe height="265" style="width: 100%;" scrolling="no" title="PoWWXKZ" src="https://codepen.io/trytrymeow2/embed/PoWWXKZ?height=265&theme-id=dark&default-tab=js,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/trytrymeow2/pen/PoWWXKZ'>PoWWXKZ</a> by trytrymeow2@gmail.com (<a href='https://codepen.io/trytrymeow2'>@trytrymeow2</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> #### Update Resume 您已經成為尊貴Vue3開發者。馬上加到履歷中! * 熟悉Vue3框架，專業前端頁面開發者 #### Q&A ( In case you didn't know) > Q: 什麼是<html> > A: 先去看 [https://www.w3schools.com/html](https://www.w3schools.com/html)，有個印象就好，看不懂再回去翻。 > Q: #myMeowApp是什麼 > A: css selector，先去看 [https://www.w3schools.com/css](https://www.w3schools.com/css)，再看[https://www.w3schools.com/cssref/css_selectors.asp](https://www.w3schools.com/cssref/css_selectors.asp) > Q: const mysteryMeow 這段在做什麼? > A: 先去看[https://www.w3schools.com/js/](https://www.w3schools.com/js/) > Q: 為什麼要一直看別的東西? > A: 因為這個課程對你來說太難了，先熟悉HTML/CSS/JavaScript再來吧!