Vue的双向数据绑定

143 阅读1分钟

原理:Object.defineProperty中的get和set方法

作用:可以实现MVVM,不需要手动操作dom

实现: (1)动态实现添加属性

var app=new Vue({
        el:'#app',
        data:{
            stu:{
            mes:'hello'
            }
        }
    })
    //只实现添加一个属性
    Vue.set(app.stu,'gender','male')
    //实现添加n个属性
    app.stu=Object.assign({},app.stu,{gender:'female',height:180})

(2)dom异步更新:如果需要拿到更新后的dom中的数据,需要nextTick

methods:{
fn(){
this.stu.mes='change',
this.$nextTick(function(){
console.log('$nextTick显示的数据:'this.$el.children[0].innerText)
//为id=app里面的第一行数据现实的内容
})
}
}