スポンサーリンク

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

Vue.jsを使ってWebブラウザでテキストを表示

vue.jsの機能を搭載したhtmlファイルを使って、

Webブラウザでテキストを表示させてみます。

 

サンプルコード index.html(名前はhtmlであれば何でもいい)

実行結果(index.htmlをChromeで開く)

解説

<head>内に、vue.jsのおまじないのコードを書き込み、

vue.jsをhtml上で使えるようにします。

 

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

<div>内

<script>内

<script>内では、Vueインスタンスを作成しています。

elにはid, dataには名前:データを入れて、

<div>内では、idにelで指定したidを入れて、{{ message }}で、dataで作った値を取得しています。

まとめ

  • elにidを指定し、指定したidを持ったタグ内でVueインスタンスのデータが使える。
  • dataに入っている値を呼び出すときは、{{ キー名 }}で取得する。
  • <script>内で、Vueインスタンスを作ってデータを作る。

参考

はじめに — Vue.js

Vue.js
スポンサーリンク
シェアする
trelab