Vue.jsの書籍で勉強中にシングルクォート記号の書き方について分からない部分があったので調べたことのメモです。
分からなかった箇所
template: '<p v-on:click="doAction" v-bind:class="{\'alert-warning\':isInfo,\'alert-dark\':isDark}" class="alert">clicked:{{counter}}.</p>'
不明点
\'alert-warning\'と書くのはなぜか？
調べて分かったこと
オブジェクトのキー名にハイフン（‐）を含む名前を指定できない
算術演算子として認識されてしまうのかな？と思っています（違っていたら教えて下さい…！）
→{alert-warning:isInfo}とは書けない。alert-warningをテキストとして{'alert-warning':isInfo}と書きたい
シングルクォートで括られたテキストの中でシングルクォート記号を書く特別なやり方がある
- 今回だとtemplate:以降のシングルクォート（'）で囲まれているすべてがテキストであり、シングルクォートで括られたテキストの中でシングルクォート記号を書くということになる。
このときにシングルクォート記号を書くやり方が\'
エスケープシーケンスの一種のようです
→{'alert-warning':isInfo}とも書けないので{\'alert-warning\':isInfo}と書く
参考