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

<template>


  <div id="app">  
    
      <h2>{{msg}}</h2>

      <input type="text" v-model=‘msg‘ />


      <button v-on:click="getMsg()">获取表单里面的数据get</button>


      <button v-on:click="setMsg()">设置表单的数据set</button>

      <br>
      <br>
      <hr>

      <br>
      <br>
      <input type="text" ref="userinfo" />
      <br>
      <br>
      <div ref="box">我是一个box</div>

      <br>
      <br>
      <button v-on:click="getInputValue()">获取第二个表单里面的数据</button>

      

  </div>
</template>

<script>


  /*
  双向数据绑定   MVVM   vue就是一个MVVM的框架。

  M  model

  V  view

  MVVM：  model改变会影响视图view，view视图改变反过来影响model


  双向数据绑定必须在表单里面使用。


  */

    export default {     
      data () {  /*业务逻辑里面定义的数据*/
        return {
          msg: ‘你好vue‘         
        }
      },methods:{   /*放方法的地方*/

          getMsg(){

              // alert(‘vue方法执行了‘);

              //方法里面获取data里面的数据


                alert(this.msg);



          },
          setMsg(){
              this.msg="我是改变后的数据";

          }, getInputValue(){

              //获取ref定义的dom节点
              console.log(this.$refs.userinfo);


              this.$refs.box.style.background=‘red‘;

              alert(this.$refs.userinfo.value);


              
              
          }

      }



    }
</script>


<style lang="scss">



</style>