スポンサーリンク

vue.js テキストをWebブラウザで表示させる

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上で使えるようにします。

 

重要な部分はこの2つですね。

<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インスタンスを作ってデータを作る。

参考

はじめに — Vue.js