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也有自己对应的方法:
其实吧,只要把不同生命周期的 英文 翻译成中文就很好理解了:
<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>
vue的生命周期共分为8个部分,直接用代码展示下:
new Vue({
el: '#v1',
data: {
message: 'vvv!'
},
beforeCreate: function() {
//1、 见名知意,就是创建实例前调用
console.log("创建前")
},
created: function() {
//常用,创建完成后调用,不过此阶段只是完成数据的观测,没有进行挂载,$el不能使用,需要初始化一些数据时使用。
console.log("创建完成后调用");
},
beforeMount: function() {
//即将挂载的时候调用
console.log("mount之前")
},
mounted: function() {
//常用,翻译过来就是安装完成后,也就是el挂在到实例上以后调用,页面最初要使用的的一些方法可以放这
console.log("安装完成后调用")
},
beforeUpdate: function() {
console.log("更新前");
},
updated: function() {
console.log("更新完成");
},
beforeDestroy: function() {
//常用,实例销毁之前调用,可以解除一些绑定的事件等
console.log("销毁之前调用");
},
destroyed: function() {
console.log("已销毁");
}
})