--- title: Vue.js の基本的な機能を使ったサンプルを書く tags: Vue.js JavaScript author: niwasawa slide: false --- ## 概要 - Mustache 構文、条件付きレンダリング、メソッド、算出プロパティ、フォーム入力バインディング、リストレンダリング、コンポーネントの機能を使ったサンプルコードを示す - 環境: Vue.js 2.6.11 ## Mustache 構文で Hello World - 画面に Hello, world! と表示するサンプルコード ```html Hello, world!

{{ message }}

``` [テンプレート構文 — Vue\.js](https://jp.vuejs.org/v2/guide/syntax.html) > データバインディングのもっとも基本的な形は、”Mustache” 構文(二重中括弧)を利用したテキスト展開です: ## 条件付きレンダリング、メソッド、算出プロパティ - 「カウントアップ」ボタンを押すとカウント数が1増える - カウント数を表示する - 3の倍数のときはカウント数ではなく「あほー」と表示する ```html Counter

カウンター: {{ myMessage }}

6の倍数ですね

3の倍数ですね

2の倍数ですね

2の倍数でも3の倍数でもないですね

``` [イベントハンドリング — Vue\.js](https://jp.vuejs.org/v2/guide/events.html) > v-on ディレクティブを使うことで、DOM イベントの購読、イベント発火時の JavaScript の実行が可能になります。 [API — Vue\.js](https://jp.vuejs.org/v2/api/#v-bind) > v-bind > 1つ以上の属性またはコンポーネントのプロパティと式を動的に束縛します。 [条件付きレンダリング — Vue\.js](https://jp.vuejs.org/v2/guide/conditional.html) > v-if ディレクティブは、ブロックを条件に応じて描画したい場合に使用されます。ブロックは、ディレクティブの式が真を返す場合のみ描画されます。 [Vue インスタンス — Vue\.js](https://jp.vuejs.org/v2/guide/instance.html) > Vue インスタンスが作成されると、自身の data オブジェクトの全てのプロパティをリアクティブシステムに追加します。これらのプロパティの値を変更すると、ビューが”反応”し、新しい値に一致するように更新します。 [Vue インスタンス — Vue\.js](https://jp.vuejs.org/v2/guide/instance.html) > 各 Vue インスタンスは、生成時に一連の初期化を行います。例えば、データの監視のセットアップやテンプレートのコンパイル、DOM へのインスタンスのマウント、データが変化したときの DOM の更新などがあります。その初期化の過程で、特定の段階でユーザー自身のコードを追加する、いくつかの ライフサイクルフック(lifecycle hooks) と呼ばれる関数を実行します。 > > 例えば、created フックはインスタンスが生成された後にコードを実行したいときに使われます。 [算出プロパティとウォッチャ — Vue\.js](https://jp.vuejs.org/v2/guide/computed.html) > 算出プロパティの代わりに、同じような関数をメソッドとして定義することも可能です。最終的には、2つのアプローチは完全に同じ結果になります。しかしながら、算出プロパティはリアクティブな依存関係にもとづきキャッシュされるという違いがあります。 ## フォーム入力バインディング、リストレンダリング - フォームに入力したテキストをリストに追加 - リストを表示 ```html List
``` [フォーム入力バインディング — Vue\.js](https://jp.vuejs.org/v2/guide/forms.html) > form の input 要素 や textarea 要素、 select 要素に双方向 (two-way) データバインディングを作成するには、v-model ディレクティブを使用することができます。 [リストレンダリング — Vue\.js](https://jp.vuejs.org/v2/guide/list.html) > 配列に基づいて、アイテムのリストを描画するために、v-for ディレクティブを使用することができます。v-for ディレクティブは item in items の形式で特別な構文を要求し、items はソースデータの配列で、item は配列要素がその上で反復されているエイリアスです: ## コンポーネント - それぞれ別のカウント値を持ったカウンター - ボタンを押すとカウント数が1増える ```html Counters by Components
``` [コンポーネントの基本 — Vue\.js](https://jp.vuejs.org/v2/guide/components.html) > コンポーネントは再利用可能な Vue インスタンスなので、data、computed、watch、methods、ライフサイクルフックなどの new Vue と同じオプションを受け入れます。唯一の例外は el のようなルート固有のオプションです。 ## コンポーネントのプロパティ - 表示情報のデータをコンポーネントに渡す ```html Blog Posts by Components
``` [コンポーネントの基本 — Vue\.js](https://jp.vuejs.org/v2/guide/components.html) > プロパティはコンポーネントに登録できるカスタム属性です。値がプロパティ属性に渡されると、そのコンポーネントインスタンスのプロパティになります。 ## 参考資料 - [はじめに — Vue\.js](https://jp.vuejs.org/v2/guide/) - [API — Vue\.js](https://jp.vuejs.org/v2/api/)