1. 引入vue.js库
<script src="https://cdn.bootcss.com/vue/2.2.1/vue.min.js"></script>
2. html
<div id="app">
<template>
<div>
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
<hr>
<button onclick="vm.$destroy()">此按钮用来销毁实例</button>
</div>
</template>
</div>
3. script
注意：
1. 最常用的就是前四个生命周期钩子beforeCreate、created、 beforeMount、mounted
2. 生命周期里面的activated和deactivated我这里没有做演示，只写了大概意思
Vue.component('button-counter', {
template: '<button v-on:click="increment">我是按钮{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods:{
increment: function () {
this.counter += 1
this.$emit('increment')
}
}
})
var vm = new Vue({
el:'#app',
data() {
return{
total: 0
}
},
methods: {
incrementTotal(){
this.total += 1
}
},
// 组件的生命周期
beforeCreate(){ //在实例创建之后，在数据初始化之前被调用
alert('1-beforeCreate');
},
created(){ // 在数据初始化之后被调用，如果你的页面进来的时候就调用接口,那么created是第一选择
alert('2-created');
},
beforeMount(){ //在组建渲染之前被调用，也就是说数据渲染之前，比如要色彩渲染可以在这里写
alert('3-beforeMount');
},
mounted(){//整个实例被创建完成后被调用,比如：实例创建完成、数据初始化、渲染页面数据后，才被调用，这个时候就可以在mounted这个生命周期里面写Dom操作了,注意：生命周期用的最多的就是mounted
alert('4-mounted');
},
beforeUpdate(){ //在数据改变时被调用，比如: total = 0 , 然后手动把num++; 就会执行此方法
alert('5-beforeUpdate');
},
updated(){ //数据被更新之后, 比如：total值改变之后，再被执行
alert('6-updated');
},
activated(){ //keep-alive 组件激活时调用，也就是说在路由切换时被调用，注意要配合keep-alive使用才会被调用
alert('7-activated');
},
deactivated(){//keep-alive 组件停用时调用，也可以理解成在路由切换的会自动停用组件，
alert('8-deactivated');
},
beforeDestroy(){//实例销毁之前被调用，这个方法适用于 把new Vue({})赋值给一个变量时，如： var vm = new Vue({})，然后用vm.$destroy() 方法销毁这个实例
alert('9-beforeDestroy');
},
destroyed(){//实例销毁之后被调用，一般情况下，在页面切换路由时，会自动销毁组件，
alert('10-destroyed');
}
})
