Vue.js数据绑定之data属性


Posted in Javascript onJuly 07, 2017

Vue.js是JavaScript的一个MVVM库,M是指模型数据,V是指视图容器,VM是指视图模型,模型数据通过视图模型监听视图容器的变化,而视图容器通过视图模型获取模型数据的变化进行渲染,实现了数据的双向绑定。

data属性

data属性是Vue实例的数据对象,可以绑定的是对象或者是函数。

当数据对象一旦被data绑定就会发生变化,数据对象中的属性会拥有get和set属性,用来监听数据变化,实时响应。

Vue实例会代理data绑定对象上的所有属性,即所有属性直接添加到Vue实例化对象中。

Vue实例可以通过$data属性访问原始数据对象。

Vue实例是通过new Vue()创建的,{{ }}是Vue进行插值的语法,app是Vue的实例化对象,这里需要注意的是el绑定的是视图容器,即DOM对象,data属性绑定的是模型数据。

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
  <div id="app">
    {{msg}}
  </div>
  </body>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script>
    obj={
      msg:"hello Vue";
    };
    var app=new Vue({
      el:'#app',
      data:obj
    })
  </script>
  </html>

在控制台查看app,可以发现app拥有很多属性或方法,其中以 $ 与 _ 开头的都是app内置的属性或方法,从下图中标红的位置可以发现:

Vue实例化对象中的$el属性绑定的是DOM对象;

data属性绑定的数据对象obj中的属性msg直接添加到了Vue实例化对象中,并且拥有了get和set属性;

通过$data属性可以访问原始的模型对象,原始的数据对象发生了变化,变得和Vue实例中的数据是相同的,即obj.msg===app.$data.msg。

Vue.js数据绑定之data属性

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js类型检查实现代码
Oct 29 Javascript
正则表达式搭配js轻松处理json文本方便而老古
Feb 17 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
Jun 07 Javascript
RequireJs的使用详解
Feb 19 Javascript
vue2.0实现导航菜单切换效果
May 08 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
Jun 09 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
Jan 13 Javascript
Vue2 模板template的四种写法总结
Feb 23 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
详解如何使用node.js的开发框架express创建一个web应用
Dec 20 Javascript
详解使用JWT实现单点登录(完全跨域方案)
Aug 02 Javascript
javascript将扁平的数据转为树形结构的高效率算法
Feb 27 Javascript
js实现从左向右滑动式轮播图效果
Jul 07 #Javascript
JavaScript实现图片无缝滚动效果
Jul 07 #Javascript
详解在Vue中如何使用axios跨域访问数据
Jul 07 #Javascript
微信小程序联网请求的轮播图
Jul 07 #Javascript
微信小程序点击控件修改样式实例详解
Jul 07 #Javascript
利用C/C++编写node.js原生模块的方法教程
Jul 07 #Javascript
利用types增强vscode中js代码提示功能详解
Jul 07 #Javascript
You might like
解析coreseek for sphinx的使用
2013/06/21 PHP
PHP实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
php实现背景图上添加圆形logo图标的方法
2016/11/17 PHP
Mootools 1.2教程 函数
2009/09/15 Javascript
JQuery datepicker 使用方法
2011/05/20 Javascript
js关闭当前页面(窗口)的几种方式总结
2013/03/05 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
IE6 hack for js 集锦
2014/09/23 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
jQuery ajax MD5实现用户注册即时验证功能
2016/10/11 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
jQuery实现6位数字密码输入框
2016/12/29 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
Vue底层实现原理总结
2018/02/17 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
解决vue-router路由拦截造成死循环问题
2020/08/05 Javascript
归纳整理Python中的控制流语句的知识点
2015/04/14 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
Python反转序列的方法实例分析
2018/03/21 Python
全球速卖通巴西站点:Aliexpress巴西
2016/08/24 全球购物
什么是索引指示器
2012/08/20 面试题
十佳少先队员演讲稿
2014/09/12 职场文书
政风行风整改报告
2014/11/06 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
本溪关门山导游词
2015/02/09 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
硕士论文致谢范文
2015/05/14 职场文书
导游词之吉林花园山
2019/10/17 职场文书
《原神》新角色演示“神里绫人:林隐泓洄” 宠妹狂魔
2022/04/03 其他游戏