← All Articles

Vue.jsをCDNから読み込んで使ってみる。

Posted on

はじめに

今年はVue.jsを学習しようとおもいます。

まず参考書を見ながら手を動かして早く習得できるようにしたいです。

ここでは、CDNのVue.jsを読み込んで

「Hello Vue!」という文字列を出力してみたのでその内容をメモしておきます。

CDN

最新バージョンのVue.jsを使いたい場合は、

以下の一行を追加すればCDNから読み込んで使えるそうです。

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

サンプル

以下のソースコードをローカルのhtmlファイルに保存して

ブラウザで開くと「Hello Vue!」と表示されるはずです。

<body>
    <div id="app">
        <p>{{ message }}</p>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script >
        const hello = {
            data() {
                return {
                    message: 'Hello Vue!'
                }
            }
        }

        Vue.createApp(hello).mount('#app')

    </script>
</body>

想定の画面

20220116-1

参考文献

vuejs.org

技術Vue