vue.jsを学びます。
今回は、Vueインスタンスについてです。new Vue({})の中のことですね。
別のインスタンスから、書き換え
var でコンポーネント化する。
<div id="app1">
<p>{{message}}</p>
</div>
<div id="app2">
<p>{{message}}</p>
<button @click="changeMessage1">インスタンス1のmessageを変更</button>
</div>var vm1 = new Vue({
el:'#app1',
data:{
message:'インスタンス１'
}
})
vm1.message = '書き換えられました。'
var vm2 = new Vue({
el:'#app2',
data:{
message:'インスタンス2'
},
methods:{
changeMessage1:function(){
vm1.message = 'インスタンス2空変えました。'
}
}
})外部から vm.message で変更することはできる。
だが、追加した場合、その後その値を変更することはできない。
なぜ、このような挙動がおこるのかが下のgetter setterに関係する
getter setter watcher
詳しいことはよくわかりません（いつか頑張ります。）
が、インスタンスの中に記述すると、その値の発火のトリガーとなるようなもの（getterやsetter）を設置します。
<p>{{name}}</p>
<button @click="name = '書き換える'"></button>vm2.name = 'john doe';なので、値自体は記録されますが、トリガーとなるsetterやgetterが設置されないために、再描画が行われません。（リアクティブにならないので、発火しない）
watcherは発火した時に行われる関数のことっぽいです（？）
なので、どうしてもインスタンスの外から変更したい場合は、
data:{
name:' '
}みたいな形で、settterとgetterだけ準備する方法があります。
Jsみたいなデータの取得、インスタンス内のプロパティ取得（&data）
var data = {
message:'こんにちは',
name:'パピプリオ'
}
var datatest = {
el:'#app1',
data: data // data内を取ってくる
}
console.log( data === datatest.$data); //＄で指定同じインスタンス内でデータ取得
同じインスタンスないはthis. 他は変数から
data:{
message:'インスタンス１'
},
computed:{
myData :
function(){
return this.$data; //this.$〜
}
}$mount(elの代わり)
datatest.$mount('#app') // id appに適用new Vue({
data:{
name:'マイケル'
}
}).$mount('#app3') //最後尾につけても良い{{}}以外の挿入方法(temlate,render)
templateで囲むと、el:に指定した要素に挿入される。
ただし、挿入できる量が複数行になると複雑になるためあまり使わない。
new Vue({
el:'#app3',
data:{
name:'マイケル'
},
template:'<p>こんにちは,{{name}}</p>'
})render:function(h){
console.log(h)
return h('h1','こんにちは、'+ this.name); //仮想node(vnode)から仮想DOMへ
}他のtemplateプロパティなども最後はrender関数を使っている。
通常のJavascriptではDOMを操作するが、vue.jsのrenderなどは仮想DOMを作成し操作する。
javascript内で、仮想DOMを作成し、変更場所のみDOMの書き換えを行う。
インスタンス内の処理の順番
beforeCreate:function(){
console.log('beforeCreate');
},
created:function(){
console.log('created');
},
beforeMount:function(){
console.log('beforeMount');
},
mounted:function(){
console.log('mounted');
},
beforeUpdate:function(){
console.log('beforeUpdate')
},
updated:function(){
console.log('updated')
},
beforeDestroy:function(){
console.log('beforeDestroy')
},
destroyed:function(){
console.log('destroyed')
},