vue -- vue实例

一、vue实例

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

二、对象属性

1、el

就是父DOM

2、data

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

3、methods

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

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

4、components

用来注册子组件用

5、props

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

二、生命周期钩子函数

生命周期钩子函数作用范围beforeCreateel,data都为undefined，还没有初始化createddata数据有了，但是el依旧undefined，即DOM没有beforeMountel和data已经完成初始化，可以使用，但是data里面的内容还没有初始化mountedvue实例挂载完成，data成功渲染beforeUpdatedata更新完成之前触发updateddata更新完成之后触发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

转载于:https://www.cnblogs.com/zjh-study/p/10653969.html