vue -- vue实例

一、vue实例

let app = new Vue({
    // 对象属性
])

二、对象属性

1、el

就是父DOM

2、data

所有vue上面操作的数据都会被写在这里

3、methods

所有的函数方法都写在这里

methods: {
    getFun () {
        console.log(123)
    }
}

4、components

用来注册子组件用

5、props

这个是子元素用来接收父元素传递数据的属性

二、生命周期钩子函数

1、beforeCreate

页面创建前

beforeCreate: function () {
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.message)
}

====

undefined
undefined
undefined

2、created

页面创建完成

created: function () {
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.message)
}

====

undefined
{message: "vue学习第一天"}
vue学习第一天

3、beforeMount

页面加载前

beforeMount: function () {
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.message)
}

====

<div >
        {{message}}
</div>
{message: "vue学习第一天"}
vue学习第一天

4、mounted

页面加载完成

mounted: function () {
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.message)
}

====

<div >
        vue学习第一天
</div>
{message: "vue学习第一天"}
vue学习第一天

5、beforeUpdate

页面数据更新完成之前

在控制台输入：app.message = '修改message'

beforeUpdate: function () {
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.message)
}

====

<div >
    修改message
</div>
{message: "修改message"}
修改message

6、updated

页面数据更新完成

在控制台输入：app.message = '修改message'

beforeUpdate: function () {
    console.log(this.$el)
    console.log(this.$data)
    console.log(this.message)
}

====

<div >
    修改message
</div>
{message: "修改message"}
修改message