vue 双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点

  1 <template>
  2 
  3 
  4   <div id="app">  
  5     
  6       <h2>{{msg}}</h2>
  7 
  8       <input type="text" v-model='msg' />
  9 
 10 
 11       <button v-on:click="getMsg()">获取表单里面的数据get</button>
 12 
 13 
 14       <button v-on:click="setMsg()">设置表单的数据set</button>
 15 
 16       <br>
 17       <br>
 18       <hr>
 19 
 20       <br>
 21       <br>
 22       <input type="text" ref="userinfo" />
 23       <br>
 24       <br>
 25       <div ref="box">我是一个box</div>
 26 
 27       <br>
 28       <br>
 29       <button v-on:click="getInputValue()">获取第二个表单里面的数据</button>
 30 
 31       
 32 
 33   </div>
 34 </template>
 35 
 36 <script>
 37 
 38 
 39   /*
 40   双向数据绑定   MVVM   vue就是一个MVVM的框架。
 41 
 42   M  model
 43 
 44   V  view
 45 
 46   MVVM：  model改变会影响视图view，view视图改变反过来影响model
 47 
 48 
 49   双向数据绑定必须在表单里面使用。
 50 
 51 
 52   */
 53 
 54     export default {     
 55       data () {  /*业务逻辑里面定义的数据*/
 56         return {
 57           msg: '你好vue'         
 58         }
 59       },methods:{   /*放方法的地方*/
 60 
 61           getMsg(){
 62 
 63               // alert('vue方法执行了');
 64 
 65               //方法里面获取data里面的数据
 66 
 67 
 68                 alert(this.msg);
 69 
 70 
 71 
 72           },
 73           setMsg(){
 74               this.msg="我是改变后的数据";
 75 
 76           }, getInputValue(){
 77 
 78               //获取ref定义的dom节点
 79               console.log(this.$refs.userinfo);
 80 
 81 
 82               this.$refs.box.style.background='red';
 83 
 84               alert(this.$refs.userinfo.value);
 85 
 86 
 87               
 88               
 89           }
 90 
 91       }
 92 
 93 
 94 
 95     }
 96 </script>
 97 
 98 
 99 <style lang="scss">
100 
101 
102 
103 </style>