Open15
Vue.js 学習
plaincode_jpdev tool
以下のいずれか
- Get the Chrome Extension / (beta channel)
- Get the Firefox Addon / (beta channel)
- Get standalone Electron app (works with any environment!)
plaincode_jpV3 公式
plaincode_jpCDNで使う
<script src="https://unpkg.com/vue@next"></script>
本番環境では、新しいバージョンによる意図しない不具合を避けるため、特定のバージョン番号とビルド番号にリンクすること
NPMでインストール
# 最新安定版
$ npm install vue@next
テンプレート構文
テキスト
<span>Message: {{ msg }}</span>
HTMLを出力
v-htmlディレクティブを使う。ユーザの入力値をそのまま出力しない、など安全面は留意する。
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
おさえるポイント
- 条件分岐
- ディレクティブ
- コンポーネント
- フォーム
- ライフサイクル
- ルーティング
plaincode_jpルーティング
基本は、vue-router を使う。
plaincode_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
双方向バイディング
plaincode_jpコンポーネントの分割とimport
plaincode_jpcomputed, watch, method
computedプロパティ
- 算出プロパティ
plaincode_jpVue バージョン確認
プロジェクト毎にバージョン表示される
$ npm list vue
vue-hoge@1.0.0 /Users/fuga/project/vue-hoge
└── vue@2.6.10
Vue CLI のバージョン確認
$ vue -V
動的コンポーネント
tabメニューのように、コンポーネントを動的に切り替える。
is属性で、実現する
<!-- currentTabComponent が変更されたとき、コンポーネントを変更します -->
<component v-bind:is="currentTabComponent"></component>
親コンポーネントから子にpropsを渡す
plaincode_jpv-model はこのへんを理解しておく
plaincode_jprouter-link の使い方
plaincode_jp親コンポーネントインスタンスへのアクセス
// 祖先の getMap にアクセスする
this.$parent.getMap
↑の代替手段として、依存性注入がある。
いずれの方法も、コンポーネント間の依存が強くなるため、頻度が大きいならVuexなど状態管理パッケージを考える。