Vue学习4----Vue及双向数据绑定，v-model，v-on:click，以及ref获取dom节点

最新推荐文章于 2025-06-12 22:17:34 发布

原创

最新推荐文章于 2025-06-12 22:17:34 发布 · 621 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了Vue框架中的核心概念——双向数据绑定，通过`v-model`实现视图与模型的同步，以及使用`v-on:click`监听并处理用户点击事件。同时，文章还提及了如何通过`ref`属性来获取DOM节点，便于进行更深入的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：
在这里插入图片描述

源码，复制即可运行
App.vue文件

<!--05 Vue及双向数据绑定，v-model，v-on:click，以及ref获取dom节点-->
<template>
  <div id="app">
    <div>{
  
  {msg}}</div>
    <!--input里面的值改变，影响了msg-->
    <!--v-model 获取输入框中的数据，赋值给msg-->
    <input type="text" v-model="msg">
    <br/>
    <!--ref用来获取dom节点-->
    <input type="text" ref="info">
    <br/>
    <!--点击事件 -->
    <!--input的值改变影响msg-->
    <button v-on:click="getMsg()">获取表单里面的数据get</button>
    <br/>
    <!--msg改变影响input的值-->
    <button v-on:click="setMsg()">设置表单数据set</button>
    <br>
    <button v-on:click="getInputValue()">获取第二个表单里面的数据</button>
  </div>
</template>

<script>
  /**
   mvvm
   Model改变影响View,View改变影响视图
   双向数据绑定必须在表单(元素)里使用
   这个例子里面就是：input里面的值改变，影响了