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>