数据绑定

将数据填充到标签中

数据响应式

监听数据变化并在视图（页面）中更新

例子

在谷歌浏览器的控制台中，可以查看vue对象的数据

修改vue对象的数据，页面内容也会跟着改变

双向数据绑定

数据改变，页面跟着改变
用户改变页面内容，数据跟着改变

例子

<div id="app">
    {{msg}}<br>
    <input type="text" v-model="msg"><br>
</div>
这是不符合格式的写法
<input type="button" value="打印app对象" onclick="printApp()">

<script type="importmap">
{
    "imports": {
        "vue": "./js/vue.esm-browser@3.5.13.js"
    }
}
</script>
<script type="module">
  import { createApp } from './js/vue.esm-browser@3.5.13.js'

  createApp({
    data() {
        return {
            msg: 'Hello Vue!'
        }
    }
  }).mount('#app')

  console.log(app)
  function printApp(){
    console.log(app.msg)
  }
</script>

如下图：

解释：

用户该页面的内容（修改input控件的值），会改变模型中的数据
模型中的数据改变了，会影响页面中的div内容

应用场景

<div id="app">
    <div>单价：{{price}}</div>
    数量：<input type="text" v-model="num" />
    <div>合计：{{price * num}}</div>
</div>

<script type="importmap">
{
    "imports": {
        "vue": "./js/vue.esm-browser@3.5.13.js"
    }
}
</script>
<script type="module">
  import { createApp } from 'vue'

  createApp({
    data: function(){
        return { //数据
            price:5800,
            num:1,
        }    
    }
  }).mount('#app')
</script>

原文出处：/show_1GWEf0clEpx.html