初心者によるVue.jsガイド(English)の備忘録

Vue.jsガイドの英語版を上から順に読んでいく

{{ xxx }}, v-bind （Mustache Syntax）

●data-bindingをしたい場合は{{}}(mustache)を使う。
●HTML構文の中では使えない。
→HTML構文の中で使う場合は、v-bind(Directive)を使う。

<div v-bind:message="mustache"></div>```

<b>●mustacheはHTMLではなくプレーンテキスト（文字列）として認識される。</b>
<b>●mustacheの中の式はJavascriptとして処理される。</b>


# Directives
<b>●`v-`から始まるもの</b>
<b>●mustacheの値が変わった際にすぐ反応することを期待して作られた</b>
<b>●argumentとvalueを指定できる</b>

`v-bind:argument="value"`

ex)
`v-bind:href="url"`
`v-on:click="addToCart"`

<b>●argumentには式(JavaScript)を記入できる</b>
→式そのものは文字列として認識される。
→`スペース`と`'`は使えない（コンパイルエラーになる）

ex)
```hereIsArgument = "href"
v-bind:[hereIsArgument]="url"```
→<b>`v-bind:href="url"`</b>として認識される


# Modifier
<b>●v-bindなどのdirectiveの後ろにつけられる`.`のこと</b>
<b>●directiveを特別な方法で開始するもの</b>
<b>●それぞれのdirectiveに対してそれぞれmodifierが決まっており、それぞれ特定の処理を呼び出す</b>
ex)
`<form v-on:submit.prevent="onSubmit"> ... </form>`
→`.prevent`は`v-on`に対して、`submit`実行前に`event.preventDefault()`を呼ばせる
＝ submit実行前に.preventの処理（event.preventDefault())が走る


# computed:
<b>●valueを変えて式を繰り返し使いたい場合は`compute:`に宣言する</b>
（→メソッドと同じでは・・・？）

<b>●`methods:`の式は呼ばれる度実行されるが、`compute:`の式はvalueが変わらなければ実行されない</b>
→`compute:`の式はvalueが変わると実行され、新しいvalueがキャッシュされるので、
valueが変わらなければキャッシュのvalueがずっと使用される
→ただし`Date.now()`は`reactive`なものではないので、`compute:`に宣言しても実行されない
<b>●実行結果をキャッシュしたくないとき（その都度データを更新したいとき）は`methods:`に宣言する</b>
<b>●基本的にcompute内の宣言は`getter`しか持たないが、`setter`を持つhjjhhhこともできる</b>

# watch

<b>●Vueインスタンス上のデータが動的に変わるかを監視するもの</b>
→`compute:`上に宣言するほうがコードも短くて済む

# class
<b>●classには`object`, `array`が使用できる。</b>
<b>●`Component`内で`class`をbindingした場合、そのcomponent（root）のクラスにbindしたクラスが「追加」される（＝上書きされない）</b>

---JS-------------------------
Vue.component('my-component', {
template: '

Hi

'
})

---HTML-------------------------

---Result-----------------------

Hi

-------------------------------- ```

style

●キャメルケース(camelCase）かケバブケース(kebab-case)が使用できる
→ケバブケースの場合は'で囲む必要がある（'kebab-case'）