【Vue】数据绑定

1、单项数据绑定

1.1什么是单向数据绑定

所谓单向数据绑定，就是通过修改Vue实例中data数据中属性的修改，以达到页面上对应值的修改。代码如下：

<div id="root">
    单向数据绑定:<input type="text" v-bind:value="name">  
<!--单向数据绑定:<input type="text" :value="name">  简写形式 -->
</div>

<script type="text/javascript">
    Vue.config.productionTip=false//阻止Vue在启动时生成生产提示。

   const vm = new Vue({
        el:'#root',
        data:{
            name:'clean',
        }
    })
</script>

以上两个代码块用最简单的形式实现了单向数据绑定，当我修改data中name属性的值后，页面上显示的内容就会改变，如下图通过Vue开发者工具修改实现的效果：

修改前：

修改后：
那么以上操作就实现了一个简单的数据绑定

2、双向数据绑定

2.1什么是双向数据绑定。
单向数据绑定可以通过data中的属性值来实现的；也就是说，只能通过开发人员修改数据来实现。如果用户修改了页面上输入框中的内容，能否修改data中绑定的数据呢，这个时候就用到了双向数据绑定（v-model）。

<div id="root">
    单向数据绑定:<input type="text" v-bind:value="name">  <br>
<!--    单向数据绑定:<input type="text" :value="name">   简写形式 -->
    双向数据绑定:<input type="text" v-model:value="name">
</div>

<script type="text/javascript">
    Vue.config.productionTip=false

    new Vue({
        el:'#root',
        data:{
            name:'clean',
        }
    })
</script>

看一下修改前的效果：
最后看一下修改第二个输入框中内容的效果：
发现我可以通过修改第二个输入框中的内容改变页面上的第一个输入框中的内容，还可以修改data中的内容。