vue.jsを学ぶ (1. Hello World! 編）

※「ためスタ」とは、Takahiroが試してみたいと思ったことを、少し時間を確保して、調べながら学習するコーナーです。

流行ってますよね、vue.js

少なくとも、私の周りでは流行ってます。
流行っているというか、めっちゃいいよ、という話を聞きます。

そんなことを聞いたら、

使ってみたくなっちゃいますよね？
うずうずしちゃいますよね？

ということで、使ってみました。

公式ページへ

vue.jsを使うために

vue.jsを読み込みましょう。

<script src="https://unpkg.com/vue"></script>

ただ、これで良いのです。
head要素の中か、body閉じタグの前あたりに書きましょう。
※「https://unpkg.com/vue」で最新バージョンが読み込むことができます

Hello World!

さて、まずやるべきことはただひとつ。。
Hello World! しましょう！

html

<div id="app">   <!-- 手順① idまたはclassを付与する -->
  <h1>{{ text }}</h1>   <!-- 手順⑤ ④で定義したデータを表示する -->
</div>                   

javascript

const firstApp = new Vue({   //手順② Vueインスタンスを生成する el: '#app', //手順③ ①で付与したidまたはclassを指定する data: { text: 'Hello World!' //手順④ ③で指定したhtml要素で表示したいデータを定義する } });

さて、どうでしょうか。
デモ画面へ

良い感じですね！

使ってみて、Hello World!やるまでが楽でした。
いままで業務でBackbone.jsを使っていましたが、Hellow World!をやってみただけでもVue.jsのほうがコード量が少なくて済みそうで、良い感じな気がします。

次回は、if や for などのよく使う構文を使ってみたいと思います。

これで、ちょっと成長しましたね。
無理せずちょいちょい頑張りましょう！