Vue-数据驱动视图

数据驱动视图

在Vue中，你可以通过将JavaScript对象作为数据模型，然后使用Vue的指令将数据模型绑定到相应的视图上。这样当数据模型发生改变时，视图会自动更新。

• 假设有一个包含 message 属性的数据模型，在 HTML 的某个元素上我们使用了 {{message}} 来显示模型数据。如果我们在 JavaScript 中更新了 message 的值，那么HTML中绑定的内容也会自动更新。

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

<script>
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
</script>

例子中，message绑定在 <p> 元素中，初始值为 'Hello Vue!' 。如果我们在控制台中运行 app.message = 'Updated message!' ，那么视图中的内容也会更新为' Updated message!'。

以上是Vue 数据双向绑定的介绍和示例