Vue 构造函数、生命周期与数据双向绑定
Vue是一个响应式的、渐进式的JavaScript框架，它在设计上采用MVVM模式，将视图与数据两部分分离。下面就是一个简单的Vue实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{
{ message }}
</div>
<script>
var app=new Vue({
el:"#app",
data:{
message:"Hello Vue!"
}
})
</script>
</body>
</html>
可以打开浏览器的控制台，改变app.message的值，可以看到页面上的视图显示部分也会相应的更新。
（1）通过Vue构造函数函数来创建Vue实例
var app = new Vue({
})
变量app就是指这个Vue实例。
在Vue实例中，el选项是必须的，el用于指定一个页面上已存在的DOM元素来挂载Vue实例，例如：
<div id="app"></div>
<script>
var app=new Vue({
el:"#app",
})
</script>
之后可以通过app.$el来访问这个被挂载的元素。
console.log(app.$el)
//<div id="app"></div>
（2）实例的生命周期钩子函数
每个Vue实例创建时，都会经历一系列初始化的过程，同时也会调用相应的生命周期钩子函数。比较常用的有：
1.created
实例创建完成后调用，在这个阶段完成了数据的观测等，但尚未挂载，$el还不可用。
2.mounted
el挂载到实例上之后调用。
3.beforeDestroyed
实例销毁之前调用。主要解绑一些使用addEventListener监听的事件等。
这些生命周期钩子函数与data类似，也可以写入Vue实例内，并且生命周期钩子函数内的this指向的是调用它的Vue实例。
var app=new Vue({
el:"#app",
data:{
a:"Hello Vue!"
},
created:function(){
console.log(this.a);
//Hello Vue!
},
mounted:function () {
console.log(this.$el);
//<div id="app">
// Hello Vue!
// </div>
}
});
不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a)。
ES6中提到：在箭头函数中没有自己的this对象，导致内部的this就是外层代码的this。
所以，个人理解在选项属性或回调上使用箭头函数，此时的this指向的是全局属性：
var app=new Vue({
el:"#app",
data:{
a:"Hello Vue!"
},
created:()=>{
console.
最低0.47元/天 解锁文章
1223
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
