vue自学笔记(1)

环境配置
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的时候数据修改了,突然觉得这个功能没撒用

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值