码迷,mamicode.com
首页 > 其他好文 > 详细

vue学习日记02

时间:2020-02-27 01:16:19      阅读:77      评论:0      收藏:0      [点我收藏+]

标签:value   特性   讲解   返回   nbsp   图片   get   vue   fine   

双向绑定

  双向绑定一直都是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

标签:value   特性   讲解   返回   nbsp   图片   get   vue   fine   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!