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:functiоn () {
console.log(this.a); //2 这里的this指向 Vue实例 data
},
mounted:functiоn () {
console.log(this.$data); // 指向上面的data对象
}
})
</script>
后记:对于大部分转行的人来说,找机会把自己的基础知识补齐,边工作边补基础知识,真心很重要。”我们相信人人都可以成为一个IT大神,现在开始,选择一条阳光大道,助你入门,学习的路上不再迷茫。这里是北京尚学堂,初学者转行到IT行业的聚集地。、
原创文章,作者:starterknow,如若转载,请注明出处:https://www.starterknow.com/126748.html