Vue.jsガイドの英語版を上から順に読んでいく
{{ xxx }}, v-bind （Mustache Syntax）
●data-bindingをしたい場合は{{}}(mustache)を使う。
●HTML構文の中では使えない。
→HTML構文の中で使う場合は、v-bind(Directive)を使う。
<p>{{ message }}</p>
<div v-bind:message="mustache"></div>
●mustacheはHTMLではなくプレーンテキスト（文字列）として認識される。
●mustacheの中の式はJavascriptとして処理される。
Directives
●v-から始まるもの
●mustacheの値が変わった際にすぐ反応することを期待して作られた
●argumentとvalueを指定できる
v-bind:argument="value"
ex)
v-bind:href="url"
v-on:click="addToCart"
●argumentには式(JavaScript)を記入できる
→式そのものは文字列として認識される。
→スペースと'は使えない（コンパイルエラーになる）
ex)
hereIsArgument = "href"
v-bind:[hereIsArgument]="url"
→v-bind:href="url"として認識される
Modifier
●v-bindなどのdirectiveの後ろにつけられる.のこと
●directiveを特別な方法で開始するもの
●それぞれのdirectiveに対してそれぞれmodifierが決まっており、それぞれ特定の処理を呼び出す
ex)
<form v-on:submit.prevent="onSubmit"> ... </form>
→.preventはv-onに対して、submit実行前にevent.preventDefault()を呼ばせる
＝ submit実行前に.preventの処理（event.preventDefault())が走る
computed:
●valueを変えて式を繰り返し使いたい場合はcompute:に宣言する
（→メソッドと同じでは・・・？）
●methods:の式は呼ばれる度実行されるが、compute:の式はvalueが変わらなければ実行されない
→compute:の式はvalueが変わると実行され、新しいvalueがキャッシュされるので、
valueが変わらなければキャッシュのvalueがずっと使用される
→ただしDate.now()はreactiveなものではないので、compute:に宣言しても実行されない
●実行結果をキャッシュしたくないとき（その都度データを更新したいとき）はmethods:に宣言する
●基本的にcompute内の宣言はgetterしか持たないが、setterを持つhjjhhhこともできる
watch
●Vueインスタンス上のデータが動的に変わるかを監視するもの
→compute:上に宣言するほうがコードも短くて済む
class
●classにはobject, arrayが使用できる。
●Component内でclassをbindingした場合、そのcomponent（root）のクラスにbindしたクラスが「追加」される（＝上書きされない）
---JS-------------------------
Vue.component('my-component', {
template: '<p class="foo bar">Hi</p>'
})
--------------------------------
---HTML-------------------------
<my-component class="baz boo"></my-component>
--------------------------------
---Result-----------------------
<p class="foo bar baz boo">Hi</p>
--------------------------------
style
●キャメルケース(camelCase）かケバブケース(kebab-case)が使用できる
→ケバブケースの場合は'で囲む必要がある（'kebab-case'）