サンプルコードを使ってテキストを表示しよう

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ですね。

参考リンク

はじめに – Vue.js

著者:bouya Imamura

Vue.js辞典 TOP