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