Vue.jsサンプルコード（01〜03）Hello World・簡単な導入方法・デバッグ・結果の表示とメモ化

こんにちは、hachi8833です。新シリーズ「Vue.jsの使い方」では、BPS Webチームのakioさん作のVue.jsのサンプルコードを順次掲載いたします。公式サイトのサンプルコードが全体に散らばっていてちょっと探しにくかったので、やりたいこと別の最小限のサンプルが欲しくて作ったとのことです。

Vue.jsのドキュメントをひととおり読んだことがあり、すぐ動かせる最小限のサンプルコードを探している方を対象としています。また、Vue.jsをまだやったことのない方でも、このサンプルコードを動かしてみることでVue.jsでどんなことができるか雰囲気をつかみやすくなると思います。

Vue.jsそのものについて詳しくは、公式サイトの「Vue.js」あたりからご覧ください。

• 次の記事: 04: 双方向データバインディングを使ってみる

01. 手元で Hello, World してみるには？

10秒あればできる！？

↓これをそのままa.htmlファイルなどにコピペしてopen a.htmlする。

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

<div id="app">
  {{a}}
</div>

<script>
  new Vue({
    el: "#app",
    data: {
      a: "Hello, World",
    },
  })
</script>

補足

上のscriptタグで読み込む方法は、RailsでのVue.js導入方法がよくわからないor面倒な場合にも使えます。他のJavaScriptライブラリと組み合わせず、jQueryの代わりに使うのであれば、ビューに以下のように書くだけで十分です。

<script src="https://unpkg.com/vue"></script>
<script>
何か書く
</script>

02. デバッグ方法は？

1. vuejs-devtools（Chrome 用の拡張機能）をインストール
2. デベロッパーツールで [Vue] タブを選択する

ここで変数などを確認できる。

Vue.jsが導入されていないページでは [Vue] タブは表示されない。

03. a + b の結果を表示するには？

ポイント: computedの結果はメモ化される（値が変わるまで再計算されない）。computedは表示の高速化に有用なので、積極的に使いたい。

サンプルコード

• Vue.jsバージョン: 2.5.2

• 次の記事: 04: 双方向データバインディングを使ってみる

バックナンバー（Vue.jsサンプルコード）

Vue.jsサンプルコード（01〜03）Hello World・簡単な導入方法・デバッグ・結果の表示とメモ化

• Vue.jsサンプルコード（04）双方向データバインディングを使ってみる
• Vue.jsサンプルコード（05）複数のinputに同じ変数を割り当てる
• Vue.jsサンプルコード（06）合計金額をリアルタイムに表示する
• Vue.jsサンプルコード（07）入力文字数をリアルタイムにプレビューする
• Vue.jsサンプルコード（08）入力したカラーコードをリアルタイムでプレビューする
• Vue.jsサンプルコード（09）カラーピッカーで選択した色を動的に表示する
• Vue.jsサンプルコード（10）スライダーで入力したカラーコードを動的に表示する
• Vue.jsサンプルコード（11）ラベルをクリックして表示開閉とラベル変更を行う
• Vue.jsサンプルコード（12）特定の単語を入力したらボタンを無効にする
• Vue.jsサンプルコード（13）「承認」チェックボックスをオンにしないと「送信」ボタンを押せないようにする
• Vue.jsサンプルコード（14）「承認」ボタンを押したら解除できないようにする
• Vue.jsサンプルコード（15）パスワードのマスクを解除する
• Vue.jsサンプルコード（16）パスワードを入力中だけ表示する