Vue.js を試してみました。JavaScriptのフレームワークの中でもアプリ全体のフレームワークとしてではなく、jQueryのようにパーツとして使うこともできるので、簡単に試せます。インストール不要で、HTMLにVue.jsをCDNから読み込むscriptタグを書くだけです。

本題

Vueのインスタンスを生成するときにHTMLの要素を指定する必要がありますが、普通はidで指定して次のようにします。

new Vue({ el: "#ELEMENT_ID" })

これをclassで指定しようと思って次のように書くと、このclassに該当する最初の要素に対してしかVue.jsが動作しません。

new Vue({ el: ".ELEMENT_CLASS" })

jQueryも併用していれば、次のように書けばこのclassに該当するすべての要素に対してVueインスタンスを生成させられることに気が付きました。

$(".ELEMENT_CLASS").each(function () {
    new Vue({ el: this })
});

jQueryを使っていなければ querySelectorAll メソッドを使ってもできそうです。

この方法を見つけたあとに、ページ全体のdivなどの要素でVueインスタンスを1つ作れば十分だと気がついたので、活躍どころはわかりません。

suzuki-navi’s blog