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!"
}
})
ライフサイクルダイヤグラム
- 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のドキュメントで誤植
<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属性など、参照できる情報を持つタグのみ利用できる
リンク集
いいこと書いてあったのでリンクしておく
$emitがよーわからんかったのでリンクをメモ
v-model? なにそれおいしいの？ というためのリンク
- 【Vue.js】双方向データバインディング(v-model)・computed・watch
- Vue.jsのv-modelにオブジェクトの配列をバインドする
- v-modelにオブジェクトをバインディングする場合のコンポーネント実装を考える
- Vue.js：v-modelと$emitを使ってデータを読み書きする子コンポーネントをつくる