基于Vue实例对象的数据选项

基于 Vue 实例对象的数据选项是指在 Vue 实例创建时，在 data 选项中定义的数据。在 Vue 应用中，通常用于存储和操作需要被动态绑定的数据，以及应用内的状态。Vue 实例中的 data 数据对象可以通过任意命名的属性来访问和修改，也可以直接传递给组件（子组件）。

以下是使用 Vue 实例对象的数据选项的步骤：

1. 在 Vue 实例的 data 选项中定义需要绑定的数据。

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

1. 在Vue模板中使用 {{}} Mustache 语法来绑定数据。

<div id="app">
  {{ message }}
</div>

1. Vue 会自动将 data 对象中的属性和模板中的 Mustache 语法绑定起来。此时，当实例中的数据发生变化时，Vue 会自动更新依赖于此数据的模板内容。

下面是两个简单的示例说明：

示例1：计数器

在该示例中，我们将定义一个计数器变量，并将其绑定到模板中的两个按钮上。每当一个按钮被点击时，计数器的值将增加或减少。

<div id="app">
  <h1>计数器：{{ count }}</h1>
  <button v-on:click="count++">增加</button>
  <button v-on:click="count--">减少</button>
</div>

new Vue({
  el: '#app',
  data: {
    count: 0
  }
})

在这个例子中，我们创建了一个 Vue 实例，并定义了一个 count 变量，该变量初始值为 0。在模板中，我们使用 Mustache 语法将 count 变量绑定到了 h1 标签上，同时使用 v-on 指令将改变计数器值的方法绑定到两个按钮上。这些按钮点击后会调用 Vue 实例中的 count++ 和 count-- 方法，从而更新数据并同步更新模板中的数据渲染。

示例2：待办事项清单

在这个示例中，我们将使用 Vue 实例的数据选项来创建一个待办事项清单。每当用户添加一个新的事项时，我们将使用 v-for 指令从事项数组中动态生成列表来显示。

<div id="app">
  <h1>待办事项清单：</h1>
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
  <input v-model="newItem" placeholder="添加一条新的事项">
  <button v-on:click="addItem()">添加</button>
</div>

new Vue({
  el: '#app',
  data: {
    items: [],
    newItem: ''
  },
  methods: {
    addItem: function() {
      this.items.push(this.newItem);
      this.newItem = '';
    }
  }
})

在这个例子中，我们创建了一个 items 数组和一个 newItem 变量。当用户在输入框中添加新的待办事项时，我们使用 v-model 指令将用户输入绑定到 newItem 变量上。并通过 addItem 方法来将新待办事项添加到 items 数组中。为了在模板中显示待办事项列表，我们使用 v-for 指令从 items 数组中动态生成 <li> 列表项。当 items 数组中的数据发生变化时，Vue 会自动更新模板和用户界面，这样用户就可以实时看到新增的待办事项。