欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Vue.js数据绑定之data属性

程序员文章站 2023-09-09 11:51:52
vue.js是javascript的一个mvvm库，m是指模型数据，v是指视图容器，vm是指视图模型，模型数据通过视图模型监听视图容器的变化，而视图容器通过视图模型获取模型...

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属性

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇： js中变量的连续赋值(实例讲解)

下一篇： 在vue-cli脚手架中配置一个vue-router前端路由

推荐阅读