环境配置
vue官网
编写一个helloworld程序
我使用的是vscode,你可以使用官方网站推荐的hbuilderx;
项目结构
导入vue.js
<script type="text/javascript" src="../assets/js/vue.js"></script>
html中的代码
<h1>hello world</h1>
<hr>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'helloworld'
}
})
</script>
1、el的值一定要和div的id值相同,使用类加载绑定。
2、获得app的data值的格式要写{{具体属性名字}}
生命周期
官方给了几个函数 created、mounted、updated 和 destroyed
具体格式
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
// => "a is: 1"
我感觉这玩意有点像spring aop面向切面函数的东西
1、beforeCreate
- 在实例创建以前调用
- 没有实例化,数据访问不到
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'helloworld'
},
beforeCreate: function () {
console.log('在实例创建以前,app的message=');
}
})
</script>
数据无法访问并报错
beforeCreate: function () {
console.log('在实例创建以前,app的message='+this.message);
}
2、 created
- 实例被创建完成后调用
- 能拿到数据
- 能修改数据
var app=new Vue({
el:'#app',
data:{
message:'helloworld'
},
created: function () {
console.log('在实例创建后,app的message='+this.message);
}
})
console.log(app.message);
app.message='123';
console.log(app.message);
3、beforeMount
真实的dom节点挂载到页面之前
编译模板已经结束,虚拟dom已经存在,
可以访问数据,也可以更改数据
且修改数据不会触发updated beforeUpdate钩子函数
在beforeMount和mounted之间隐藏了一个render函数,千万不能写,会覆盖系统函数
beforeMount:function () {
console.log('在挂载之前被调用');
}
可以更改数据
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'helloworld'
},
beforeMount:function () {
console.log('在挂载之前被调用'+this.message);
this.message='123'
console.log('在挂载之前被调用'+this.message);
}
})
console.log(app.message);
</script>
4、mounted(挂载)
真实的dom节点挂载到页面以后
mounted:function () {
console.log('mounted,app的message='+this.message);
}
- 这一块我没有很好理解他的思路,等将来使用的时候看看
5、beforeUpdate
- 修改之前调用
6、updated
- 修改之后调用
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'helloworld'
},
beforeUpdate:function () {
console.log('修改前'+this.message);
},
updated:function () {
console.log('修改后'+this.message);
}
})
app.message='123';
</script>
我本以为beforeupdate的时候不会修改数据,但是到beforeupdate的时候数据修改了,突然觉得这个功能没撒用