vue入门小练习

server/2024/9/24 7:52:16/

文章目录

    • 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.ppmy.cn/server/121243.html

相关文章

Flink加载维度数据

Flink加载维度数据 1、为何要加载维度数据&#xff1f; 在我们构建实时数仓时&#xff0c;不能光有事实数据&#xff0c;也需要加载维度数据来标明这些事实数据的具体含义。若只含有事实数据的话&#xff0c;就相当于只有数据本身在不断地变化&#xff0c;而并不知道这些数据…

对条件语言模型(Conditional Language Model)的目标函数的理解

在翻看LORA这篇论文的时候&#xff0c;忽然对条件语言模型优化的目标函数产生了一些疑问&#xff0c;下面是理解。 这个目标函数描述了条件语言模型&#xff08;Conditional Language Model&#xff09;的目标&#xff0c;即通过最大化对数似然估计来学习参数( Φ \Phi Φ)&a…

Stable Diffusion 使用详解(13)--- 3D纹理增强

目录 背景 Normal Map 描述 原理 使用心得 例子 描述 原图 参数设置 底模 ​编辑 正负相关性提示词 其他参数 controlnet 效果 还能做点啥 调整 效果 背景 实际上&#xff0c;在stable diffusion 中&#xff0c;你获取发现很多controlnet 其实功能有点类似&…

PHP智慧教育新篇章优校管理系统小程序源码

智慧教育新篇章 —— 优校管理系统 &#x1f680;【开篇启航&#xff1a;智慧教育的浪潮已至】 在这个日新月异的时代&#xff0c;教育也在悄然发生着变革。随着科技的飞速发展&#xff0c;智慧教育已成为教育领域的新风尚。而“优校管理系统”&#xff0c;正是这股浪潮中的佼…

JavaSE高级(3)——lombok、juint单元测试、断言

一、lombok的使用 默认jvm不解析第三方注解&#xff0c;需要手动开启 链式调用 二、juint单元测试 下载juint包 public class TestDemo {// 在每一个单元测试方法执行之前执行Beforepublic void before() {// 例如可以在before部分创建IO流System.out.println("befor…

Python爬虫之requests模块(一)

Python爬虫之requests模块&#xff08;一&#xff09; 学完urllib之后对爬虫应该有一定的了解了&#xff0c;随后就来学习鼎鼎有名的requests模块吧。 一、requests简介。 1、什么是request模块&#xff1f; requests其实就是py原生的一个基于网络请求的模块&#xff0c;模拟…

腾讯 IEG 游戏前沿技术 一面复盘

前言 投了个实习内推后台开发&#xff0c;本来要电话先交流的那天直接走流程下午面试了&#xff0c;对面两人&#xff0c;面了有一个小时&#xff0c;游戏本的构思续航忘记插电了最后还掉线了一下&#xff0c;趁着还记得面试内容复盘一下 自我介绍一下 答&#xff1a; 您好…

2024.9.23 数据分析

数据脱敏&#xff1a;由于一些数据涉及商业、安全等&#xff0c;不方便公开&#xff0c;所以对隐私数据进行有策略的修改、隐藏等&#xff0c;创建一个与原始数据相似但不含真正敏感细节的数据副本&#xff0c;再由于后续的数据分析、开发测试等操作&#xff08;例如用户的姓名…