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.rhkb.cn/news/430290.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

中小微企业生产管理利器-- 超轻量生产工单系统

为解决中小微制造企业的生产管理难题&#xff0c;搭贝官方自主设计并推出了一款开箱即用的超轻量「生产工单系统」应用。该系统具备5分钟上手&#xff0c;3小时落地的优势&#xff0c;无需实施即可轻松实现生产任务的敏捷管理&#xff0c;同时支持自定义修改&#xff0c;能够适…

PostgreSQL的学习心得和知识总结(一百五十一)|[performance] PostgreSQL列对齐

目录结构 注&#xff1a;提前言明 本文借鉴了以下博主、书籍或网站的内容&#xff0c;其列表如下&#xff1a; 1、参考书籍&#xff1a;《PostgreSQL数据库内核分析》 2、参考书籍&#xff1a;《数据库事务处理的艺术&#xff1a;事务管理与并发控制》 3、PostgreSQL数据库仓库…

鸟类识别系统Python+卷积神经网络算法+深度学习+人工智能+TensorFlow+ResNet50算法模型+图像识别

一、介绍 鸟类识别系统。本系统采用Python作为主要开发语言&#xff0c;通过使用加利福利亚大学开源的200种鸟类图像作为数据集。使用TensorFlow搭建ResNet50卷积神经网络算法模型&#xff0c;然后进行模型的迭代训练&#xff0c;得到一个识别精度较高的模型&#xff0c;然后在…

HarmonyOS应用开发(组件库)--组件模块化开发、工具包、设计模式(持续更新)

致力于&#xff0c;UI开发拿来即用&#xff0c;提高开发效率 正则表达式...手机号校验...邮箱校验 文件判断文件是否存在 网络下载下载图片从沙箱中图片转为Base64格式从资源文件中读取图片转Base64 组件输入框...矩形输入框...输入框堆叠效果&#xff08;用于登录使用&#xf…

Django 请求配置

http请求配置 请求流程 urls.py配置 from first_app import viewsurlpatterns [path(admin/, admin.site.urls),path(test/,views.first_test), ] views.py配置 from django.shortcuts import render,HttpResponse# Create your views here. def first_test(request):prin…

Linux相关概念和重要知识点(6)(make、makefile、gdb)

1.make、makefile &#xff08;1&#xff09;什么是make、makefile&#xff1f; 在我们写完代码后&#xff0c;要编译运行&#xff0c;如果有多个.c文件就需要每次都自己用gcc -o来处理&#xff0c;这十分麻烦。当我们想要自定义多个文件的处理时&#xff0c;我们会浪费很多时…

全国职业院校技能大赛(大数据赛项)-平台搭建Spark、Scala笔记

Spark作为一个开源的分布式计算框架拥有高效的数据处理能力、丰富的生态系统、多语言支持以及广泛的行业应用。Scala是一种静态类型的编程语言&#xff0c;它结合了面向对象编程和函数式编程的特性&#xff0c;被誉为通用的“大数据语言”。而二者的结合更能迸发出新奇的化学反…

ER论文阅读-Decoupled Multimodal Distilling for Emotion Recognition

基本介绍&#xff1a;CVPR, 2023, CCF-A 原文链接&#xff1a;https://openaccess.thecvf.com/content/CVPR2023/papers/Li_Decoupled_Multimodal_Distilling_for_Emotion_Recognition_CVPR_2023_paper.pdf Abstract 多模态情感识别&#xff08;MER&#xff09;旨在通过语言、…

MODELS 2024:闪现奥地利,现场直击报道

周末出逃&#xff01;小编闪现至奥地利林茨&#xff0c;亲临第27届MODELS 2024国际会议&#xff0c;以第一视角引领你深入会议现场&#xff0c;领略其独特风采。利用午饭时间&#xff0c;小编紧急码字&#xff0c;只为第一时间将热点资讯呈现给你~ 会议介绍&#xff1a; MODEL…

数据结构篇--折半查找【详解】

折半查找也叫做二分查找或者对数查找&#xff0c;是一种在有序数组中查找特定元素的查找算法。 折半查找的算法步骤如下&#xff1a; 将目标关键字key与数组中的中间元素比较&#xff0c;若相等则查找成功。key大于中间元素&#xff0c;就到数组中大于中间元素的部分进行查找&…

吴恩达深度学习笔记:卷积神经网络(Foundations of Convolutional Neural Networks)2.1-2.2

目录 第四门课 卷积神经网络&#xff08;Convolutional Neural Networks&#xff09;第二周 深度卷积网络&#xff1a;实例探究&#xff08;Deep convolutional models: case studies&#xff09;2.1 为什么要进行实例探究&#xff1f;&#xff08;Why look at case studies?&…

【ComfyUI】自定义节点ComfyUI_LayerStyle——模仿 Adob​​e Photoshop 的图层样式、图层混合、图文混合、添加不可见水印

官方代码&#xff1a;https://github.com/chflame163/ComfyUI_LayerStyle.git 相关资料下载&#xff1a;https://pan.baidu.com/s/16vmPe6-bycHKIjSapOAnZA?pwd0919 简介 在ComfyUI画布点击右键 - Add Node, 找到 “&#x1f63a;dzNodes”。 节点根据功能分为5组&#xff…

深入Android UI开发:从自定义View到高级布局技巧的全面学习资料

在Android开发的世界中&#xff0c;UI设计和实现是吸引用户的关键。本文将为您介绍一套全面的Android UI开发学习资料&#xff0c;包括详细的学习大纲、PDF文档、源代码以及配套视频教程&#xff0c;旨在帮助您从自定义View到高级布局技巧&#xff0c;全面提升您的UI开发技能。…

基于SpringBoot+Vue+MySQL的电影院购票管理系统

系统展示 用户前台界面 管理员后台界面 系统背景 随着电影产业的蓬勃发展&#xff0c;电影院已成为人们休闲娱乐的重要场所。然而&#xff0c;传统的电影院购票管理系统存在诸多不便&#xff0c;如购票流程繁琐、排队时间长、无法提前选座等问题&#xff0c;给观众的观影体验带…

uni-data-select 使用 localdata 传入数据出现 不回显 | 下拉显示错误的 解决方法

目录 1. 问题所示2. 正确Demo3. 下拉显示错误(Bug复现)4. 下拉不回显(Bug复现)1. 问题所示 uni-app的下拉框uni-data-select 使用 localdata 传入数据 主要总结正确的Demo以及复现一些Bug 数据不回显数据不显示下拉选项2. 正确Demo 详细的基本知识推荐阅读:uni-app中的…

java项目之健身房管理系统源码(springboot)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的健身房管理系统。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 健身房管理系统的主要使用…

ModbusTCP通讯错误的排查

Modbus是一种由MODICON公司开发的工业现场总线协议标准&#xff0c;是一项应用层报文传输协议。该协议用于传输数字和模拟变量[1]。有关该协议的报文具体格式&#xff0c;以及一些基本概念&#xff0c;见[1]。 本文以一个例子&#xff0c;阐述当ModbusTCP通讯出现错误的时候&a…

深度学习01-概述

深度学习是机器学习的一个子集。机器学习是实现人工智能的一种途径&#xff0c;而深度学习则是通过多层神经网络模拟人类大脑的方式进行学习和知识提取。 深度学习的关键特点&#xff1a; 1. 自动提取特征&#xff1a;与传统的机器学习方法不同&#xff0c;深度学习不需要手动…

VOC2007数据集

目标检测入门code 文件目录 下载数据集——在官网下载VOC2007数据集 下载训练数据集 TRAIN data 下载测试数据集 TEST data 解压数据集 解压——训练数据集&#xff0c;在服务器上&#xff0c;目录为VOCdevkit 部分文件目录 全部文件总目录 解压——测试数据集 &#xff08;…

移情别恋c++ ദ്ദി˶ー̀֊ー́ ) ——14.AVL树

1.AVL 树 1.1AVL 树的概念 二叉搜索树虽可以缩短查找的效率&#xff0c;但如果数据有序或接近有序二叉搜索树将退化为单支树&#xff0c;查 找元素相当于在顺序表中搜索元素&#xff0c;效率低下。因此&#xff0c;两位俄罗斯的数学家G.M.Adelson-Velskii 和E.M.Landis在1962…