vue -- vue实例

一、vue实例

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

二、对象属性

1、el

就是父DOM

2、data

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

3、methods

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

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

4、components

用来注册子组件用

5、props

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

二、生命周期钩子函数

生命周期钩子函数	作用范围
beforeCreate	el,data都为undefined，还没有初始化
created	data数据有了，但是el依旧undefined，即DOM没有
beforeMount	el和data已经完成初始化，可以使用，但是data里面的内容还没有初始化
mounted	vue实例挂载完成，data成功渲染
beforeUpdate	data更新完成之前触发
updated	data更新完成之后触发
beforeDestroy	组件注销之前触发
destroyed	组件注销之后触发

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 id="app">
    {{message}}
</div>
{message: "vue学习第一天"}
vue学习第一天

4、mounted

页面加载完成

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

====

<div id="app">
    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 id="app">
    修改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 id="app">
    修改message
</div>
{message: "修改message"}
修改message