VUE课程---3、VUE最简单双向数据绑定实例

一、总结

一句话总结：

vue的双向数据绑定可以通过v-model指令：例如<input type="text" v-model="msg2">，这样vue对象可以在input的值发生变化的时候同步的去更新vue对象数据里面msg2的内容

<div id="app">
    <input type="text" v-model="msg2">
    <div>{{msg2}}</div>
</div>
<script src="../js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'欢迎来到vue的世界1111111111111',
            msg2:'这是vue的双向数据绑定的实例'
        }
    });
</script>

二、VUE最简单双向数据绑定实例

博客对应课程的视频位置：3、VUE最简单双向数据绑定实例
https://www.fanrenyi.com/video/26/220

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>VUE最简单双向数据绑定实例</title>
 6 </head>
 7 <body>
 8 <!--
 9 
10 双向绑定
11 v-model指令：<input type="text" v-model="msg">
12 
13 单向数据绑定：
14 通过vue对象==>视图的显示
15 
16 
17 双向数据绑定：
18 通过vue对象<==>视图的显示
19 
20 
21 input和div能同步变化的原因
22 1、input里面内容改变的时候，vue对象里面的data的msg2也同步发生了变化
23 2、vue对象里面的data的msg2发生变化的时候，<div>{{msg2}}</div> 也同步发生变化
24 
25 用原生的js或者jquery如何来实现双向数据绑定
26 1、监听到input的变化
27 2、input发生变化的时候，我们去同步改变msg2的内容
28 3、msg2改变的时候，去更新视图里面的<div>{{msg2}}</div>的内容
29 
30 
31 -->
32 <div id="app">
33     <input type="text" v-model="msg2">
34     <div>{{msg2}}</div>
35 </div>
36 <script src="../js/vue.js"></script>
37 <script>
38     new Vue({
39         el:'#app',
40         data:{
41             msg:'欢迎来到vue的世界1111111111111',
42             msg2:'这是vue的双向数据绑定的实例'
43         }
44     });
45 </script>
46 </body>
47 </html>