vue入门小练习

文章目录

    • 1.案例需求
    • 2.编程思路
    • 3.案例源码
    • 4.小结

1.案例需求

  1. 一个简易的计算器,其效果如下:
    在这里插入图片描述
  2. 图片切换,其效果如下:
    在这里插入图片描述
  3. 简易记事本,其效果如下:
    在这里插入图片描述

2.编程思路

1.这个Vue.js应用实现了一个简单的计算器,包含输入两个数值(通过v-model.number绑定为数字类型)、选择运算方式(加、减、乘、除),并有一个计算按钮。点击按钮后,通过sum方法根据所选运算方式计算结果,并将结果显示在页面上。Vue的响应式特性确保了输入变化时界面即时更新,同时利用计算属性sumplus展示了Vue计算属性的用法。整体通过Vue应用实例的创建、挂载以及与DOM的交互完成。
2.这是一个基于Vue.js的图片轮播程序。首先定义了一个Vue实例,其中包含图片的URL和图片编号。通过绑定点击事件,实现了点击左箭头时显示上一张图片,点击右箭头时显示下一张图片的功能。图片编号在0到10之间循环,当编号小于10时,图片URL中的编号前补0,以保持文件名的统一格式。最后,将Vue实例挂载到页面中的指定元素上。
3.这是一个基于Vue.js的简易记事本应用。程序定义了一个Vue实例,包含一个任务列表tasks和一个输入消息msg。用户在输入框中输入任务并按下回车时,down方法被触发,将输入的任务添加到任务列表中,并清空输入框。列表区域通过v-for指令渲染任务列表,每个任务都有一个删除按钮,点击时触发del方法删除对应任务。底部有一个统计任务数量的显示和一个清空所有任务的按钮,点击清空按钮时触发Clear方法,将任务列表清空。最后,Vue实例被挂载到页面中的#todoapp元素上。

3.案例源码

第一题源代码:

<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div id="app"><h2>{{message}}</h2><input type="text" v-model.number="num1" /><select v-model="cal"><option value="jia">+</option><option value="jian">-</option><option value="cheng">*</option><option value="chu">/</option></select><input type="text" v-model.number="num2" />= {{sumplus}}<!-- {{sum()}} --><!-- {{result}} --><button @click="sum">计算</button></div><script type="text/javascript" src="../js/vue.global.js"></script><script>// 1.创建appconst app = Vue.createApp({// data: option apidata: function () {return {message: "Hello Vue",num1: "",num2: "",cal: "jia",result: "",};},methods: {/*     sum() {if (this.cal == "jia") {return this.num1 + this.num2;} else if (this.cal == "jian") {return this.num1 - this.num2;} else if (this.cal == "cheng") {return this.num1 * this.num2;} else {return this.num1 / this.num2;}}, */sum() {if (this.cal == "jia") {this.result = this.num1 + this.num2;} else if (this.cal == "jian") {this.result = this.num1 - this.num2;} else if (this.cal == "cheng") {this.result = this.num1 * this.num2;} else {this.result = this.num1 / this.num2;}return this.result;},},computed: {sumplus() {if (this.cal == "jia") {return this.num1 + this.num2;} else if (this.cal == "jian") {return this.num1 - this.num2;} else if (this.cal == "cheng") {return this.num1 * this.num2;} else {return this.num1 / this.num2;}},},});// 2.挂载appapp.mount("#app");</script></body>
</html>

2.第二题源代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>图片切换</title><link rel="stylesheet" href="./css/index.css" /></head><body><div id="mask"><div class="center"><h2 class="title"><img src="" alt="" /></h2><!-- 图片 --><img v-bind:src="url" alt="" /><!-- 左箭头 --><a href="javascript:void(0)" class="left"><img src="./images/prev.png" alt="" v-on:click="pre" /></a><!-- 右箭头 --><a href="javascript:void(0)" class="right"><img src="./images/next.png" alt="" v-on:click="next" /></a></div></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script type="text/javascript" src="../../js/vue.global.js"></script><script>const app = Vue.createApp({// data: option apidata: function () {return {url: "./images/00.jpg",num: 0,};},methods: {pre() {this.num--;if (this.num < 0) {this.num = 0;}this.url = `./images/0${this.num}.jpg`;},next() {this.num++;if (this.num >= 10) {this.num = 10;this.url = `./images/${this.num}.jpg`;} else {this.url = `./images/0${this.num}.jpg`;}},},});// 2.挂载appapp.mount("#mask");</script></body>
</html>

3、第三题源代码:

<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><title>小度记事本</title><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta name="robots" content="noindex, nofollow" /><meta name="googlebot" content="noindex, nofollow" /><meta name="viewport" content="width=device-width, initial-scale=1" /><link rel="stylesheet" type="text/css" href="./css/index.css" /></head><body><!-- 主体区域 --><section id="todoapp">{{tasks}}<!-- 输入框 --><header class="header"><h1>小度记事本</h1><inputautofocus="autofocus"autocomplete="off"placeholder="请输入任务"class="new-todo"v-model="msg"@keydown.enter="down"/></header><!-- 列表区域 --><section class="main"><ul class="todo-list"><li class="todo" v-for="(task,index) in tasks"><div class="view"><span class="index">{{index+1}}</span> <label>{{task}}</label><button class="destroy" @click="del(index)"></button></div></li></ul></section><!-- 统计和清空 --><footer class="footer"><span class="todo-count"><strong>{{tasks.length}}</strong> items left</span><button class="clear-completed" @click="Clear">Clear</button></footer></section><!-- 底部 --><footer class="info"></footer><!-- 开发环境版本,包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script type="text/javascript" src="../js/vue.global.js"></script><script>const app = Vue.createApp({data: function () {return {tasks: [],msg: "",};},methods: {down() {this.tasks.push(this.msg);this.msg = "";},del(index) {console.log(index);this.tasks.splice(index, 1);},Clear() {this.tasks = [];},},});app.mount("#todoapp");</script></body>
</html>

4.小结

主要用到的知识点如下:

  • 数据绑定: 使用 v-model 实现双向数据绑定,将用户输入和应用程序状态连接起来。
  • 事件处理: 使用 @click等指令处理用户交互事件,例如点击按钮、按键操作等。
  • 条件渲染: 虽然文档中没有明确展示,但可以通过 v-if、v-else等指令实现根据条件渲染不同的内容。
  • 列表渲染: 使用 v-for 指令遍历数据并渲染列表,例如图片切换中的图片列表和记事本中的任务列表。
  • 计算属性: 在计算器应用中使用了计算属性 sumplus,根据输入值和运算符自动计算结果,体现了 Vue.js 响应式的特性。

通过学习这些案例,可以进一步探索 Vue.js 的更多功能,例如组件化、路由、状态管理等,并开发更复杂的应用程序。

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

检索索引对象中的重复值、删除重复值pandas.Index.duplicated

【小白从小学Python、C、Java】 【考研初试复试毕业设计】 【Python基础AI数据分析】 检索索引对象中的重复值、删除重复值 pandas.Index.duplicated [太阳]选择题 根据代码&#xff0c;下列哪个选项正确表示了去重后的结果&#xff1f; import pandas as pd idx pd.Index([1,…

图书管理系统小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;图书分类管理&#xff0c;图书信息管理&#xff0c;我的待还处管理&#xff0c;图书归还管理&#xff0c;催还提醒管理&#xff0c;系统管理 微信端账号功能包括&#xff1a;系统…

如何实现接口幂等性?

概述 幂等&#xff0c;英文idempotent [aɪdempətənt] 幂等这个词源自数学&#xff0c;是数学中的一个概念&#xff0c;常见于抽象代数中&#xff0c;表达的是N次变换与1次变换的结果相同&#xff0c;在计算机的各个领域都借用了该概念 幂等函数或幂等方法&#xff0c;是指…

stm32单片机个人学习笔记6(EXTI外部中断)

前言 本篇文章属于stm32单片机&#xff08;以下简称单片机&#xff09;的学习笔记&#xff0c;来源于B站教学视频。下面是这位up主的视频链接。本文为个人学习笔记&#xff0c;只能做参考&#xff0c;细节方面建议观看视频&#xff0c;肯定受益匪浅。 STM32入门教程-2023版 细…

大模型Qwen2.5 家族的最新成员

阿里今天发布了 Qwen 家族的最新成员&#xff1a;Qwen2.5&#xff0c;包括语言模型 Qwen2.5&#xff0c;以及专门针对编程的 Qwen2.5-Coder 和数学的 Qwen2.5-Math 模型。 所有开放权重的模型都是稠密的、decoder-only 的语言模型&#xff0c;提供多种不同规模的版本&#xff…

某准网爬虫逆向

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、目标网站二、抓包分析 1.数据包2.逆向过程总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 例如&#xff1a;随着人工智能的不…

AI 时代的网络危机沟通计划

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

ICM20948 DMP代码详解(35)

接前一篇文章&#xff1a;ICM20948 DMP代码详解&#xff08;34&#xff09; 上一回终于解析完了inv_icm20948_initialize_lower_driver函数&#xff0c;本回回到icm20948_sensor_setup函数&#xff0c;继续往下进行解析。为了便于理解和回顾&#xff0c;再次贴出icm20948_senso…

OpenLayers 开源的Web GIS引擎 - 地图初始化

在线引用&#xff1a; 地址&#xff1a;OpenLayers - Get the Code 离线引用&#xff1a; 下载地址&#xff1a;Releases openlayers/openlayers GitHub v10.0.0版本 地图初始化代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><…

以STM32CubeMX创建DSP库工程方法二

以Keil创建DSP库工程方法二 Keil 中宏定义的添加 编译后直接报错高达420项&#xff0c;摘取一部分错误信息下来如下&#xff1a; D:\AppData\Local\Arm\Packs\ARM\CMSIS\5.7.0\CMSIS\DSP\Include\arm_math.h(6911): error: #757: function “int32_t” is not a type name 以…

【开源免费】基于SpringBoot+Vue.JS图书馆管理系统(JAVA毕业设计)

本文项目编号 T 044 &#xff0c;文末自助获取源码 \color{red}{T044&#xff0c;文末自助获取源码} T044&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析5.4 用例设计 六、核…

数据结构:二叉树(一)

ps&#xff1a;偷懒了几天&#xff0c;接着更新 树的概念 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合。 把它叫做树是因为它看起来像一棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝下的…

银河麒麟高级服务器操作系统V10:提升普通用户操作权限

银河麒麟高级服务器操作系统V10&#xff1a;提升普通用户操作权限 1. 打开终端2. 切换到root用户&#xff08;可选&#xff09;3. 将用户加入到wheel组4. 验证用户组变更5. 使用sudo执行命令结论 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f4…

利用人工智能改变视频智能

人工智能视频分析正在将安全摄像头变成强大的传感器&#xff0c;可以改善您监控站点安全的方式。借助人工智能 (AI)&#xff0c;摄像头可以独立准确地检测威胁&#xff0c;而无需人工不断观看视频。 这并不奇怪——过去几年&#xff0c;这一直是安全行业协会 (SIA) 提出的几大…

软考高级:数据库关系模式推理规则 AI 解读

你提出的是关系模式中的一些经典推理规则&#xff0c;这些规则在数据库理论、函数依赖和范式相关的讨论中经常出现。我们可以通过以下方式深入理解这些规则&#xff0c;并且对其中的推理逻辑进行分解。 生活化例子 想象你在管理一家快递公司&#xff0c;货物需要从仓库&#…

低版本SqlSugar的where条件中使用可空类型报语法错误

SQLServer数据表中有两列可空列&#xff0c;均为数值类型&#xff0c;同时在数据库中录入测试数据&#xff0c;Age和Height列均部分有值。   使用SqlSugar的DbFirst功能生成数据库表类&#xff0c;其中Age、Height属性均为可空类型。   开始使用的SqlSugar版本较低&…

传奇外网架设全套图文教程-BLUE引擎

提示&#xff1a; 当你拿到一个BLUE引擎的版本&#xff0c;首先查看一下版本内文件是否完整&#xff0c;一个完整的BLUE版本包括&#xff1a;DBServer、LoginGate、LoginSrv、LogServer、Mir200、Mud2、RunGate、SelGate、网站和GameCenter.exe&#xff08;引擎&#xff09;&am…

群晖套娃:群晖+飞牛fnOS二合一,群晖nas安装飞牛fnOS系统实录(飞牛fnOS初体验,如何挂载网盘视频,轻松实现影视刮削)

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 飞牛fnOS 📒📝 什么是飞牛fnOS?📝 准备工作📝 安装飞牛fnOS📝 影视刮削⚓️ 相关链接 ⚓️📖 介绍 📖 最近有一款很火的国产NAS系统吸引了不少用户的注意。你是否曾想过,将这种新兴系统安装到你的群晖设备上,实…

LLMs之MemLong:《MemLong: Memory-Augmented Retrieval for Long Text Modeling》翻译与解读

LLMs之MemLong&#xff1a;《MemLong: Memory-Augmented Retrieval for Long Text Modeling》翻译与解读 导读&#xff1a;MemLong 是一种新颖高效的解决 LLM 长文本处理难题的方法&#xff0c;它通过外部检索器获取历史信息&#xff0c;并将其与模型的内部检索过程相结合&…

Wpf使用NLog将日志输出到LogViewer

1 LogViewer LogViewer是通过UDP传输的高性能实时log查看器。 具有一下特性&#xff1a; 通过UDP读取日志通过文件导入日志导出日志到一个文件中排序、过滤&#xff08;日志树&#xff0c;日志等级&#xff09;和查找突出显示搜索文本从UPD接收日志时忽略IP地址列表多接收器支…