vue -- vue实例

2019/04/04 11:41
阅读数 329

一、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
展开阅读全文
打赏
0
1 收藏
分享
加载中
更多评论
打赏
0 评论
1 收藏
0
分享
在线直播报名
返回顶部
顶部