[Vue.js]初めてのVue.jsでhello world!

0からVue.jsを触るにあたり、慣例にならってhello world!を表示したいと思います。

Vue.jsでhello world!

HTMLの特定の場所に、JSで定義したhello worldを表示させます。

ファイル構成は以下の通り。

– index.html

– hello.js

HTMLはシンプル。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">
    {{ message }}
</div>
<script src="test.js"></script>

このmessageの箇所にhello worldを表示させます。

cdnでVue.jsを読み込んでいます。

ちなみにtest.jsの読み込みは上の方でやりたいところですが、今回指定するid=”app”よりも上に持ってくると動いてくれません。

JSファイルは以下のコードです。

new Vue({
    el: '#app',
    data: {
      message: 'hello world!'
    }
  })

あとはブラウザで実行すればhello world!の文字列が表示されています。

コード解説

new Vueでインスタンスを作成して、その中で様々な値を取り扱っています。

el:’#app’でhtml側のid=appを指定しています。

マウントすると言いますが、要素を指定しています。elはelement(要素)の略。

dataオブジェクトの中のmessageに文字列’hello world!’を格納しており、それをhtml側で表示しています。

ちなみに、html側で{{ message }}と記載していますが、{{ }}部分はマスタッシュと言います。英訳すると口髭ですが、髭のように見えることからこの名前がつくらしい。