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とか利用すると、楽だとは思いますが、この度は動画に従ってやって見ると言うことなので、同じくスクリプトを直接に入れて見ました。
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/vue@3.0.11/dist/vue.global.js"></script>
その後に、main.jsからすでにあるコードを削除して、下記のようにvueのアプリを作りましょう。
const app = Vue.createApp({
data: function() {
return {
product: 'Socks'
}
}
})
const app = Vue.createApp({
data() {
return {
product: 'Socks'
}
}
})
index.htmlから作ったvueのアプリをマウントして、h1タグの中はマウントされたアプリから値を設定しましょう。
<!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/vue@3.0.11/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をスクリプトにて直接に変えて見ました。
クラスでは課題をする前にやる内容です。(笑)
mountedApp.product = "Sandals";
productが変更されることが確認できますね。