Vue.jsを使ってWebブラウザでテキストを表示
vue.jsの機能を搭載したhtmlファイルを使って、
Webブラウザでテキストを表示させてみます。
サンプルコード 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上で使えるようにします。
重要な部分はこの２つですね。
<div>内
<div id="app">
{{ message }}
</div>
<script>内
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
<script>内では、Vueインスタンスを作成しています。
elにはid, dataには名前：データを入れて、
<div>内では、idにelで指定したidを入れて、{{ message }}で、dataで作った値を取得しています。
まとめ
- elにidを指定し、指定したidを持ったタグ内でVueインスタンスのデータが使える。
- dataに入っている値を呼び出すときは、{{ キー名 }}で取得する。
- <script>内で、Vueインスタンスを作ってデータを作る。
