vue的數據雙向綁定和ref獲取dom節點

vue是一個MVVM的框架

業務邏輯代碼即js部分是model部分，

html是view部分。

當model改變的時候，view也會改變

view 改變是，model也會改變

<template>
  <div id="app">
{{msg}}
<br>
  <input  type="text" v-model="msg" ref="inp"/>  //ref屬性，是為了在model重獲取dom節點用的
  <button v-on:click="getMsg">獲取 </button>
  <button v-on:click="setMsg">設置</button>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'fsafasad'
       
    }
  },
  methods:{
    getMsg:function(){

      alert(this.msg)//獲取model重的msg值，
    },
    setMsg:function(){
　　this.msg="fasdf";  //設置model重的msg值
     console.log(this.$refs.inp.value) ;
     this.$refs.inp.style.background="red"; ///改變view的屬性            
首先獲取dom節點，通過view重的ref，然后this.$refs.(ref) 來獲取dom節點，然后對dom節點進行賦值操作                            

    }

  }


}
</script>


<style>


</style>