読者です 読者をやめる 読者になる 読者になる

Motomichi Works Blog

その日学習したことについて書いている日記です。誰かの役に立ったらそれはそれで嬉しいです。

vue.jsその0004 Directivesについて

参考にさせて頂いたページ

Directives - vue.js

Directives - vue.js

体で覚えるVue.js - ディレクティブ編 〜 JSおくのほそ道 #023 - Qiita

バージョン

Vue.js v0.11.5

概要・書式

Directives - vue.js

によると基本的に以下のような感じに書くとのことで

<element prefix-directiveId="[argument:] expression [| filters...]">
</element>
  • element
  • prefix
  • directiveId
  • argument
  • expression
  • filters

といったもので構成されています。

element

html要素がこれにあたります。

divとかinputとか。

prefixとdirectiveId

prefixはv-で、以下のようなものがあります。

Reactive Directives

  • v-text
  • v-html
  • v-show
  • v-class
  • v-attr
  • v-style
  • v-on
  • v-model
  • v-if
  • v-repeat
  • v-with
  • v-events

Literal Directives

  • v-component
  • v-ref
  • v-el
  • v-partial
  • v-transition

Empty Directives

  • v-pre
  • v-cloak

具体的な使い方は、私が書くより

体で覚えるVue.js - ディレクティブ編 〜 JSおくのほそ道 #023 - Qiita

を見たり、上から順番にコツコツ検索すると良さそう。

argumentとexpression

  • 引数として何を渡してやるか
  • 何を出力するか

といったことを

<div v-text="example"></div>

みたいな感じで書いたりします。

フィルターを使うと、文字列を大文字にしたりそういう事ができます。

フィルターについてはまた今度。

今日のまとめ

基本的には、

Directives - vue.js

のページの左カラムのナビをコピペしたような内容だけど、自分の頭が少し整理できた。