公式ドキュメントを参考にして、
Vue.jsの学習をしていきます。
Vue.jsの導入
Vue.jsを使うには様々な方法があるみたいですが、
一番簡単なのは、htmlのコードに、<script>タグでvue.jsを読み込んで使うやり方なので、
最初はそれでVue.jsを使っていきます。
<script>タグで導入するやり方は、下記のコードをhtmlファイルに書き込むことで、
導入できるようです。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
Vue.jsを使う
実際にvue.jsを使ってみます。
サンプルコード index.html(名前はhtmlであれば何でもいい)
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
</html>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
実行結果(index.htmlをChromeで開く)
解説
<head>内に、vue.jsのおまじないのコードを書き込み、
vue.jsをhtml上で使えるようにします。
他の内容は公式ドキュメントの「はじめに — Vue.js」を参考にして、
書いているだけです。動きに関しての詳細は別で説明します。
もし、<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>というおまじないのコードがなければ、下記のような結果になります。
{{ message }}という部分が、vue.jsの機能によって変換されずに表示されてしまいます。
そのため、<script>タグで、vue.jsを読み込むことは必須となっています。
