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

最新推荐文章于 2023-10-16 15:48:02 发布

zhaihaohao1

最新推荐文章于 2023-10-16 15:48:02 发布

阅读量577

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/88942089

版权

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

摘要由CSDN通过智能技术生成

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

源码，复制即可运行
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()">获取第二个表单里面的数据</but