Open15

Vue.js 学習

plaincode_jpplaincode_jp

CDNで使う

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

本番環境では、新しいバージョンによる意図しない不具合を避けるため、特定のバージョン番号とビルド番号にリンクすること

NPMでインストール

# 最新安定版
$ npm install vue@next
plaincode_jpplaincode_jp

テンプレート構文

テキスト

<span>Message: {{ msg }}</span>

HTMLを出力

v-htmlディレクティブを使う。ユーザの入力値をそのまま出力しない、など安全面は留意する。

<p>Using v-html directive: <span v-html="rawHtml"></span></p>
plaincode_jpplaincode_jp

おさえるポイント

  • 条件分岐
  • ディレクティブ
  • コンポーネント
  • フォーム
  • ライフサイクル
  • ルーティング
plaincode_jpplaincode_jp

ディレクティブ

ディレクティブは、Vue によって提供された特別な属性であることを示す(・・・)レンダリングされた DOM に特定のリアクティブな振る舞いを与えます。

リアクティブ とは

以下を実現する仕組みのようなもの

  • いずれかの値に変化があった時に検出する
  • それを変更する関数を追跡する
  • 最終的な値を更新できるように関数を発火させる

v-bind

指定した属性を動的に変化させる。また、データを指定したコンポーネントに渡す。

<!-- bind an attribute -->
<img v-bind:src="imageSrc" />

<!-- 省略形 -->
<img :src="imageSrc" />

v-if v-else

v-if のみ

<div id="conditional-rendering">
  <span v-if="seen">Now you see me</span>
</div>

if,else

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-on

on-clickなどイベントの取得

<!-- 完全な構文 -->
<a v-on:click="doSomething"> ... </a>

<!-- 省略記法 -->
<a @click="doSomething"> ... </a>

v-model

双方向バイディング

https://v3.ja.vuejs.org/api/directives.html

plaincode_jpplaincode_jp

Vue バージョン確認

プロジェクト毎にバージョン表示される

$ npm list vue
vue-hoge@1.0.0 /Users/fuga/project/vue-hoge
└── vue@2.6.10 

Vue CLI のバージョン確認

$ vue -V
plaincode_jpplaincode_jp

動的コンポーネント

tabメニューのように、コンポーネントを動的に切り替える。

is属性で、実現する

<!-- currentTabComponent が変更されたとき、コンポーネントを変更します -->
<component v-bind:is="currentTabComponent"></component>
plaincode_jpplaincode_jp

親コンポーネントインスタンスへのアクセス

// 祖先の getMap にアクセスする
this.$parent.getMap

https://jp.vuejs.org/v2/guide/components-edge-cases.html#親コンポーネントインスタンスへのアクセス

↑の代替手段として、依存性注入がある。

https://jp.vuejs.org/v2/guide/components-edge-cases.html#依存性の注入

いずれの方法も、コンポーネント間の依存が強くなるため、頻度が大きいならVuexなど状態管理パッケージを考える。