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>