Vue 導入とHelloWolrdの表示

参考サイト

kikuchance.com

導入

Vueの導入はCDNを使った方法と関連ファイルをダウンロードする方法があるそうですが、今回はCDNを使った方法を紹介します。
その場合はこちらのコードをHTMLファイルに追加すればOKです。ヘッダー辺りに追加しましょう。

<script src="https://unpkg.com/vue@next"></script>

Hello Worldの表示

次にHello Wolrdを表示します。こちらのコードを動かせばOKです。動かしてみてわかったことは次の通りです。

• scriptの箇所はdivより後に書かないとダメだった。
• script内のmessageの文字列を変えることで、表示される文章も変化。
• appdata内のdataはdata2などと宣言すると動かなかった。

<div id="idName">
    {{ message }}
</div>

<script>
    const appdata = {
        data: function () {
            return {
                message: 'Hello World'
            }
        }
    }
    Vue.createApp(appdata).mount('#idName')
</script>

Hello Worldの表示②

先ほどのappdata内のdataは複数の返り値を持たせることができるみたいなので、これでもほぼ同じような動作をします。

<div id="idName">
    {{ message }}{{ description }}
</div>

<script>
    const appdata = {
        data : function() {
            return {
                message: 'Hello_',
                description: "World"
            }
        }
    }
    Vue.createApp(appdata).mount('#idName')
</script>