生命周期函數(shù)
組件掛載以及組件更新、組件銷毀的一系列的方法。這些方法就叫做生命周期函數(shù)。
其中函數(shù)有：
beforeCreate-實(shí)例化剛剛被創(chuàng)建;
created-實(shí)例化創(chuàng)建完成；
beforeMount-模板編譯之前窖张；
mounted-模板編譯完成，請(qǐng)求數(shù)據(jù)蚁滋，操作dom宿接，放在這個(gè)里面；
beforeUpdate-數(shù)據(jù)更新之前辕录；
Updated-數(shù)更新之后睦霎；
beforeDestroy-實(shí)例銷毀之前，頁(yè)面銷毀的時(shí)候要保存一些數(shù)據(jù)走诞，就可以監(jiān)聽(tīng)這個(gè)銷毀的生命周期函數(shù)副女；
destroyed-實(shí)例銷毀完成。
請(qǐng)求數(shù)據(jù)
1速梗、vue-resource： 官方提供的vue的一個(gè)插件肮塞，在github中查看使用方法https://github.com/pagekit/vue-resource。
需要引入vue-resource.js姻锁。
<script src="js/vue-resource@1.5.1.js"></script>
使用舉例
var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
this.$http.get(api).then((response)=>{?
????console.log(response);??
? ??this.list = response.body.result;},
? ??function(err){????console.log(err);
});
2枕赵、axios：第三方插件，需要引入js位隶。哪里使用哪里引入拷窜。
<script ?src?= “ https://unpkg.com/axios/dist/axios.min.js ”?> </script?>
axios.get(api).then(response => {
? ?console.log(response.data.result);????
? ??this.list = response.data.result;
}).catch(error => {????// handle error????console.log(error);
}).then(function () {????// always executed});
Fetch-jsonp：第三方插件，自己百度了解一下吧涧黄！
組件
可以是頁(yè)面的一部分篮昧，也可以是一個(gè)頁(yè)面。
全局注冊(cè)組件
Vue.component('my-component-name', {??// ... 選項(xiàng) ...})
局部注冊(cè)組件
var?ComponentA = { /* ... */?}
new?Vue({?
?el: '#app',?
?components: {????'component-a': ComponentA,????'component-b': ComponentB??}})
父子組件傳值
1笋妥、父組件調(diào)用子組件的時(shí)候綁定動(dòng)態(tài)屬性懊昨；
2、使用子組件綁定屬性title=“msg”></v-header>
3春宣、props:[‘title’]子組件使用props接收父組件傳遞的參數(shù)酵颁；
在開(kāi)發(fā)有人員多的情況下可以約束傳值的合法性。
Props:{
Home:Object,//也可以將整個(gè)父組件傳給子組件
title:String
}
父組件主動(dòng)獲取子組件的數(shù)據(jù)和方法
1月帝、調(diào)用子組件的時(shí)侯定義一個(gè)ref
<v-header ref=”header”></v-header>
2躏惋、在父組件里面通過(guò)
This.$refs.header.屬性;
This.$refs.header.方法;
子組件主動(dòng)獲取父組件的數(shù)據(jù)和方法
this.$parent.屬性；
this.$parent.方法嚷辅；
非父子組件傳值
1簿姨、新建一個(gè)js文件,實(shí)例化vue ；
Var VueEmit = new Vue();
2簸搞、在要廣播的地方引入剛才定義的實(shí)例扁位；
3、通過(guò)$emit設(shè)置數(shù)據(jù)
VueEmit.$emit(‘name’,’數(shù)據(jù)’);
4趁俊、在接受數(shù)據(jù)的地方通過(guò)$on接受廣播的數(shù)據(jù),監(jiān)聽(tīng)值是否改變贤牛，值改變則觸該事件，改變則執(zhí)行则酝。
VueEmit.$on(‘name‘殉簸，(data)=>{
Console.log(data);
});
路由（vue-router）
根組件自動(dòng)掛載不同的組件，官網(wǎng)：https://router.vuejs.org/
如何使用：
1沽讹、創(chuàng)建組件般卑，引入組件js
const?Foo =?{?template:?'<div>foo</div>'?}
const?Bar =?{?template:?'<div>bar</div>'?}
2、定義路由
// 每個(gè)路由應(yīng)該映射一個(gè)組件爽雄。 其中"component" 可以是
// 通過(guò) Vue.extend() 創(chuàng)建的組件構(gòu)造器蝠检，
// 或者，只是一個(gè)組件配置對(duì)象挚瘟。// 我們晚點(diǎn)再討論嵌套路由叹谁。
const?routes =?[
??{?path:?'/foo',?component:?Foo },
??{?path:?'/bar',?component:?Bar }
]
3饲梭、實(shí)例化vueRouter
// 創(chuàng)建 router 實(shí)例，然后傳 `routes` 配置
// 你還可以傳別的配置參數(shù), 不過(guò)先這么簡(jiǎn)單著吧焰檩。
const?router =?new?VueRouter({
??routes // (縮寫) 相當(dāng)于 routes: routes
})
4憔涉、掛載根實(shí)例
// 記得要通過(guò) router 配置參數(shù)注入路由，
// 從而讓整個(gè)應(yīng)用都有路由功能
const?app =?new?Vue({
??router}).$mount('#app')
訪問(wèn)路由
// Home.vue單頁(yè)
export?default?{
??computed:?{
????username?()?{
??????// 我們很快就會(huì)看到 `params` 是什么
??????return?this.$route.params.username
????}
??},
??methods:?{
????goBack?()?{
??????window.history.length >?1
??????????this.$router.go(-1)
????????:?this.$router.push('/')
????}
??}}
使用elementUI
1析苫、找到官網(wǎng)http://element.eleme.io/#/zh-CN/component/quickstart 查看api
2兜叨、在項(xiàng)目下安裝element包
cpnm i element-ui -s//-s表示--save
3、main.js 引入elementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
4衩侥、Webpack.config.js配置file_loader ?
//解析字體文件国旷、svg圖標(biāo)等
??{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
?}
