VUE 生命周期及VUE 组件

VUE 生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

	beforeCreate: function () {
	    console.log('beforeCreatea ’); 
	},
	created: function () {
	    console.log('createda ' ); 
	},
	beforeMount:function(){ 
	    console.log('beforeMounta’); 
	},
	mounted:function(){ 
	    console.log('mounteda’); 
	}

VUE 组件

组件是可复用的 vue 实例，说白了就是一组可以重复使用的模板,且带有一个名字。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过Vue.component全局注册的：

	Vue.component('my-component-name', {
	// ... options ...
	})

定义组件

	Vue.component('组件名', {template: '模板内容' });
		<template id="temp">
			<h1>一级标题{{msg}}</h1>
		</template>
	Vue.component('组件名', {template: '#id 名' });

组件中的数据

	export default {
		data: function () {
			return {
			count:0,
			msg:"组件数据"
			}
		}
	}

一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。

组件中的函数

	methods:{
		add:function(){
			this.count++;
		}
	}

组件的使用

		<!-- 定义组件 -->
		<template id="temp">
			<h1 v-on:click="test()">我是组件h1标签{{count}} {{msg}}</h1>	
		</template>
		<div id="app">
			<mytemp></mytemp>
			<mytemp></mytemp>	
		</div>
		
		<script type="text/javascript">
			/* 定义组件 */
			Vue.component('mytemp',//组件名
				{
					template:"#temp",
					/* 组件中的数据 */
					data:function(){//data()  也可以
						return{
							count:0,
							msg:"组件消息"
						}
					},
					/* 组件中的方法 */
					methods:{
						test:function(){//test()
							this.count++;
						}
					}
				})
			var app = new Vue({
				el: "#app"
			})
		</script>