【吐血总结】前端开发:一文带你精通Vue.js前端框架(七)

文章目录

    • 前言
    • 1️⃣事件处理器
    • 2️⃣表单
    • 3️⃣总结

前言

上一篇中我们学习了vue.js 的条件语句、循环语句等知识点.,现在让我们接着Vue系列的学习。

Vue中事件处理器、表单等在开发中的作用不可或缺,本文将基于实例进行以上知识点的讲解。

在这里插入图片描述


1️⃣事件处理器

在Vue.js中,我们可以使用v-on指令来绑定事件处理器。事件处理分为多种,本文介绍常见的几种。

1.点击事件处理:

语法模板

<template>
  <button v-on:click="handleClick">Click Me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 在这里编写点击事件处理逻辑
      console.log('Button clicked!');
    }
  }
};
</script>

当按钮被点击时,handleClick方法会被调用,并输出一条消息到控制台。

完整代码如下:

在这里插入图片描述

效果如下所示:

在这里插入图片描述

2.输入事件处理:

语法模板

<template>
  <input v-model="message" v-on:input="handleInput" placeholder="Type something">
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  methods: {
    handleInput() {
      // 在这里编写输入事件处理逻辑
      console.log('Input value changed: ' + this.message);
    }
  }
};
</script>

当文本输入框的值发生变化时,handleInput方法会被调用,并输出一条带有当前输入值的消息到控制台。

<div id="app">
    <input v-model="inputValue" placeholder="Type something" oninput="handleInput(event)">
    <p>You typed: {{ inputValue }}</p>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        inputValue: ''
      }
    });

    function handleInput(event) {
      var inputValue = event.target.value;
      console.log('Input value changed:', inputValue);
      // 在这里可以进行其他处理逻辑
    }
  </script>

在上述代码中,我们使用 oninput 属性直接将 handleInput 函数绑定到输入框的 input 事件上。当用户在输入框中输入时,handleInput 函数会被调用,并通过 event.target.value 获取输入框的值。然后,你可以在函数中进行任何其他的处理逻辑。

在这里插入图片描述

3.键盘事件处理:

语法模板

<template>
  <input v-on:keyup.enter="handleEnterKey" placeholder="Press Enter">
</template>

<script>
export default {
  methods: {
    handleEnterKey() {
      // 在这里编写按下回车键的事件处理逻辑
      console.log('Enter key pressed!');
    }
  }
};
</script>

当在文本输入框中按下回车键时,handleEnterKey方法会被调用,并输出一条消息到控制台。


2️⃣表单

v-model 是 Vue.js 中一个常用的指令,它可以将表单输入元素绑定到 Vue 实例中的数据属性。通过这种方式,表单输入的值可以自动地同步到 Vue 实例中的数据,而不需要手动监听 “input” 或 “change” 事件来进行数据同步。

我们可以用 v-model 指令在表单控件元素上创建双向数据绑定。

举个例子:

<div id="app">
  <p>input 元素:</p>
  <input v-model="message">
  <p>绑定: {{ message }}</p>
	
  <p>textarea 元素:</p>
  <p style="white-space: pre">{{ message2 }}</p>
  <textarea v-model="message2"></textarea>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: '秋说',
	message2: '等风来\r\nWait'
  }
})

页面回显如下:

在这里插入图片描述

我们可以通过以下形式实现复选框的双向数据绑定:

<div id="app">
  <p>单个复选框:</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
  <p>多个复选框:</p>
  <input type="checkbox" id="1" value="秋说" v-model="checkedNames">
  <label for="runoob">秋说</label>
  <input type="checkbox" id="2" value="花无缺" v-model="checkedNames">
  <label for="google">花无缺</label>
  <br>
  <span>选择的值为: {{ checkedNames }}</span>
</div> 
<script>
new Vue({
  el: '#app',
  data: {
    checked : false,
    checkedNames: []
  }
})

页面显示如下:

在这里插入图片描述

我们可以通过以下形式实现下拉列表的双向数据绑定:

<div id="app">
  <select v-model="selected" name="1">
    <option value="">choose</option>
    <option value="hello">秋说</option>
    <option value="bye">花无缺</option>
  </select>
  <div id="output">
      你的选择是: {{selected}}
  </div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    selected: '' 
  }
})

页面回显如下:

在这里插入图片描述

通过以上实例可以看到,v-model指令对于表单的处理是十分高效快捷的。


3️⃣总结

以上为前端开发:一文带你精通Vue.js前端框架系列(七),带领读者掌握事件处理器及表单等。

前端开发系列将持续更新,读者可订阅专栏持续学习。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/147969.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Oracle如何快速删除表中重复的数据

方法一&#xff1a; 在Oracle中&#xff0c;你可以使用DELETE语句结合ROWID和子查询来删除重复的记录。以下是一个示例&#xff1a; DELETE FROM your_table WHERE ROWID NOT IN (SELECT MAX(ROWID)FROM your_tableGROUP BY column1, column2, ... -- 列出用于判断重复的列 )…

6大赛题,超148万奖池!2023无锡国际人工智能算法大赛等你来挑战!

各位人工智能卓越的推动者们&#xff0c;我们诚邀您参与【2023年无锡国际人工智能算法大赛】&#xff0c;探索未来AI创新的巅峰之战&#xff01; 比赛为您提供与全球AI开发者技术切磋的机会&#xff0c;不仅是一场竞技&#xff0c;更是智慧的盛宴。 本次大赛总奖金超过148万&…

【FPGA】zynq 单端口RAM 双端口RAM 读写冲突 写写冲突

RAMRAM读写分类RAM原理及实现RAM三种读写模式不变模式写优先读优先 单端口 RAM伪双端口 RAM真双端口 RAM读写冲突和写写冲突读写冲突写写冲突总结&#xff1a; RAM RAM 的英文全称是 Random Access Memory&#xff0c;即随机存取存储器&#xff0c;简称随机存储器&#xff0c;…

什么是OpenCL?

什么是OpenCL&#xff1f; 1.概述 OpenCL(Open Computing Language 开放计算语言)是一种开放的、免版税的标准&#xff0c;用于超级计算机、云服务器、个人计算机、移动设备和嵌入式平台中各种加速器的跨平台并行编程。OpenCL是由Khronos Group创建和管理的。OpenCL使应用程序…

requests库验证错误解决方法

用户在使用requests库进行http请求时&#xff0c;遇到了一个AuthenticationRequired&#xff08;身份验证必须&#xff09;的错误。但是&#xff0c;当使用urllib.request.urlopen进行相同的操作时&#xff0c;却能够成功。同时&#xff0c;用户提供了自己的系统信息&#xff0…

记一次线上问题引发的对 Mysql 锁机制分析 | 京东物流技术团队

背景 最近双十一开门红期间组内出现了一次因 Mysql 死锁导致的线上问题&#xff0c;当时从监控可以看到数据库活跃连接数飙升&#xff0c;导致应用层数据库连接池被打满&#xff0c;后续所有请求都因获取不到连接而失败 整体业务代码精简逻辑如下&#xff1a; Transaction p…

requests Python 官方文档中的 py3 请求链接问题及解决方案

作为一位程序员&#xff0c;加班对我来说并不陌生。虽然老板常说加班是对挑战的追求&#xff0c;但我更愿意将其看作是与bug约会的机会。在这篇文章中&#xff0c;我将分享一个我在requests Python 官方文档中遇到的问题&#xff0c;并给出解决方案。问题在于如何获取py3的请求…

锐捷 Smartweb管理系统命令注入漏洞复现 [附POC]

文章目录 锐捷 Smartweb管理系统命令注入漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 锐捷 Smartweb管理系统命令注入漏洞复现 [附POC] 0x01 前言 免责声明&#xff1a;请勿利用文章内的相关技术从事非法测…

VMware 安装CentOS7

一、软件准备 VMware 虚拟机安装 官网下载链接&#xff1a;VMware pro 17 下载链接 下载 VMware Workstation Pro | CN vm安装教学就不在细说&#xff0c;纯傻瓜式安装 Centos 7镜像文件下载 下载地址&#xff1a; Index of /centos/ | 清华大学开源软件镜像站 | Tsinghua O…

AI+视觉,共话新能源企业数字化转型新可能

​ 近日&#xff0c;“新能源芯机遇2023新能源行业数字化赋能高峰论坛”在江苏常州隆重召开。本次论坛由常州市人民政府、中国能源研究会指导&#xff0c;武进区人民政府、常州市工业和信息化局、英特尔&#xff08;中国&#xff09;有限公司、阿里云计算有限公司共同举办&…

Android实验:Activity界面基础

目录 前言实验目的实验内容实验要求代码实现mainActivityResultActivityactivity_mainactivity_result 结果展示 前言 我们都知道&#xff0c;activity是Android中最重要的组件之一&#xff0c;关于activity的具体内容在这里就不多赘述&#xff0c;主打的就是一个主次分明&…

【C++】哈希(模拟实现unordered系列容器)

一、哈希表的改造 1、模板参数列表的改造 K&#xff1a;关键码类型V&#xff1a;不同容器V的类型不同。如果是 unordered_map&#xff0c;V 代表一个键值对&#xff1b;如果是 unordered_set&#xff0c;V 为 K。KeyOfValue&#xff1a;因为 V 的类型不同&#xff0c;通过 valu…

京东API商品详情接口丨关键词搜索接口丨优惠券接口丨京东店铺所有商品接口

京东API商品详情接口&#xff0c;关键词搜索接口&#xff0c;优惠券接口&#xff0c;京东店铺所有商品接口如下&#xff1a; item_get-获得JD商品详情 公共参数 请求地址: https://o0b.cn/anzexi 名称类型必须描述keyString是调用key&#xff08;必须以GET方式拼接在URL中&…

相关关系与因果关系

本文来自&#xff1a;https://towardsdatascience.com/a-step-by-step-guide-in-detecting-causal-relationships-using-bayesian-structure-learning-in-python-c20c6b31cee5 作者&#xff1a;Erdogan Taskesen 在机器学任务中&#xff0c;确定变量间的因果关系&#xff08;c…

BUUCTF 荷兰宽带数据泄露 1

BUUCTF:https://buuoj.cn/challenges 题目描述&#xff1a; 下载附件&#xff0c;解压得到一个.bin文件。 密文&#xff1a; 解题思路&#xff1a; 1、刚开始没什么思路&#xff0c;看了别人的题解&#xff0c;了解到一个新工具RouterPassView。大多数现代路由器都可以让您备…

遍历一个对象,并得出所对应的

var dates {//定义的对象year:now.getFullYear(),month:now.getMonth()1,date:now.getDate(),hour:now.getHours(),minute:now.getMinutes(),second:now.getSeconds() }//开始遍历循环 var val; for (val in dates){console.log(对象名称&#xff1a;val-对象的值&#xff1a;…

PDF文件标题修改方法

目录 一、PDF文件的标题和名称 二、标题修改方法 1.浏览器打开PDF Editor Free网站 2.点击Free Oline 3.选择第三个从本地上传PDF附件 4.将附件上传&#xff0c;两种方法都可以​编辑 5.等待加载&#xff0c;附件大的情况下会有些慢&#xff0c;耐心等待即可 6. 导入文…

MATLAB中uiwait函数用法

目录 语法 说明 示例 等待对警报对话框的响应 等待对模态消息对话框的响应 等待按钮按下 等待超时 uiwait函数功能是阻止程序执行并等待恢复。 语法 uiwait uiwait(f) uiwait(f,timeout) 说明 uiwait 阻止程序执行&#xff0c;直至调用了 uiresume 函数或删除了当前…

Linux_包管理_apt相关命令的使用

以思维导图的形式整理了下apt相关的命令&#xff0c;便于查阅&#xff0c;主要分为软件源、安装卸载升级、查看&#xff1b; 1、软件源 2、安装、卸载、升级 3、查看 参考链接&#xff1a; Using apt Commands in Linux [Ultimate Guide] 6. apt更新软件源 — 快速使用手册—…

2023年10月国产数据库大事记-墨天轮

本文为墨天轮社区整理的2023年10月国产数据库大事件和重要产品发布消息。 目录 10月国产数据库大事记 TOP1010月国产数据库大事记&#xff08;时间线&#xff09;产品/版本发布兼容认证代表厂商大事记厂商活动排行榜新增数据库相关资料 10月国产数据库大事记 TOP10 10月国产…