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・簡単な導入方法・デバッグ・結果の表示とメモ化

Ruby on RailsによるWEBシステム開発、Android/iPhoneアプリ開発、電子書籍配信のことならお任せください この記事を書いた人と働こう! Ruby on Rails の開発なら実績豊富なBPS

この記事の著者

hachi8833

Twitter: @hachi8833、GitHub: @hachi8833 コボラー、ITコンサル、ローカライズ業界、Rails開発を経てTechRachoの編集・記事作成を担当。 これまでにRuby on Rails チュートリアル第2版の半分ほど、Railsガイドの初期翻訳ではほぼすべてを翻訳。その後も折に触れてそれぞれ一部を翻訳。 かと思うと、正規表現の粋を尽くした日本語エラーチェックサービス enno.jpを運営。 実は最近Go言語が好き。 仕事に関係ないすっとこブログ「あけてくれ」は2000年頃から多少の中断をはさんで継続、現在はnote.muに移転。

hachi8833の書いた記事

週刊Railsウォッチ

インフラ

BigBinary記事より

ActiveSupport探訪シリーズ