Vue data 数据对象

我们在创建 Vue 实例的时候，除了指定挂载点 el 外，还指定了一个属性 data，用来存储 Vue 实例中使用的数据。

1. data 属性的语法

data 属性两种写法：data作为对象 和 data作为函数。

1) data 作为对象的语法

data: { 
    message: '通过data对象获取 message 值'
}

2) data 作为函数的语法

data() {
  return {
    message: '通过data函数获取 message 值'
  }
}

我要试一试

2. data 对象中的数据类型

data 属性中包含的数据，既可以使用基本类型（比如：字符串、数字），又可以使用复杂类型（比如：数组、对象）。

javascript 代码：

data: {
  website: {
    name: '编程宝库',
    url: 'www.codebaoku.com'
  }
}

html 代码：

<div id="app">
  <p>网站名称：{{ website.name }}</p>
  <p>网站地址：{{ website.url }}</p>
</div>

我要试一试

3. Vue 视频教程

视频地址：https://www.bilibili.com/video/BV12J411m7MG?p=5&share_source=copy_web

结合响应系统，在应用状态改变时，Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。Vue.js 提供了一些常用的内置指令，这些指令都是以 “v-”作为前缀。其中，v-text指令和插值都可以用于显示文本内容。