Tech Racho エンジニアの「?」を「!」に。
  • 開発

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

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

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

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

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


バックナンバー(Vue.jsサンプルコード)

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


CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。