Vueインスタンスは複数作成可能
Vueインスタンスは複数作成する事が可能。
但し、複雑化することからインスタンスはひとつにまとめることが望ましい。
<div id="app1">
<p>{{str}}</p>
</div>
<div id="app2">
<p>{{str}}</p>
</div>
<script>
new Vue({
el:’#app1′,
data:{
str:’app1のテキスト’
}
})
new Vue({
el:’#app2′,
data:{
str:’app2のテキスト’
}
})
</script>
他のVueインスタンスからアクセスする方法
Vueインスタンスを変数に格納することにより、外部からアクセスすることが可能。
ただし、アクセスすることはできるが、プロパティを新しく追加することができない。＝ リアクティブにならない
JavaScriptでは難しいリアクティブな紐付けをVueが簡潔に解決してくれている。（自動的にsetter,getter,watcherが生成される）
let vm = new Vue({
el:'#app1',
data:{
str:'app1のテキスト'
}
})
vm.str = '置き換えがされました'
インスタンスプロパティ&インスタンスメソッド「＄」
下記では$dataと$mountのみピックアップしております。
インスタンスプロパティ一覧はこちら。
※公式サイトに飛びます
＄data
インスタンス内のdata要素を一覧で取り出したい時、$dataを使用する。
let vm = new Vue({
el:'#app1',
data:{
str:'app1のテキスト',
age:30
}
})
console.log(vm.$data);
$mount
el:の代わりに使うことができる。$mountはインスタンスの外に出すことが可能。
let vm = new Vue({
data:{
str:'app1のテキスト',
age:30
}
})
vm.$mount('#app1')
インスタンスに繋げて書くことも可能。
new Vue({
data: {
str: 'app1のテキスト',
age: 30
}
}).$mount('#app1')
テンプレート（HTML）の置き換え方法
テンプレートの置き換え方法はいくつかあります。
templateプロパティを使った置き換え
templateプロパティにHTMLを直接書く方法。複数行のHTMLには、複雑になるので向かない。
<div id="app1"></div>
<script>
new Vue({
data: {
age: 30
},
template:'<p>私は、{{age}}歳です。</p>'
}).$mount('#app1')
</script>
render関数を使った置き換え
createElementメソッドをreturnさせることでテンプレートの置き換えができる。
createElementの引数は次の通り。
createElement(‘p’, ‘私は、’ + this.age + ‘歳です。’);
第一引数…タグを入れる
第二引数…入れたい文字列
全体のコードは下記になります。
<div id="app1"></div>
<script>
new Vue({
data: {
age: 30
},
render: function (createElement) {
return createElement('p', '私は、' + this.age + '歳です。');
}
}).$mount('#app1')
</script>
document.createElement();とは別のもの。
document.createElement();は直接DOM要素を追加するものに対し、vueのcreateElementは仮想Node(VNode)をreturnさせて仮想DOMを作っている。
