Vue2.xでは仮想DOMが使われるようになりました。それに伴い、「Vue用のテンプレート」を「仮想DOMをレンダリングするための関数」に変換するという処理をコンパイル時に行ってくれる仕組みが組み込まれています。 そして、お手軽にVueを試したい人、プロダクトにVueを使いたい人、コンポーネント志向でアトミックに実装したい人など、様々な用途に応じたテンプレートの書き方(&コンパイルの方法)を用意してくれています。 そのためテンプレートの書き方とコンパイルの種類については仕様がやや複雑で、公式ドキュメントだけでは理解が難しくけっこうハマりどころだと感じている(事実ずっぽりハマりました)ので、知見を残しておこうと思います。 ※この記事を書いている時点でのVueのバージョンは2.2.1です。 おさらい Vue.jsの利用方法3パターン まずVueの利用方法の確認から。 <script>埋め込み
![Vue2.x系のハマりどころ templateとコンパイラを完全解説するよ - 青空コメントアウト](https://cdn-ak-scissors.b.st-hatena.com/image/square/336d8a49294542c4801401d930c55210dfac3b14/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fc%2Fcocoro27%2F20170308%2F20170308195311.png)