Vue数据双向绑定

数据双向绑（vmmv )，简单来说就是model改变促使view改变，view改变促使model改变，通常体现在表单交互中。
1、用 v-model绑定data里的数据（v-model=“msg”，这句写在表单里），然后通过改变input里的value值改变该数据，model里的数据（即data()里的数据）会被改变。
2、通过methods（方法）改变model的数据，input里的数据（v-model=“msg”）会发生变化。
修饰符：
v-model.lazy=“msg"//使用 change 事件进行同步
v-model.number=“age” //自动将用户的输入值转为数值类型
v-model.trim=“msg”//自动过滤用户输入的首尾空白字符
一个简单的例子
代码如下

<template>
  <div id="app">
      <div>{{msg}}</div>
      <div v-text="msg"></div>
     <input type="text" v-model="msg" />
     <button v-on:click="getMsg()">获取第一个表单数据</button>
     <br />
     <button v-on:click="setMsg()">设置第一个表单数据</button>
     <br/><br/>

     <input type="text" ref="userinfo" />   
     <div ref="box1">box</div>
     <button v-on:click="getInputValue()">获取第二个表单数据</button>
  </div>
 
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: '你好',
    }
  },
  methods:{
    getMsg(){
      console.log(this.msg)
    },
    setMsg(){
      this.msg = '这是改变了的数据'
    },
    getInputValue(){
      this.$refs.box1.style.color="red";
      console.log(this.$refs.userinfo);  //通过this.$refs.userinfo获取到dom节点

    }
  }
}
</script>

<style>

</style>