Vue教程2-实例

实例

创建一个Vue实例是通过 new Vue（） 创建的。我们在项目的main.js里面就看到了创建一个Vue实例代码，很显然，我们的项目里面总共就一个Vue实例。

var app = new Vue({
	el: '#app', // 绑定的HTML模版
	data: {
		//...
	},
	methods:{
		//...
	}
})

创建之后，我们就要关注实例里面的 数据data与方法methods。

数据与方法

数据data

所谓的数据，便是实例里面的data，data是一个对象，在对象里面便要声明一个个属性property，可以去教程3里面看看原理，Vue是使用的声明式渲染，只有在data对象中声明的的属性才有响应式的属性，必须在实例创建之前便在data里面声明，因此如果有些属性没有初始值，我们就帮助添加一个初始值，例如：0、’’、false、[]、null等。

var app = new Vue({
	el: '#app',
	data: {
		// 数据声明
		newTodoText: '',
		visitCount: 0,
		hideCompletedTodos: false,
		todos: [],
		error: null
	}，
	methods: {
		getOne(){
		 // ...
		},
		getTwo(){
		 // ...
		}
	}
})

方法 methods

下面说一下方法，方法methods和data是在一个级别上的，当我们需要一系列操作时，我们就可以调用methods里面的方法进行使用，简单来说，就是待命随时的函数。

实例生命周期

实例的生命周期主要包括：beforeCreate Created beforeMounte Mounted beforeUpdate Updated beforeDestroy Destroyed

这些和 data / methods 是一个级别上的，如果要使用，就可以在data和methods的下面加上生命周期这几个阶段，最常用的就是Mounted 和 Created

var app = new Vue({
	el: '#app', // 绑定的HTML模版
	data: {
		//...
	},
	methods:{
		//...
	}，
	mounted: {
	},
	created: {
	}
})

1、beforeCreate

实例组件刚创建，DOM和数据都还没有初始化，因此这个步骤不会做太多的事情需要我们做。

2、Created

在这个步骤里面，data以及methods都已经初始化完毕，可以加以使用，同时网络请求都是异步的，因此如果页面初始需要什么服务器的数据就可以在此阶段进行请求，但在此步骤，template模版还没有编译出来。

3、beforeMounte

在此阶段，template模版编译出来，但是没有挂载到DOM上。

4、Mounted

此阶段，将编译好的template模版进行挂载，页面可以正常显示了，此时可以获取到DOM信息了，如果有些操作需要使用的DOM中的$ref便可以在此阶段进行了。

5、beforeUpdate

数据更新之前，DOM还维持着更新前的状态。

6、Updated

更新后，虚拟DOM渲染，组件DOM更新。