[Vue.js] ディレクティブと式のTips

一つのv-onに２つのメソッドを指定する

<button @click="foo() + bar()">ボタン</button>

このように+で繋ぐとクリック時にfoo()とbar()の２つのメソッドが発火します。
+が特別な意味を持つというわけではなく*でも-でも同じで、JavaScript式として普通に評価されるためです。
短絡評価を使って、@click="disabled || foo()"などのように書くことも出来ます。

$emitの引数をv-on内の式で直接処理する

$emit('nice-event','foo!!!','bar???')とイベントを発火するとき、
Vue2.0初期のドキュメントでは、v-on:nice-event="foo = arguments[0];foo = arguments[1];"というやり方が書かれていましたが、
現在は次のようにアロー関数で書くことが推奨されてるみたいです。

<my-component 
v-on:nice-event="(x,y)=>{ 
    foo = x; 
    bar = y; 
}"
></my-component>

標準ビルトインオブジェクトが使用できる

<p v-if="Math.random() > 0.5">気まぐれに表示</p>

MathやDateなどホワイトリストに登録されている標準のグローバルオブジェクトを式の中で使用できます。
で、そのホワイトリストはどこなんだって話ですが、ここです。
const allowedGlobalsってやつですね。

requireが使用できる

<p>{{require('util').formatDate(date,'MM月dd日')}}</p>

ホワイトリスト見てもらえばわかりますが、実はrequireも使えます。
汎用的なテキスト関数は、Vueのグローバルに登録するのは嫌だし、mixinで毎回登録するのも億劫で、個人的にはよくエイリアス張ってrequireを使ってます。

v-bindに直接オブジェクトが渡せる

<p v-bind="{
  class:['aaa','bbb','ccc'],
  style:"color:red",
  id:'main'
}">test</p>

v-bind:class=""とやるのが推奨されていますが、v-bindに直接オブジェクトを渡すこともできます。
優先度はオブジェクトで渡したほうが高いみたい。
使い道としては、不定な属性名を使いたいときや、属性を付けたり消したりしたいときとか？

v-bindでDomのプロパティを操作する

<p v-bind:inner-html.prop="'baz'"></p>

.prop修飾子を使うと属性ではなくDOMのプロパティに対してバインディングできます。
vue.jsだけ使ってる場合にはあまり意味はないですが、他のライブラリと組み合わせる時、どうしても必要になったりします。