vue的双向绑定和方法的使用

<template>
  <div id="app">
    <!--绑定数据-->
    <h2>{{msg}}</h2>
    <!--输入框的双向绑定，后面加 v-model 后面的值写你要绑定的值-->
    <input type="text" v-model="msg">
    <!--一个获取输入框值的按钮-->
    <button @click="getMsg()">点击获取input的值</button>
    <!--一个修改输入框值的按钮-->
    <button @click="setMsg()">设置input的值</button>
    <hr>
    <br>
    <!--没有双向绑定的输入框，根据ref来查找这个input-->
    <input type="text" ref="userinfo">
    <br>
    一个div，通过ref来查找改变值（测试）
    <div ref="box">
      a a a a a
    </div>
    <!--通过ref获取输入框的方法-->
    <button @click="getInputValue()"> 获取第二个input</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('执行了');

        // 方法里面获取data里面的数据
        alert(this.msg)
      },
      // 修改输入框值    修改方法
      setMsg(){
        this.msg="我是改变后的"
      },
      // 通过ref获取值的方法
      getInputValue(){
        // 获取ref的属性节点   获取值
        alert(this.$refs.userinfo.value);
         // 点击后修改div的背景颜色
        this.$refs.box.style.background = 'red';
      },
    }
  }
</script>

<style>

</style>