一、Vue對象的操作
1. 可以通過一個Vue對象操作另一個Vue對象
var v1 = new Vue({
el: "#app1",
data: {title:”hello vuw!”}
});
var v2 = new Vue({
el: "#app1",
methods:{
changev1title:function () {
v1.title = "hello python!"
},
}
});
2.Vue對象操作另一個Vue對象的內容，維度有兩個，操作屬性、操作方法
這些屬性是data或computed里定義的
var v2 = new Vue({
el: "#app1",
methods:{
changev1title:function () {
v1.title = "hello python!"
},
v1upper: function () {
v1.toUpperCase()
}
}
});
3.Vue的實例屬性
直接通過對象的方式定義的屬性，是來自於data或computed中的屬性，但是vue對象中的el、data等等這些鍵也稱為屬性，這些屬性是vue對象的實例屬性！
注意：
1）ref的使用
在vue里面，往往使用ref屬性來代替id屬性的使用，那么就可以快速的通過的調用ref的值來獲取頁面中的某個元素。
<button type="button" ref="mybtn1" @click="showVueObject">點我</button>
showVueObject:function () {
this.$refs.mybtn1.innerHTML = "hello"
}
2）mount的使用
實現了頁面元素與vue對象的動態綁定，之前都是通過el的方式綁定。
<div id="app"></div>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>
var v1 = new Vue({
template:"<h1>hello template</h1",
});
v1.$mount('#app');
</script>
二、Vue的組件
Vue的一大特性：組件化。可以將vue對象作為一個組件，被反復的使用。
注冊組件的方式有兩種，全局注冊和局部注冊。
1.注冊組件（全局注冊）
Vue.component(“組件名”,{vue對象})
2.使用組件
在被vue對象綁定了的html元素中才可以使用組件，如果一個div沒有被vue綁定，那么這個div中不能使用之前注冊的組件。
<div id="app">
<model1></model1>
<model1></model1>
<model1></model1>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>
Vue.component("model1",{
template:"<div>{{title}}<button type='button' @click='mybtn'>點我</button> </div>",
data:function(){
return {
title: "hello vue",
}
},
methods: {
mybtn: function () {
alert('hello vue!!!');
}
}
});
new Vue({
el: "#app",
})
3.作為組件的vue對象的注意事項
特點1：
Vue.component(“組件名”,{vue對象})，這個vue對象和之前的vue對象的data屬性的寫法是由區別的
new Vue({
el: "#app",
data: {
name: “xx”,
age: 23,
});
Vue.component("model1",{
data: function(){
return {
name: “xx”,
age: 23,
}
},
});
特點2：
組建中template的值是一個字符串，其有且僅有一個根元素
錯誤：
template:"<div>{{title}}</div><button type='button' @click='mybtn'>點我</button>",
正確：
template:"<div>{{title}}<button type='button' @click='mybtn'>點我</button> </div>",
4.Vue組件的本地注冊（局部注冊）
Vue的全局注冊，意味着在頁面中任意一個被vue綁定的div中都以使用用全局注冊的vue組件。但是，如果是對vue組件進行本地注冊，那么在其他被vue綁定的div中，不能使用該組件。
<div id="app">
<model11></model11>
</div>
<div id="app1">
<model11></model11>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>
var model1 = {
template:"<div><h1>{{title}}</h1><button type='button' @click='mybtn'>點我</button></div>",
data:function(){
return {
title: "hello vue",
}
},
methods: {
mybtn: function () {
alert('hello vue!!!');
}
}
};
new Vue({
el: "#app", // 只有這個組件可以使用model11組件
components:{
"model11": model1,
}
});
new Vue({
el: "#app1", // 這個div對象不能使用model11組件
})
</script>
三、Vue的生命周期
一個Vue對象會經歷初始化、創建、綁定、更新、銷毀等階段，不同的階段，都會有相應的生命周期鈎子函數被調用，可以參考官方文檔的生命周期示意圖。
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
title:"this is title"
},
methods:{
changeTitle:function(){
this.title= "new title";
},
destroy:function(){
this.$destroy();
}
},
// ES5
beforeCreate:function(){
console.log("beforeCreate")
},
// ES6
created(){
console.log("created")
},
beforeMount(){
console.log("beforeMount")
// 3.一個頁面中只有一個div，其他的都是vue組件
// vue組件里的data必須使用function的形式對{}對象進行封裝，防止對其他數據的修改。 注意，template里必須有
// 一個根節點。
},
mounted(){
console.log("mounted")
},
beforeUpdate(){
console.log("beforeUpdate")
},
updated(){
console.log("updated")
},
beforeDestroy(){
console.log("beforeDestory")
},
destroyed(){
console.log("destory")
}
})
</script>
執行順序：
ProductInfo.vue?ca1b:17 beforeCreate
ProductInfo.vue?ca1b:21 created
ProductInfo.vue?ca1b:24 beforeMount
ProductInfo.vue?ca1b:30 mounted
ProductInfo.vue?ca1b:30 beforeUpdate
ProductInfo.vue?ca1b:30 Update
ProductInfo.vue?ca1b:39 beforeDestory
ProductInfo.vue?ca1b:42 destory