【vue.js】初挑戦！Hello world!を表示してみた

Vue.js（ビュージェイエス）というフレームワークをご存知でしょうか。
そんなの常識だと言われるかもしれませんが、私は今年（2018年）に入って初めて知りました。

Wikipedia先生曰く、初版は2014年2月。つまり4年前。
この4年間の間に一気に有名になったJavaScriptのフレームワークです。

そんなVue.jsが気になって気になって仕方なかった今日この頃。
ついに伝統的なプログラミング第一歩「HelloWorld!」を表示することに成功しました。

Vue.jsでHello world

Vue.js入門のコードを参考に書いてみたのがこちらです。

HTML

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

<body>
  <div id="app-1">{{message}}</div>
</body>

JavaScript

var app1 = new Vue({
  el:"#app-1",
  data:{message:"Hello world!"}
})

出ました！！！Resultタブを見ると「Hello world!」と表示されています！！
どうやらJavaScript側で、elに対象のエレメントを、dataに表示する値を設定しているようです。

しかし、 var app1 = new Vue({}) とapp1を宣言していいますが、このapp1はあとで何かに活用できるのでしょうか？
それともvue.jsではこう書くんだよ！と思って気にしない方が良いのでしょうか。
要調査です(>_<)

試しに、Hello worldを震えさせてみました。

楽しー♪♪♪

記事をシェアする