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

快来打我* 2022-03-25 08:36 439阅读 0赞

### 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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0MjYxMzAz_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExNDI0MjYxMzAz_size_16_color_FFFFFF_t_70]: /images/20220325/531aa7702b7c42b08ee0069c045b102c.png