参考にさせて頂いたページ
http://vuejs.org/guide/directives.html
http://vuejs.org/api/directives.html
体で覚えるVue.js - ディレクティブ編 〜 JSおくのほそ道 #023 - Qiita
バージョン
Vue.js v0.11.5
概要・書式
http://vuejs.org/guide/directives.html
によると基本的に以下のような感じに書くとのことで
<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>
みたいな感じで書いたりします。
フィルターを使うと、文字列を大文字にしたりそういう事ができます。
フィルターについてはまた今度。
今日のまとめ
基本的には、
http://vuejs.org/api/directives.html
のページの左カラムのナビをコピペしたような内容だけど、自分の頭が少し整理できた。
