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

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

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

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

HTMLを書くときの注意

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

間違った例

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>

正しい例

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>

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

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

間違った例

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>'
})

正しい例

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のライフサイクルにフックを加えたい時に便利な情報

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

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

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

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

コンポーネントで v-model を使うにて、

<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 にリスナを記述するのですか

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

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

CSS知識用

その他、便利なリンク集

HyperTextCandy Vue.jsタグ