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 相关文章推荐
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 Javascript
Javascript获取统一管理的提示语(message)
Feb 03 Javascript
浅析BootStrap Treeview的简单使用
Oct 12 Javascript
vue.js指令v-for使用及索引获取
Nov 03 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
bootstrap手风琴折叠示例代码分享
May 22 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
Oct 16 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 10 Javascript
vue中touch和click共存的解决方式
Jul 28 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
用PHP调用Oracle存储过程的方法
2008/09/12 PHP
PHP中PDO基础教程 入门级
2011/09/04 PHP
PHP 第三节 变量介绍
2012/04/28 PHP
php在线解压ZIP文件的方法
2014/12/30 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
PHP开发的文字水印,缩略图,图片水印实现类与用法示例
2019/04/12 PHP
javascript 日期常用的方法
2009/11/11 Javascript
jquery表单验证框架提供的身份证验证方法(示例代码)
2013/12/27 Javascript
关闭页面window.location事件未执行的原因及解决方法
2014/09/01 Javascript
简介JavaScript中toUpperCase()方法的使用
2015/06/06 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
2016/02/28 Javascript
BootStrap和jQuery相结合实现可编辑表格
2016/04/21 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
Vue Cli与BootStrap结合实现表格分页功能
2017/08/18 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
vue通过路由实现页面刷新的方法
2018/01/25 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
高效使用Python字典的清单
2018/04/04 Python
Python实现的求解最大公约数算法示例
2018/05/03 Python
python matlibplot绘制3D图形
2018/07/02 Python
python如何生成网页验证码
2018/07/28 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
Python发送邮件封装实现过程详解
2020/05/09 Python
python合并多个excel文件的示例
2020/09/23 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
CSS3 实现图形下落动画效果
2020/11/13 HTML / CSS
大学生村官任职感言
2014/01/09 职场文书
总经理岗位职责范本
2014/02/02 职场文书
李敖北大演讲稿
2014/05/24 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
社团招新宣传语
2015/07/13 职场文书
css之clearfix的用法深入理解(必看篇)
2023/05/21 HTML / CSS