我们学习一门新语言或者框架时，第一件事是什么呢，那必然是向世界say Hello。
创建一个Vue应用
话不多说，先上代码，让我们感受一下Vue的核心功能
Document
{{message}}
// {{message}}模板的输出方式
当修改输入框内容时，h1标签内容也做相应改变，虽然代码很简单，还是能体会到双向绑定的精髓。
双向绑定（面试考点）
- 通过构造函数创建一个Vue实例 new Vue()，此时app就相当于 new Vue；
- 传入el，el是Vue对象中必不可少的，需要把el挂载到页面已存在的DOM（可以是DOM元素，或者是CSS选择器）上；
var app = new Vue({ el: '#app', // 或者document.getElementById('app') }) - 在input标签上有一个v-model指令，它的值和Vue实例中data里的message对应，input可以修改message的值，同时当message改变时也可以体现在视图上；
生命周期（开发时必了解）
每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就Vue的生命周期。下面是Vue的几个钩子函数：
beforeCreate: function () {
console.group('beforeCreate 创建前状态===============》');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
created: function () {
console.group('created 创建完毕状态===============》');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function () {
console.group('beforeMount 挂载前状态===============》');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
mounted: function () {
console.group('mounted 挂载结束状态===============》');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed 销毁完成状态===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
下图是Vue生命周期过程中el、data以及data里面的message字段的变化
1.png
2.png
以上是本期全部内容，欲知后事如何，请听下回分解<(￣︶￣)↗[GO!]