Vue.jsメモ帳(随時更新)

# HTMLとJavascriptの各要素の関連を図示してみた

* 同じ色の線と円が密に関連する項目
* <font color="red">注意！</font> `v-for` を使うときはこの図の限りではない(気が向いたら追加したい)

## コンポーネントオブジェクトを生成する場合

![HTML_Js_comp_for_vue.png](https://qiita-image-store.s3.amazonaws.com/0/283310/695a6053-aec5-a606-d00a-dfc7fc37ebc5.png)

## コンポーネントオブジェクトを生成しない場合

![Vue2.png](https://qiita-image-store.s3.amazonaws.com/0/283310/c838ecd5-b93e-99a2-958e-ddfd1df6177f.png)


# HTMLを書くときの注意

* 先にVueコンポーネントを書いて、続けてscriptタグを呼ばないとレンダリングしてくれない

## 間違った例

```HTML:wrong.html
<head>
 :
  <script src="/pub/js/vue.js"></script>
  <script src="/pub/js/main.js"></script>
 :
</head>
<body>
  <div id="app-10">
    <app10 v-bind:text="text"></app10>
  </div>
</body>
```

## 正しい例

```HTML:correct.html
<body>
  <div id="app-10">
    <app10 v-bind:text="text"></app10>
  </div>
  <script src="/pub/js/vue.js"></script>
  <script src="/pub/js/main.js"></script>
</body>
```

# コンポーネントの親子関係を書くときの注意

* 先に子コンポーネントを生成しておかないとエラーが発生する

## 間違った例

```javascript:wrong.js
var app10 = new Vue({
  el: '#app-10',
  data: {
    text :"Hi, My Name is vue sample!"
  }
})

// コンポーネントを先に登録しないとコケる！
var comp_app10 = Vue.component('app10', {
  props: ['text'],
  template: '<span>OK! [{{ text }}]</span>'
})
```

## 正しい例

```javascript:correct.js
// コンポーネントを先に登録しないとコケる！
var comp_app10 = Vue.component('app10', {
  props: ['text'],
  template: '<span>OK! [{{ text }}]</span>'
})

var app10 = new Vue({
  el: '#app-10',
  data: {
    text :"Hi, My Name is vue sample!"
  }
})
```

* 参考： https://qiita.com/_Keitaro_/items/f77d2340f9390f028677

# ライフサイクルダイヤグラム

* Vueのライフサイクルにフックを加えたい時に便利な情報

https://jp.vuejs.org/v2/guide/instance.html#ライフサイクルダイヤグラム

# HTMLとVueインスタンス関連付け

* Vueインスタンス = `new Vue({...})`

|  HTMLの記述  |  Vueインスタンスのプロパティ  |
|:-----------------------:|:------------------|
|  {{ ... }}<br>(Mustache構文)  |  data, computed, methods  |
|  v-on  |  methods  |
|  v-bind  | data  |
|  v-if  |  data  |
|  v-for  | data |

# Vue.jpのドキュメントで誤植

* [コンポーネントで v-model を使う](https://jp.vuejs.org/v2/guide/components.html#%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%A7-v-model-%E3%82%92%E4%BD%BF%E3%81%86) にて、

```<custom-input v-model="searchText"></custom-input>```

というHTMLが現れるが、v-modelの値が間違っていた。正しくは下を参照

```<custom-input v-model="value"></custom-input>```

# v-modelとは？

## 双方向データバインディングって？

* 「JavascriptからでもHTMLからでも設定できる値」

## もう少し細かく

* Vue.jsのデータはJavascriptのオブジェクトとして持っている（それ外に方法はない）
* HTMLから参照・変更する際は、いちいちバインディング

## 使い方

* HTMLタグの属性としてv-modelを使用する
  * 双方向データバインディングの宣言
* v-model値として、Vueのデータのどれかを指定
* ブラウザで表示して、dataの初期値が反映されていれば成功

## 使える条件

* INPUTタグのvalue属性など、参照できる情報を持つタグのみ利用できる

# リンク集

## いいこと書いてあったのでリンクしておく

* [なぜ HTML にリスナを記述するのですか](https://jp.vuejs.org/v2/guide/events.html#%E3%81%AA%E3%81%9C-HTML-%E3%81%AB%E3%83%AA%E3%82%B9%E3%83%8A%E3%82%92%E8%A8%98%E8%BF%B0%E3%81%99%E3%82%8B%E3%81%AE%E3%81%A7%E3%81%99%E3%81%8B)

## $emitがよーわからんかったのでリンクをメモ

* [Vue.jsコンポーネント入門 (4) $emitによるイベントの発行](https://www.hypertextcandy.com/vuejs-components-introduction-emit-events/)
* [Vue.jsでコンポーネント親子間の値の受け渡し](https://www.webopixel.net/javascript/1224.html)

## v-model? なにそれおいしいの？ というためのリンク

* [【Vue.js】双方向データバインディング(v-model)・computed・watch](https://rara-world.com/vuejs-model-computed-watch/)
* [Vue.jsのv-modelにオブジェクトの配列をバインドする](https://qiita.com/seihmd/items/e4b2dfbdaba423fde6a7)
* [v-modelにオブジェクトをバインディングする場合のコンポーネント実装を考える](https://qiita.com/clomie/items/7a69ee850a304595142e)
* [Vue.js：v-modelと$emitを使ってデータを読み書きする子コンポーネントをつくる](https://qiita.com/ozone/items/b75efe5c449cbc469b1e)

## CSS知識用

* [CSSアニメーション 入門](https://qiita.com/soarflat/items/4a302e0cafa21477707f)
* [【CSS3】@keyframes と animation 関連のまとめ](https://qiita.com/7968/items/1d999354e00db53bcbd8)
* [animated.cssのgithub](https://github.com/daneden/animate.css)

## その他、便利なリンク集

* [HyperTextCandy Vue.jsタグ](https://www.hypertextcandy.com/tags/vuejs)