Vue.js 一番簡単なサンプル

投稿日：2018年4月29日

Vue.jsが流行しているようですので、勉強していきたいと思います。
まずは公式ページにもある、一番簡単なサンプルを作っていきましょう！

Vue.jsの読み込み（Vue.js一番簡単なサンプル）

CDNがありますので、そちらを参照します。
開発用と本番用があるみたいですが、今回は本番用を参照します。

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

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

<div id="app">
　　{{ message }}
</div>
<script src="js/script.js"></script>

</div>

Vue.jsのオブジェクトは、自身の有効範囲を「id」で指定できます。
今回は「app」というidを付けておきます。

その中に「{{ message }}」と書いておきます。
これがVue.jsのオブジェクトで作ったものと紐付けられることになります。

次にVue.jsのオブジェクトを作っていきましょう。

「script.js」を新しく作ってください。
ここでVue.jsのオブジェクトを作っていきます。

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
  }
});

var app = new Vue({

el: '#app',

data: {

message: 'Hello Vue!',

}

});

[ 2行目 ]
「el: ‘#app’」でHTMLで指定したidと同じものを設定します。

[ 3〜5行目 ]
Vue.jsで使用する変数は「data」オブジェクトの中で宣言します。
今回は「message」という変数を作り「Hello Vue!」という文字列を入れておきます。

これでVue.jsの一番簡単なサンプルが出来上がりました。
表示させてみると画面に「Hello Vue!」と表示されているはずです。

See the Pen xjggGe by clue-design (@clue-design) on CodePen.0

大きな画面でみたい場合はこちらから。

スクリプトで作ったオブジェクトの変数の値で、「{{message}}」が置き換わっているというサンプルですね。

色々と面白いことができそうですね！

執筆者：sasaki