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>