---
# System prepended metadata

title: Vue3 - Lesson 0
tags: [Vue3]

---

---
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再來吧!
 
