Vue基础技术之——数据绑定

Vue数据大致绑定分为两类：

1、单向数据绑定（v-bind）： 数据只能从data流向页面。

2、双向数据绑定（v-model）：数据不仅能从data流向页面，还能从页面流向data。

　　话不多说，先上代码body内容，让我们感受一下Vue

　

 1 <div id="root">
 2             单向数据绑定：<input type="text" v-bind:value="name" /><br>
 3             双向数据绑定：<input type="text" v-model:value="name" />
 4 
 5         </div>
 6         
 7         
 8         <script type="text/javascript">
 9             new Vue({
10                 el: '#root',
11                 data:{//用于存数据，数据给el所指定的容器使用//
12                     name:'王忠'
13                 }
14                 
15             })
16          </script>

 单向数据绑定的值 变化后: 

 

 双向数据绑定的值 变化后: （这样就实现了 model => view 以及 view => model 的双向绑定。）

 

总结：v-model只能应用在表单元素（输入类元素）所以v-model:value 可以简写成v-model，因为v-model默认收集就是value值

　　  可以理解为：因为输入类元素的value值是可以变化的，让用户进行交互，捕获用户的输入从而影响data数据的变化 。

 

可以简写

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

        </div>

v-bind简写成:                         v-model:value简写成v-model

 

posted @ 2021-11-23 17:32  攻城狮-tester  阅读(182)  评论(0)  编辑  收藏  举报