Vue框架整理:一、vue.js应用 与 生命周期

Vue 的创建比较简单，通过构造函数Vue就可以了，然后就是一个必选项el.

这个el可以是个html 元素，也可以是CSS 的选择器：

<script>

var first=new Vue({

el : document.getElementById('v1') //html

});

var second=new Vue({

el : '#v1' //CSS

});

</script>

接下来就是data 这个对象了， 在这里可以声明需要双向绑定的数据, 这些数据可以是直接声明的，也可以是一个变量，

var third=new Vue({

el:"#v1",

data: {

a:111 //声明一个对象

}

});

console.log(third.a); //111需要注意的是，如果指向的是一个变量，那么他们已经默认的建立了双向绑定的关系，修改其中任意一个，另一个也会有变化

var test={

a:30

};

var third=new Vue({

el:"#v1",

data: test

});

console.log(third.a); //30

third.a=20; //修改data里面的数据，test也会随着修改

console.log(third.a); //20

console.log(test.a); //20

生命周期

Vue每次创建的时候，都会有一个初始化的过程，这时就有了相对应的生命周期， 类似于JavaScript的 onload 等事件，Vue也有自己对应的方法： 一般常用的有：

created : 见名知意，就是创建完成后调用，不过此阶段只是完成数据的观测，没有进行挂载，$el不能使用，需要初始化一些数据时使用。

mounted : 翻译过来就是安装完成后，也就是el挂在到实例上以后调用，页面最初要使用的的一些方法可以放这

beforeDestory : 实例销毁之前调用，可以解除一些绑定的事件等；

<script>

var app=new Vue({

el:"#v1",

data:{

a:100

},

created:function () {

console.log(this.a); //2 这里的this指向 Vue实例 data

},

mounted:function () {

console.log(this.$data); // 指向上面的data对象

}

})

</script>

?后记：对于大部分转行的人来说，找机会把自己的基础知识补齐，边工作边补基础知识，真心很重要。"我们相信人人都可以成为一个IT大神，现在开始，选择一条阳光大道，助你入门，学习的路上不再迷茫。这里是北京尚学堂，初学者转行到IT行业的聚集地。、