スポンサーリンク

はじめにvue.jsの機能を使ってhtmlを書いてみる

公式ドキュメントを参考にして、

Vue.jsの学習をしていきます。

Vue.jsの導入

Vue.jsを使うには様々な方法があるみたいですが、

一番簡単なのは、htmlのコードに、<script>タグでvue.jsを読み込んで使うやり方なので、

最初はそれでVue.jsを使っていきます。

 

<script>タグで導入するやり方は、下記のコードをhtmlファイルに書き込むことで、

導入できるようです。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Vue.jsを使う

実際にvue.jsを使ってみます。

 

サンプルコード 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上で使えるようにします。

 

他の内容は公式ドキュメントの「はじめに — Vue.js」を参考にして、

書いているだけです。動きに関しての詳細は別で説明します。

 

もし、<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>というおまじないのコードがなければ、下記のような結果になります。

{{ message }}という部分が、vue.jsの機能によって変換されずに表示されてしまいます。

そのため、<script>タグで、vue.jsを読み込むことは必須となっています。

参考

はじめに — Vue.js