new Vue({
????????el:'#app',//要控制的容器
????????template:'',//組件調(diào)用標(biāo)簽
????????components:{App}//注冊(cè)的組件 名稱(chēng)來(lái)自import引入時(shí)的名字
})
組件嵌套方式
1，全局注冊(cè)
????????(1).在main.js中import引入
????????(2).在new Vue 的上方
????????????????Vue.component("組件的name",引入時(shí)定義的名字);
????????(3).在需要的位置用組件中name的名字做標(biāo)簽使用
2，局部注冊(cè)
????????(1).在需要的父級(jí)組件的script內(nèi)export外，import引入
????????(2).在其export的components對(duì)象中添加注冊(cè)，名字是引入時(shí)定義的名字
????????(3).在需要的位置用組件中name的名字做標(biāo)簽使用
組件的style上加scoped表示樣式作用域
傳值：string number boolean ???????傳值僅僅會(huì)在單一操作的組件上發(fā)生變化
引用：array object ???????????????????????????傳引用會(huì)導(dǎo)致全部的數(shù)據(jù)變化
父子屬性傳值：
父向子傳值：
1.在子組件的標(biāo)簽上v-bind:自定義屬性名=“傳值名”，
2.在子組件內(nèi)sxport中props：[“自定義屬性名”]
props應(yīng)寫(xiě)成標(biāo)準(zhǔn)寫(xiě)法：
props：{
自定義屬性名：{
type： Array，//數(shù)據(jù)類(lèi)型
required:true, //
}
}
事件傳值（子向父?jìng)髦担?/p>
1.在子組件中定義事件，用this.$emit("自定義的事件名", "傳遞的內(nèi)容");
2.在父級(jí)組件中的調(diào)用標(biāo)簽上綁定事件v-on:子組件中定義的事件名="父組件中要執(zhí)行的事件($event)"進(jìn)行接收；
3.在父級(jí)的methods中定義事件接收
父級(jí)事件名（形參）{
this.要改變的參數(shù)名=形參；
}
生命周期
????new Vue（）實(shí)例化vue對(duì)象；
在完成之前會(huì)有一個(gè)beforeCreate，它僅對(duì)事件進(jìn)行一個(gè)配置，這時(shí)可以進(jìn)行一個(gè)加載的動(dòng)畫(huà)；用此鉤子函數(shù)；
之后進(jìn)入到created，這時(shí)候?qū)嵗瓿?，組件創(chuàng)建完成，屬性成功綁定，但Dom并沒(méi)有生成，頁(yè)面并沒(méi)有展示出來(lái)；這里可以獲取對(duì)應(yīng)的一些數(shù)據(jù)，結(jié)束上邊鉤子的例子；如停止加載動(dòng)畫(huà)，準(zhǔn)備渲染DOM；
之后會(huì)查看當(dāng)前有沒(méi)有el（element）屬性，
有，往下；
沒(méi)有，查看有沒(méi)有$mount（），
有，往下，
沒(méi)有，生命周期結(jié)束。
之后會(huì)檢查有沒(méi)有template屬性
有，template中執(zhí)行一個(gè)具體的組件，執(zhí)行render方法渲染template里對(duì)應(yīng)的內(nèi)容
沒(méi)有，生命周期結(jié)束；
之后beforeMount，編譯template方法，在虛擬DOM中執(zhí)行，頁(yè)面還是看不到內(nèi)容
之后是mounted，beforeMount之后編譯的模板放入頁(yè)面，mounted時(shí)模板編譯完成，開(kāi)始掛載；mounted結(jié)束頁(yè)面就會(huì)顯示出來(lái)；如有頁(yè)面顯示出來(lái)之后需要做的，放在此方法里
頁(yè)面顯示完成了，組件也掛載了，此時(shí)對(duì)項(xiàng)目做一些更改（增刪改查）；會(huì)觸發(fā)下一個(gè)鉤子函數(shù)Update
????beforeUpdate：當(dāng)前組件在更新之前的鉤子
????updated：組件在更新之后的鉤子；此鉤子執(zhí)行之后，頁(yè)面就是更新之后的樣子
beforeDestroy：組件實(shí)例銷(xiāo)毀之前；
distroyed：組件實(shí)例銷(xiāo)毀之后；
??methods: {},
??beforeCreate: function() {
????alert("組件實(shí)例化之前執(zhí)行的函數(shù)");
??},
??created: function() {
????alert("組件實(shí)例化完畢，但頁(yè)面還未顯示");
??},
??beforeMount: function() {
????alert("組件掛載前，頁(yè)面仍未展示，但虛擬Dom已經(jīng)配置");
??},
??mounted: function() {
????alert("組件掛載后，此方法執(zhí)行后頁(yè)面顯示");
??},
??beforeUpdate:function(){
????alert("組件更新前,頁(yè)面仍未更新，但虛擬Dom已經(jīng)配置");
??},
??updated:function(){
????alert("組件更新后，頁(yè)面顯示更新后的組件");
??},
??beforeDestroy:function(){
????alert("組件銷(xiāo)毀前");
??},
??destroyed:function(){
????alert("組件銷(xiāo)毀");
??}
路由和http
共享網(wǎng)絡(luò)接口：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上邊使用這個(gè)是去除鏈接上初始的#
routes: [
????{
??????path: '/', ?????//根路徑
??????name: 'HelloWorld',
??????component: HelloWorld，//此處是引入時(shí)的起的名字
??????children：[
??????{
??????????????path: '/home', ?????//路徑 ?嵌套字路由
??????????????name: 'HelloWorld',
??????????????component: HelloWorld，//此處是引入時(shí)的起的名字
??????}
??????]
????}
??]
在組件中的鉤子函數(shù)中請(qǐng)求
??created(){
????this.$http.get("http://jsonplaceholder.typicode.com/users")
????????.then((data)=>{
??????????console.log(data);
??????????this.users=data.body;
????????})
??}
