Vue 小白入门教程
本篇文章为初学者提供了一个详细的 Vue 入门教程，介绍了 Vue 的基本概念、环境搭建、第一个 Vue 应用程序、生命周期等知识点。
一、Vue 是什么
Vue 是一套用于构建用户界面的渐进式框架，压缩后仅有 17kb。它提供了一个灵活的开发环境，可以根据需要逐渐添加功能组件。
二、环境搭建
要使用 Vue，需要先搭建环境。可以直接下载并用 `<script>` 标签引入，但是在大型应用时推荐使用 NPM 安装。使用淘宝的 cnpm 可以加速安装速度。首先需要安装 Vue-cli，然后使用 Vue-cli 创建一个基于 Webpack 模板的新项目。
三、第一个 Vue 应用
下面是一个简单的 Vue 应用程序：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<div>{{title}}</div>
<button @click="say()">单击事件</button></br>
<div>今年{{age}}</div>
<input v-model="age">
</div>
</body>
</html>
<script src="lib/vue.js"></script>
<script src="js/hello.js"></script>
var app = new Vue({
el: '#app',
data: {
title: 'hello vue',
age: 22
},
methods: {
say: function(){
console.log(this.title);
}
},
watch: {
'age': function(newVal, oldVal){
console.log(newVal, oldVal);
}
}
});
```
四、Vue 生命周期
每个 Vue 实例创建时，都会经历一系列的初始化过程，同时也会调用相应的生命周期钩子。生命周期钩子可以让我们在合适的时机执行业务逻辑。常用的生命周期钩子有：
* created：实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载， `$el` 还不可用。
* mounted：el 挂载到实例上后调用，일반我们的第一个业务逻辑会在这里开始。
* beforeDestroy：实例销毁之前调用。
完整的一个生命周期图：
1. 创建（created）
2. 挂载（mounted）
3. 销毁（beforeDestroy）
通过掌握这些知识点，初学者可以快速入门 Vue 框架，并开始构建自己的用户界面应用程序。
