【Vue.js】Vue.jsを使ってHello Vue.js!を表示させてみる。

Vue.js

Vue.jsのCDN

Vue.jsの検索バーで「インストール」を検索する。
f:id:tender-gorilla:20190429101220p:plain
インストールの画面中盤にCDNの項目があるので、こちらのコードをコピー。
f:id:tender-gorilla:20190429101348p:plain
なお、貼り付け先はHTMLファイルのここ

<body>
  // コードを書いていく
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</body>

現在の本番環境でのバージョンは2.6.10となっているが、こちらを指定することで好きなバージョンでの表示が可能となる。
例えばバージョン2.5.10ならこう。

<body>
  // コードを書いていく
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.10/dist/vue.js"></script>
</body>

なお、これは開発環境での書き方なので本番環境では末尾のvue.jsをvue.min.jsに書き換える。

<body>
  // コードを書いていく
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.10/dist/vue.min.js"></script>
</body>

Vueインスタンス

インスタンスの変数名は慣例的にappかvmが使われる。
コンソールからアクセスするときに使う。
特に必要がなければ使わなくても良い。

var app = new Vue({

})

Hello Vue.js!を書く

まずは初歩の初歩、Hello Vue.js!を出せるようにする。
HTMLコード

<div id="app">
  <p>
    <input type="text" v-model="message">
  </p>
  <p>
    {{ message }}
  </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Vueコード

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

できたのがこちら。


inputの値とpタグの値がリンクしている。
これをデータバインディングという。
inputのvalueが変わると、vueのdata内messageの値が変わり、それを使っている{{message}}の値も合わせて変わっている。

jQueryを使うよりも、コード量が少なくて済むのがいいところかも。