vue基础：获取表单数据，双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点

vue基础：获取表单数据，双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点

1.在vue中我们通过v-model进行数据绑定，vue其实就是实现mvvm的框架，mvvm表示，model的改变会影响view（视图），view的改变会影响model。在下面的例子中，msg的值已经在data中定义，但是我们通过表单中的v-model进行数据的绑定，输入就会影响msg的值。
2.获取表单数据，通过button的事件将表单添加的ref="userinfo"的表单数标记获取。

<input type="test" ref="userinfo"/>
<button v-on:click="getinputvalue()">点击获取表单值</button>

getinputvalue(){
  //ref获取dom节点
  console.log(this.$refs.userinfo);
  alert(this.$refs.userinfo.value);
}

<template>
  <div id="app">
    <h2>{{msg}}</h2>
    <input type="text" v-model='msg'/>
    <button v-on:click="getmsg()">点击获取表单值</button>
    <button v-on:click="setmsg()">点击获取表单值</button>
    <br>
    <input type="test" ref="userinfo"/>
    <button v-on:click="getinputvalue()">点击获取表单值</button>
    <br>
    <div ref="box">
      123
    </div>

  </div>
</template>

<script>
export default {
  data(){/*业务逻辑里面定义的数据*/ 
  return{
    msg:'hello vue'
  }
  },methods:{
getmsg(){
  //获取data中的数据
  alert(this.msg);
},
setmsg(){
  //获取data中的数据
  this.msg="i am change";
},getinputvalue(){
  //ref获取dom节点
  console.log(this.$refs.userinfo);
  alert(this.$refs.userinfo.value);
  this.$refs.box.style.background='red';
}
  }
}
</script>

<style>
</style>