【Vue】——前端框架的基本使用

💻博主现有专栏:

                C51单片机(STC89C516),c语言,c++,离散数学,算法设计与分析,数据结构,Python,Java基础,MySQL,linux,基于HTML5的网页设计及应用,Rust(官方文档重点总结),jQuery,前端vue.js,Javaweb开发,设计模式、Python机器学习等
🥏主页链接:

                Y小夜-CSDN博客

目录

🎯本文目的

🎯利用Vite构建Vue项目code1—手动创建项目

🎯跑马灯效果

🎃要求

🎃代码

🎃实现效果

🎯实现景点展示

🎃要求

🎃代码解析

🎃实现效果

🎯实现迷你记事本

🎃要求

🎃代码解析

🎃实现效果


🎯本文目的

(一)掌握Vue.js中的属性绑定指令v-bind的使用;

(二)掌握Vue.js中和双向数据绑定指令v-model和修饰符的使用;

(三)掌握Vue.js中v-if指令和v-show指令控制元素隐藏和显示时的区别;

(四)掌握Vue.js中v-for指令的使用和key属性的作用 

(五)掌握Vue.js中事件修饰符的使用。

🎯利用Vite构建Vue项目code1—手动创建项目

步骤1:在实验四作业代码文件夹下打开DOS命令窗口,输入如下命令:

npm create vite@latest,然后回车,进到下面图,输入y回车,如图。

步骤2:在图中输入项目名称:code1,进入下图选择Vue回车。

步骤3: 在图中选择JavaSript后

步骤4:执行cd code1命令,切换到项目目录code1下,如图所示

步骤5:执行npm install命令,安装项目的全部依赖,成功后如下图

步骤6:执行npm run dev命令,运行项目,成功后如下图

步骤7:按下Ctrl健,单击http://127.0.0.1:5173/,在浏览器中可以看到项目的运行结果

到此项目code1创建并运行完成。

🎯跑马灯效果

🎃要求

要求:1、熟悉组件模版结构。

2、在上面程序“输入代码”中添加代码并修改组件模版结构相应的代码实现如下功能。

(1)单击图片上的向左和向右箭头可以浏览图片。

        (2)当显示到最后一张图片时,向右箭头隐藏;当显示到第一张图片时,向左箭头隐藏。

🎃代码

<!-- 图片切换案例 -->
<template><h1 align="center">软工</h1><h1>洛阳牡丹甲天下,花开时节动京城</h1><div id="box"><img :src="imgArr[index]" alt=""><a href="javascript:;" @click="left" v-show="index != 0"><img class="imgl" src="../assets/images/left.png"></a><a href="javascript:;" @click="right" v-show="index != 9"><img class="imgr" src="../assets/images/right.png"></a></div>
</template>
<script setup>
//输入代码
import { ref } from 'vue';const index = ref(0)
const left = () => {index.value--
}
const right = () => {index.value++
}
const imgArr = ["/src/assets/images/mudan1.jpg","/src/assets/images/mudan2.jpg","/src/assets/images/mudan3.jpg","/src/assets/images/mudan4.jpg","/src/assets/images/mudan5.jpg","/src/assets/images/mudan6.jpg","/src/assets/images/mudan7.jpg","/src/assets/images/mudan8.jpg","/src/assets/images/mudan9.jpg","/src/assets/images/mudan10.jpg"
]</script>
<style scoped>
#box {width: 400px;margin: 0 auto;position: relative;
}h1 {text-align: center;
}#box>img {width: 100%;height: 300px;/*overflow: hidden;   消除误差*/display: block;/*消除误差*/
}a>img {width: 30px;height: 50px;position: absolute;
}a>.imgl {left: 0;top: 125px;
}a>.imgr {right: 0;top: 125px;
}</style>

这段代码是一个Vue.js的图片切换案例。它包含一个HTML模板、JavaScript代码和CSS样式。

HTML模板部分:
- 页面顶部有一个居中的标题"软工",下方有一个标题"洛阳牡丹甲天下,花开时节动京城"。
- 在`<div id="box">`中,有一个图片元素`<img>`,它的`alt`属性为空。
- 有两个超链接`<a>`,分别用于向左和向右切换图片。它们的`href`属性为空,点击时会触发对应的`left`和`right`函数。
- 左箭头图片使用`<img class="imgl">`表示,右箭头图片使用`<img class="imgr">`表示。

JavaScript代码部分:
- 引入了Vue的`ref`函数,用于创建响应式引用。
- 定义了一个名为`index`的响应式引用,初始值为0。
- 定义了两个函数`left`和`right`,分别用于向左和向右切换图片。这两个函数通过修改`index`的值来实现图片切换。
- 定义了一个名为`imgArr`的数组,包含了10个图片的路径。

CSS样式部分:
- 设置`#box`的宽度为400px,并使其水平居中显示。
- 设置标题`h1`为居中对齐。
- 设置图片`<img>`的宽度为100%,高度为300px,并消除误差。
- 设置左右箭头图片的宽度为30px,高度为50px,并设置它们的位置。

总结:
这段代码实现了一个简单的图片切换功能,用户可以通过点击左右箭头来切换不同的图片。

🎃实现效果

🎯实现景点展示

🎃要求

要求:1、熟悉组件模版结构。

2、在上面代码中的“添加代码”处添加适当的代码实现如下功能:

(1)单击“添加景点”按钮在表格末尾添加一行,如图所示。

        (2)单击,每一行后面的“删除”按钮,可以删除对应的行。

🎃代码解析

<template><h1 align="center">软工</h1><!-- //添加代码 --><button class="btn" @click="add">添加景点</button><table><tr><th>序号</th><th>省份</th><th>省会</th><th>旅游景点</th><th>操作</th></tr><tr v-for="(item,index) in list"><td>{{ index+1 }}</td><td>{{ item.province }}</td><td>{{ item.city }}</td><td>{{ item.spot }}</td><td><button @click="del(index)">删除</button></td></tr></table></template><script setup>import { reactive } from 'vue'const list = reactive([{ province: "河南省", city: "郑州市", spot: "少林寺" },{ province: "河南省", city: "洛阳市", spot: "龙门石窟" },{ province: "湖北省", city: "长沙市", spot: "橘子洲头" },{ province: "湖南省", city: "武汉市", spot: "黄鹤楼" },])//添加代码const add=()=>{var str={province:"山东省",city:"青岛市",spot:"日照"};list.push(str);}const del=(x)=>{list.splice(x,1);}</script><style scoped>button.btn {margin-bottom: 20px;}table {border: 3px solid red;border-collapse: collapse;}td,th {border: 1px solid red;}</style>

这段代码是一个使用Vue.js框架编写的简单网页应用。它包含一个表格,用于展示旅游景点的信息,以及添加和删除景点的功能。

首先,让我们来看一下HTML部分:

1. `<h1 align="center">软工</h1>`:这是一个居中的标题,显示文本"软工"。
2. `<button class="btn" @click="add">添加景点</button>`:这是一个按钮,点击时会触发`add`方法,用于添加新的景点。
3. `<table>`:这是一个表格,用于展示旅游景点的信息。
4. `<tr v-for="(item,index) in list">`:这是一个循环,遍历`list`数组中的每个元素(即每个景点),并将其渲染为表格的一行。
5. `<td>{{ index+1 }}</td>`、`<td>{{ item.province }}</td>`、`<td>{{ item.city }}</td>`、`<td>{{ item.spot }}</td>`:这些是表格的单元格,分别显示景点的序号、省份、城市和景点名称。
6. `<td><button @click="del(index)">删除</button></td>`:这是一个删除按钮,点击时会触发`del`方法,并传入当前景点的索引,用于删除该景点。

接下来,让我们看一下JavaScript部分:

1. `import { reactive } from 'vue'`:从Vue.js中导入`reactive`函数,用于创建响应式数据。
2. `const list = reactive([...])`:创建一个响应式数组`list`,包含一些初始的旅游景点信息。
3. `const add=()=>{...}`:定义一个`add`方法,用于添加新的景点。在这个方法中,我们创建一个新的景点对象,并将其添加到`list`数组中。
4. `const del=(x)=>{...}`:定义一个`del`方法,用于删除指定的景点。在这个方法中,我们使用`splice`方法从`list`数组中删除指定索引的元素。

最后,让我们看一下CSS部分:

1. `button.btn {...}`:设置按钮的样式,包括外边距。
2. `table {...}`:设置表格的样式,包括边框和边框合并属性。
3. `td, th {...}`:设置表格单元格的样式,包括边框。

总的来说,这段代码实现了一个简单的旅游景点信息展示和编辑功能。用户可以通过点击按钮来添加新的景点,或者点击删除按钮来删除指定的景点。所有的操作都会实时反映在表格中。

🎃实现效果

🎯实现迷你记事本

🎃要求

要求:熟悉组件模版结构。

  1. 补充完整程序,运行结果如图5-5所示,并实现如下功能:

(1)在文本框中输入内容后单击回车键会添加到列表中。

(2)鼠标移动到每列后面的图标上单击可以删除相应内容。

(3)鼠标单击“clear”可以将所有列表内容删除。

(4)统计区域左侧始终统计记录的条数。

(5)当列表都被删除了,统计区的内容不显示。

🎃代码解析

<!-- 迷你记事本案例 -->
<template><h1 align="center">软工</h1><h2>迷你记事本</h2><div id="box"><!-- 写区域 --><div class="write"><input type="text"  placeholder="请输入任务......" v-model="inputValue"  @keyup.enter="add"></div><!-- 显示区域 --><ul><li  v-for="(item,index) in list">{{ index+1+": " }}{{ item }}         <img src="../assets/images/delect.png"   @click="remove(index)"></li></ul><!-- 统计区域 --><div class="count"><span class="left"   v-text= "'共'+list.length+'项'"   v-if="list.length"></span><span class="right"  @click=" clear"   v-if="list.length" >Clear</span></div>     </div></template><script setup>import { reactive, ref } from 'vue';const list = reactive(["学习", "吃饭", "购物"])const inputValue = ref("")//添加add方法定义const add=()=>{list.push(inputValue.value);inputValue.value="";}//删除remove方法定义const remove=(x)=>{list.splice(x,1)}//清除clear方法定义const clear=()=>{list.length=0}</script><style scoped>ul,li {padding: 0;margin: 0;}#box {width: 300px;margin: 20px auto 0 auto;border:3px solid #ccc;background-color: #eee;border-radius: 5px;}h2 {text-align: center;margin-bottom: 10px;color: red;}div.write>input {height: 35px;width: 288px;border: none;border-bottom: 1px solid #ccc;padding-left: 10px;font-size: 20px;font-style: italic;outline: none;}ul {list-style: none;background-color: #fff;padding-left: 10px;padding-right: 10px;}ul>li {line-height: 38px;color: #000;font-size: 20px;border-bottom: 1px solid #ccc;position: relative;}ul>li:last-child{border-bottom: none;}ul>li>img {width: 24px;position: absolute;right: 0;top: 9px;display: none;cursor: pointer;}ul>li:hover>img {display: block;}div.count {height: 20px;color: #000;font-size: 12px;padding: 8px 10px 0 10px;position: relative;}div.count>span.right {float: right;cursor: pointer;}</style>

这段代码是一个使用Vue.js框架实现的迷你记事本应用。它包括一个输入框用于添加任务,一个列表显示所有任务,以及一个统计区域显示任务总数和清除按钮。

首先,我们来看一下HTML部分:

1. `<template>`标签内包含了整个应用的HTML结构。
2. 在`<div id="box">`内,有三个主要部分:写区域、显示区域和统计区域。
3. 在写区域,有一个输入框`<input type="text" v-model="inputValue" @keyup.enter="add">`,用户可以在其中输入任务。输入的任务会被双向绑定到`inputValue`变量上。当用户按下回车键时,会触发`add`方法。
4. 在显示区域,有一个无序列表`<ul>`,其中每个列表项`<li>`都包含一个任务文本和一个删除图标。点击删除图标会触发`remove`方法。
5. 在统计区域,有两个`<span>`元素,分别显示任务总数和清除按钮。点击清除按钮会触发`clear`方法。

接下来,我们看一下JavaScript部分:

1. 使用Vue.js的`reactive`函数创建了一个响应式数组`list`,用于存储所有的任务。
2. 使用Vue.js的`ref`函数创建了一个响应式引用`inputValue`,用于存储输入框的值。
3. 定义了三个方法:`add`、`remove`和`clear`。`add`方法用于将输入框的值添加到任务列表中;`remove`方法用于从任务列表中删除指定索引的任务;`clear`方法用于清空任务列表。

最后,我们看一下CSS部分:

1. 为整个应用设置了一些基本样式,如宽度、边距、边框等。
2. 为各个元素设置了具体的样式,如字体大小、颜色、位置等。

优化建议:

1. 可以考虑为删除图标添加一个提示信息,让用户知道点击它可以删除任务。
2. 可以考虑在输入框为空时禁用添加按钮,避免添加空任务。
3. 可以考虑在任务列表为空时隐藏统计区域,避免占用空间。

🎃实现效果

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

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

相关文章

聊 · Flutter

曾经的团队是国内最早投入Flutter框架怀抱的团队&#xff0c;后来又有机会负责起了Flutter相关项目&#xff0c;翻回以前写的文章&#xff0c;感慨良多&#xff0c;这是其中的一篇关于这些内容的闲聊。 | 导语Flutter相关的技术资源官网和网友都有过系统且细致的整理&#xff0…

GIT安装以及详细操作流程

一、Git的安装 Git支持Linux、Windows和Mac系统&#xff0c;安装Git&#xff0c;可以到Git官方网站直接下载安装程序。 Git仓库的基本概念和流程 什么是版本库&#xff1f;版本库又名仓库&#xff0c;英文名repository,你可以简单的理解一个目录&#xff0c;这个目录里面的所…

element-plus表格添加简单右键

实现如下 <template><main class"mainClass" > <el-table :data"tableData" style"width: 100%"row-contextmenu"rowContextmenu"cell-contextmenu"cellContextmenu"contextmenu.prevent><el-table-c…

【全开源】Shopro社区团购(小程序版)

邻里间的购物新选择 基于Fastadmin后端管理系统Uniapp客户端&#xff08;仅支持微信小程序&#xff09;开发&#xff0c;生鲜果蔬社区团购的不二之选、快速搭建社区团购平台、让你的产品走进上千个社区。线上团购线下自提&#xff0c;玩转社区消费新模式提供专业、优质的社区团…

openh264 编码命令行工具源码分析

openh264 OpenH264 是由 Cisco 公司发布的一个开源的 H.264 编码和解码器。它提供了命令行工具&#xff0c;可以用于对视频进行编码和解码操作。 使用说明 openh264 编码命令行工具可以使用命令行或 config 配置进行编码操作。编译和使用方法具体可以参考 Windows11编译open…

easyexcel将csv转为excel处理数字问题

使用easyexcel可以将csv格式的文件转为.xlsx文件&#xff0c;但是csv中有很多数字&#xff0c;比如&#xff1a;"123","12.34","-111"&#xff0c;默认情况下会将其作为字符串写入.xlsx文件&#xff0c;就如同下面一样&#xff0c;字符类型的数字…

国产SDI/功能与GV7600/GS2972类似

是一款传递数字标清和高清信号的数字视频发送器&#xff0c;功能与GV7600/GS2972类似&#xff0c;集成了线缆驱动器&#xff0c;可以使用 75 欧姆的同轴线缆传递525i&#xff0c;625i&#xff0c;720P&#xff0c;1080P。 支持的速率如下&#xff1a; 如需更多资料请留言哦&am…

【Spring框架全系列】SpringBoot_3种配置文件_yml语法_多环境开发配置_配置文件分类(详细)

文章目录 1.三种配置文件2. yaml语法2.1 yaml语法规则2.2 yaml数组数据2.3 yaml数据读取 3. 多环境开发配置3.1 多环境启动配置3.2 多环境启动命令格式3.3 多环境开发控制 4. 配置文件分类 1.三种配置文件 问题导入 框架常见的配置文件有哪几种形式&#xff1f; 比如&#xf…

python11 序列的相关操作

枚举遍历 序列的相关操作 text "hello,python" # in 判断字符是否在序列中&#xff0c;存在返回true,否则返回false print(p是否存在:,(p in text)) print(a是否存在:,(a in text)) # not in 判断字符不在序列中&#xff0c;不存在返回true,否则返回false print(p不…

2024年数字化经济与金融创新国际学术会议(ICDEFI 2024)

2024年数字化经济与金融创新国际学术会议&#xff08;ICDEFI 2024&#xff09; 会议简介 2024年数字经济与金融创新国际学术会议即将召开。此次会议旨在汇集全球数字经济与金融创新领域的专家学者&#xff0c;共同探讨数字经济的发展趋势以及金融创新的路径。与会者将分享前沿…

如何理解 Java 8 引入的 Lambda 表达式及其使用场景

Lambda表达式是Java 8引入的一项重要特性&#xff0c;它使得编写简洁、可读和高效的代码成为可能。Lambda表达式本质上是一种匿名函数&#xff0c;能够更简洁地表示可传递的代码块&#xff0c;用于简化函数式编程的实现。 一、Lambda表达式概述 1. 什么是Lambda表达式 Lambd…

【STM32】STM32F103C6T6标准外设库

1、标准外设库获取 第一步&#xff0c;首先获取标准外设库&#xff0c;可以从官网进行下载。 https://www.st.com.cn/zh/embedded-software/stm32-standard-peripheral-libraries.html 根据自己的型号选择不同的系列&#xff0c;我这里选择是STM32F1系列 下载最新版本V3.6&a…

【QT5】<总览二> QT信号槽、对象树及样式表

文章目录 前言 一、QT信号与槽 1. 信号槽连接模型 2. 信号槽介绍 3. 自定义信号槽 二、不使用UI文件编程 三、QT的对象树 四、添加资源文件 五、样式表的使用 六、QSS文件的使用 前言 承接【QT5】&#xff1c;总览一&#xff1e; QT环境搭建、快捷键及编程规范。若存…

【最新鸿蒙应用开发】——一篇搞懂什么是UIAbility

UIAbility组件 UIAbility组件是一种包含UI的应用组件&#xff0c;UIAbility组件是系统调度的基本单元&#xff08;最小单元&#xff09;&#xff0c;为应用提供绘制界面的窗口&#xff0c;主要用于和用户交互。一个应用可以包含一个或多个UIAbility组件。 UIAbility的设计理念…

AI大模型应用开发实践:5.快速入门 Assistants API

快速入门 Assistants API Assistants API 允许您在自己的应用程序中构建人工智能助手。一个助手有其指令,并可以利用模型、工具和知识来回应用户查询。 Assistants API 目前支持三种类型的工具: 代码解释器 Code Interpreter检索 Retrieval函数调用 Function calling使用 P…

Java同步与线程安全,同步方法、同步块和java.util.concurrent包的使用

Java的同步与线程安全是并发编程中至关重要的部分。在多线程环境下&#xff0c;确保数据的一致性和避免竞态条件&#xff08;race condition&#xff09;是程序设计的关键。 一、Java中的线程安全 线程安全&#xff08;Thread Safety&#xff09;是指多线程环境下&#xff0c…

一键开启:盲盒小程序里的梦幻奇遇

在繁忙的都市生活中&#xff0c;每个人心中都藏着一个关于奇遇的梦想。如今&#xff0c;我们为您精心打造了一款盲盒小程序——“梦幻奇遇”&#xff0c;只需一键开启&#xff0c;就能带您走进一个充满无限惊喜和梦幻色彩的奇幻世界。 一、神秘盲盒&#xff0c;惊喜连连 “梦幻…

gitlab之cicd的gitlab-runner集成-dockerfile构建环境

目录 概述离线资源docker-compose问题 docker-compose问题1问题2 gitlab-runner集成gitlab 概述 cicd引文目录是想通过dockerfile构建 maven、jdk、docker环境的 gitlab-runner 运行环境。但docker最后测试的时候有点问题&#xff0c;且最后使用 kubectl 时有麻烦&#xff0c;所…

python--面向对象-文件读写-异常

一、继承 定义一个类时&#xff0c;需要使用另外一个类的方法或属性&#xff0c;就可以通过继承实现 object是Python的顶级类&#xff0c;创建类是会自动继承&#xff0c;就拥有object中的方法 定义格式 # 类的定义 # 旧式类定义 一般在定义单个类时使用 class 类名:name N…

Spring Boot 使用自定义注解和自定义线程池实现异步日志记录

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…