公式ホームページのIntro to Vue 3クラス１から２(Intro&Create the VueApp)

6627 ワード
Vue3 Vue3 テキストリンク

vue2は経験していて、vue3はまだよくわかっていないところです。
それで、公式ホームページのところを確認したら、動画でvue3を勉強させるコンテンツがあることがわかり、始めて見ました。

Intro to Vue 3クラス

SPA(Single Page Application)は業務上のサイトの場合は、合わない場合もありますが、
一般ユーザ対象のものは良い方かと思っています。
業務上のものだとしても、合うものはあるので、この機会にキャッチアップできれば、幸いですね。
英語のみではありますが、内容が下の記事としてあるので、大丈夫だと思いました。

1. Intro to Vue3

クラス https://www.vuemastery.com/courses/intro-to-vue-3/intro-to-vue3/

動画で学んだことをやって見るには、Codepenを利用する方法とgithubを利用して、ローカルにてやって見る方法があります。
私はローカルでやって見たいと思ってgithubからForkして、それをCloneやって、学んでみる予定です。

上記のレポジトリにアクセスして、「Fork」を押下した後に、自分のレポジトリから「Clone」を行います。

私みたいにローカルでやって見る方はVS CodeとVS Codeのextensionからes6-string-htmlをインストールして、準備をやりましょう。

2. Create the VueApp

クラス https://www.vuemastery.com/courses/intro-to-vue-3/creating-the-vue-app-vue3

まずは、「L2-start」ブランに切り替えてやって見ましょう。
サイトではプロとタイプや学習用としては最新バージョンを使うことをおすすめしていて、以下のコードで、最新ものを使えるようにしていますが、会社では3.0.11を使っていたので、3.0.11を利用します。
npmとか利用すると、楽だとは思いますが、この度は動画に従ってやって見ると言うことなので、同じくスクリプトを直接に入れて見ました。

index.html：最新バージョン利用時
<script src="https://unpkg.com/vue@next"></script>
index.html：3.0.11バージョン利用時
<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>

その後に、main.jsからすでにあるコードを削除して、下記のようにvueのアプリを作りましょう。

main.js：一般
const app = Vue.createApp({
    data: function() {
        return {
            product: 'Socks'
        }
    }
})
main.js：ES6
const app = Vue.createApp({
    data() {
        return {
            product: 'Socks'
        }
    }
})

index.htmlから作ったvueのアプリをマウントして、h1タグの中はマウントされたアプリから値を設定しましょう。

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Vue Mastery</title>
    <!-- Import Styles -->
    <link rel="stylesheet" href="./assets/styles.css" />
    <!-- Import Vue.js 3.0.11 version -->
    <script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>{{ product }}</h1>
    </div>

    <!-- Import App -->
    <script src="./main.js"></script>

    <!-- Mount App -->
    <script>
      const mountedApp = app.mount('#app')
    </script>
  </body>
</html>

その後はvs codeのデバックをChromeに設定して確認します。


デバックボタンを押下すると、下記の画面が表示されます。

課題はdescriptionデータオブジェクトを追加して、pタグにその内容を表示させることです。
私は課題を終わらせて、ブラウザーから表示して、productをスクリプトにて直接に変えて見ました。
クラスでは課題をする前にやる内容です。(笑)

console
mountedApp.product = "Sandals";

productが変更されることが確認できますね。