Vue 及双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点

<template>
  <div id="app">
    <h1>{{ msg }}</h1>

    <input type="text" v-model="msg" />

    <button v-on:click="getMsg()">获取表单里面的数据</button>

    <button v-on:click="setMsg()">设置表单里面的数据</button>

    <hr>
    <br>
    <input type="text"  ref="userinfo" />

    <button v-on:click="getInputValue()">获取第二个表单里面的数据</button>

    <div ref="box">我是一个box</div>
  </div>
</template>

<script>
/*
  双向数据绑定 MVVM Vue就是一个MVVM框架
  M model
  V view

  MVVM model改变会影响view,view反过来会影响model
  双向数据绑定必须在表达里面使用
 */

export default {
  name: 'app',
  data () {
    return {
      msg: '双向数据绑定'
    }
  }, methods: {//自定义方法
      getMsg(){
        //alert("vue方法执行了");
        //方法里面获取data的数据
        alert(this.msg)
      },
      setMsg(){
         this.msg="我是改变后的数据";
      },
      getInputValue(){
        //获取ref定义的dom节点
        console.log(this.$refs.userinfo);

        //获取节点的value
        alert(this.$refs.userinfo.value);

        //改变box颜色
        this.$refs.box.style.background='red';
      },
    }
}
</script>

<style lang="scss">

</style>

运行截图：