new Vue({
el:'#app',//要控制的容器
template:'',//組件調用標籤
components:{App}//註冊的組件 名稱來自import引入時的名字
})
組件嵌套方式
1，全局註冊
(1).在main.js中import引入
(2).在new Vue 的上方
Vue.component("組件的name",引入時定義的名字);
(3).在需要的位置用組件中name的名字做標籤使用
2，局部註冊
(1).在需要的父級組件的script內export外，import引入
(2).在其export的components對象中添加註冊，名字是引入時定義的名字
(3).在需要的位置用組件中name的名字做標籤使用
組件的style上加scoped表示樣式作用域
傳值：string number boolean 傳值僅僅會在單一操作的組件上發生變化
引用：array object 傳引用會導致全部的數據變化
父子屬性傳值：
父向子傳值：
1.在子組件的標籤上v-bind:自定義屬性名=“傳值名”，
2.在子組件內sxport中props：[“自定義屬性名”]
props應寫成標準寫法：
props：{
自定義屬性名：{
type： Array，//數據類型
required:true, //
}
}
事件傳值（子向父傳值）：
1.在子組件中定義事件，用this.$emit("自定義的事件名", "傳遞的內容");
2.在父級組件中的調用標籤上綁定事件v-on:子組件中定義的事件名="父組件中要執行的事件($event)"進行接收；
3.在父級的methods中定義事件接收
父級事件名（形參）{
this.要改變的參數名=形參；
}
生命週期
new Vue（）實例化vue對象；
在完成之前會有一個beforeCreate，它僅對事件進行一個配置，這時可以進行一個加載的動畫；用此鉤子函數；
之後進入到created，這時候實例化完成，組件創建完成，屬性成功綁定，但Dom並沒有生成，頁面並沒有展示出來；這裏可以獲取對應的一些數據，結束上邊鉤子的例子；如停止加載動畫，準備渲染DOM；
之後會查看當前有沒有el（element）屬性，
有，往下；
沒有，查看有沒有$mount（），
有，往下，
沒有，生命週期結束。
之後會檢查有沒有template屬性
有，template中執行一個具體的組件，執行render方法渲染template裏對應的內容
沒有，生命週期結束；
之後beforeMount，編譯template方法，在虛擬DOM中執行，頁面還是看不到內容
之後是mounted，beforeMount之後編譯的模板放入頁面，mounted時模板編譯完成，開始掛載；mounted結束頁面就會顯示出來；如有頁面顯示出來之後需要做的，放在此方法裏
頁面顯示完成了，組件也掛載了，此時對項目做一些更改（增刪改查）；會觸發下一個鉤子函數Update
beforeUpdate：當前組件在更新之前的鉤子
updated：組件在更新之後的鉤子；此鉤子執行之後，頁面就是更新之後的樣子
beforeDestroy：組件實例銷燬之前；
distroyed：組件實例銷燬之後；
methods: {},
beforeCreate: function() {
alert("組件實例化之前執行的函數");
},
created: function() {
alert("組件實例化完畢，但頁面還未顯示");
},
beforeMount: function() {
alert("組件掛載前，頁面仍未展示，但虛擬Dom已經配置");
},
mounted: function() {
alert("組件掛載後，此方法執行後頁面顯示");
},
beforeUpdate:function(){
alert("組件更新前,頁面仍未更新，但虛擬Dom已經配置");
},
updated:function(){
alert("組件更新後，頁面顯示更新後的組件");
},
beforeDestroy:function(){
alert("組件銷燬前");
},
destroyed:function(){
alert("組件銷燬");
}
路由和http
共享網絡接口：http://jsonplaceholder.typicode.com/
安裝resource模塊 指令：npm install vue-resource --save-dev
router下的index.js中配置
引入：
import Router from 'vue-router'
import VueResource from 'vue-resource'
Vue.use(Router)
Vue.use(VueResource)
mode: "history", //在router上邊使用這個是去除鏈接上初始的#
routes: [
{
path: '/', //根路徑
name: 'HelloWorld',
component: HelloWorld，//此處是引入時的起的名字
children：[
{
path: '/home', //路徑 嵌套字路由
name: 'HelloWorld',
component: HelloWorld，//此處是引入時的起的名字
}
]
}
]
在組件中的鉤子函數中請求
created(){
this.$http.get("http://jsonplaceholder.typicode.com/users")
.then((data)=>{
console.log(data);
this.users=data.body;
})
}