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>
