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控件
May 07 Javascript
面向对象的javascript(笔记)
Oct 06 Javascript
Javascript var变量隐式声明方法
Oct 19 Javascript
JavaScript获取页面上某个元素的代码
Mar 13 Javascript
表格单元格交错着色实现思路及代码
Apr 01 Javascript
jquery实现相册一下滑动两次的方法
Feb 09 Javascript
Spring mvc 接收json对象
Dec 10 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
js 性能优化之算法和流程控制
Feb 15 Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 Javascript
Angular开发实践之服务端渲染
Mar 29 Javascript
JS简单数组排序操作示例【sort方法】
May 17 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作为网站开发语言的原因分享
2012/01/03 PHP
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
jquery实现的一个导航滚动效果具体代码
2013/05/27 Javascript
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
微信 java 实现js-sdk 图片上传下载完整流程
2016/10/21 Javascript
微信小程序 icon组件详细及实例代码
2016/10/25 Javascript
jQuery排序插件tableSorter使用方法
2017/02/10 Javascript
微信小程序 template模板详解及实例
2017/02/21 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
2017/06/19 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
vue的全局提示框组件实例代码
2018/02/26 Javascript
Javasript设计模式之链式调用详解
2018/04/26 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
使用vue-cli脚手架工具搭建vue-webpack项目
2019/01/14 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
[02:36]DOTA2英雄基础教程 帕格纳
2014/01/20 DOTA
Python文件去除注释的方法
2015/05/25 Python
学习python 之编写简单乘法运算题
2016/02/27 Python
python3使用urllib模块制作网络爬虫
2016/04/08 Python
python简易远程控制单线程版
2018/06/20 Python
深入浅析Python中的迭代器
2019/06/04 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
使用Python制作一盏 3D 花灯喜迎元宵佳节
2021/02/26 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
工业学校毕业生自荐信范文
2014/01/03 职场文书
巧克力蛋糕店创业计划书
2014/01/14 职场文书
小学生自我评价范文
2014/01/25 职场文书
2014年社区学雷锋活动总结
2014/03/09 职场文书
离婚案件上诉状
2015/05/23 职场文书
公司催款律师函
2015/05/27 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书
2019毕业典礼主持词!
2019/07/05 职场文书
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python