03_数据绑定

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>数据绑定</title>
 8     <!-- 引入vue -->
 9     <script type="text/javascript" src="../js/vue.js"></script>
10 </head>
11 <body>
12     <div id="root">
13         
14         <!-- 普通写法 -->
15         <!-- 单向数据绑定：<input type="text" v-bind:value="name"><br/>
16         双向数据绑定：<input type="text" v-model:value="name"> -->
17         <!-- 简写 -->
18         单向数据绑定：<input type="text" :value="name"><br/>
19         双向数据绑定：<input type="text" v-model="name">
20 
21         <!-- 如下代码是错误的，因为 v-model只能应用在表单类元素（输入类元素,必须有value值才行）-->
22        <!--  <h2 v-model:x="name">你好啊</h2> -->
23 
24     </div>  
25 </body>
26 <script type="text/javascript">
27      Vue.config.productionTip = false //阻止vue在启动时生成生产提示。
28      new Vue({
29          el:'#root',
30          data:{
31              name:"尚硅谷"
32          }
33      })
34 </script>
35 </html>

总结：

Vue中有两种数据绑定的方式：

1.单向绑定（v-bind）:数据只能从data流向页面；

2.双向绑定（v-model):数据不仅能从data流向页面，还可以从页面流向data。

备注：

1.双向绑定一般都应用在表单元素上（如input,select等）

2.v-model:value可以简写成v-model，因为v-model默认收集的就是value的值。

posted on 2021-10-25 18:04 我不想一直当菜鸟阅读(55) 评论(0) 收藏举报