Vue.jsでテキストを表示する
Vue.jsを使ってテキストを表示します。
Vue.jsのインストール方法について知りたい場合は、以下のページをご参考ください。
Vue.jsを使ってテキストを表示する
HTMLファイルを作って、以下のサンプルコードをコピー&ペーストしてブラウザで表示しましょう。
サンプルコード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'テキスト表示'
}
})
</script>
</body>
</html>
実行結果
やっていること
id「app」の要素内にある「{{ message }}」の箇所に「テキスト表示」という文字を代入しています。
HTMLを読み込んでからVue.jsスクリプトを実行しよう
対象となるHTMLを読み込んでからVue.jsスクリプトを実行する必要がありますので、読み込み順については注意が必要です。
例えばHTMLを読み込む前にVue.jsスクリプトを実行すると、テキストが表示されません。コンソールには以下のような警告が表示されます。
[Vue warn]: Cannot find element: #app
「要素が見つけられませんよ」みたいな意味です。
Vue.jsスクリプトを対象のHTMLよりも上部に書く場合は、イベントリスナー「DOMContentLoaded」を使ってもいいと思います。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var app = new Vue({
el: '#app',
data: {
message: 'テキスト表示'
}
})
});
</script>
<div id="app">
{{ message }}
</div>
</body>
</html>
「HTMLを読み込んでから実行」と覚えておけばOKですね。
このページを共有する