首页 > 其他 > 详细

vue学习日记02

时间:2020-02-27 00:50:23      阅读:71      评论:0      收藏:0      [点我收藏+]

双向绑定

  双向绑定一直都是vue的卖点。举个栗子如下图。

    技术分享图片

 

  我们在data中写入了值为 hello world 的 msg。并绑定到输入框input 和 div 中。这个时候,input 和 div中显示的内容都为  hello world,在当我们修改input里的值的时候,div也会跟着一起修改。

  技术分享图片

 

  可以看到,当我们的数据更新的时候,我们的视图也会更新。同样的,当视图更新了,我们的数据也会跟着更新。

  这儿 v-model 其实是一种语法糖。官网上有说明如下:

  技术分享图片  

  v-model 就相当于,先将input的值绑定msg,然后监听input方法,当值发生改变的时候,就去修改msg的值。如下图写法:

  技术分享图片

   js对象有两种属性:

  (1)数据属性,包含4个 ,value 值, writable 可写,enumerable 可枚举,configurable 可修改特性 

    技术分享图片

  (2)访问器属性, 主要由getter, setter 组成。

    技术分享图片

 

   cola.age获取的值,其实是获取的cola._age返回出来的值。修改是将age的值,去赋值给_age。

   有了get 和 set 就可以去完成双向绑定的操作。https://www.cnblogs.com/zhenfei-jiang/p/7542900.html 这篇文章有讲解。

        就是说,Vue内部通过 Object.defineProperty方法属性拦截的方式,把data对象里每个数据的读写转化成getter/setter,当数据变化时通知视图更新。

   

  

  

 

vue学习日记02

原文:https://www.cnblogs.com/wangnothings/p/12370008.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!