当前位置：首页 > news >正文

Vue入门小练习

news 2026/3/27 8:53:45

文章目录

Hello Vue
Vue文本指令
Vue属性绑定
Vue双向绑定
Vue事件绑定
Vue猜数字
Vue简单计算器
Vue简单计算器升级版
Vue循环遍历
Vue员工列表练习
Vue小练习
Vue显示隐藏相关

使用一些简单的小案例来熟悉Vue的基本使用方法

Hello Vue

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>HelloVue</title>
</head>
<body><!--Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.jsunpkg：https://unpkg.com/vue@2.6.14/dist/vue.min.js。cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js--><div><h1>{{info}}</h1></div><!--引入Vue框架文件--><!--<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>--><script src="vue.min.js"></script><script>let v = new Vue({el:"div",data:{info:"Hello VUE!"}});setTimeout(function (){v.info="值改变了";}, 3000)</script>
</body>
</html>

Vue文本指令

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>VUE指令</title>
</head>
<body><div><!--插值, 不依赖于标签,即使没有标签也能和变量进行绑定-->{{info}}<p>{{info}}</p><!--让元素的文本内容和变量进行绑定--><p v-text="info"></p><!--让元素的标签内容和变量进行绑定--><p v-html="info"></p></div><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script>let v = new Vue({el:"div",data:{info:"文本相关<b>加粗</b>"}})</script>
</body>
</html>

Vue属性绑定

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>属性绑定</title>
</head>
<body><div><a v-bind:href="url">超链接1</a><!--省略v-bind是简写--><a :href="url">超链接2</a><img :src="imgUrl" alt="" width="150px"><input type="text" :value="info"></div><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script>let v = new Vue({el:"div",data:{url:"http://www.baidu.com",imgUrl:"../touxiang.png",info:"测试文本内容"}})setTimeout(function (){v.url = "http://www.youku.com";v.imgUrl = "b.jpg";v.info = "值改变了";}, 3000);</script>
</body>
</html>

Vue双向绑定

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>双向绑定</title>
</head>
<body><div><input type="text" v-model="info"></div><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script>let v = new Vue({el:"div",data:{info:"双向绑定"}})setTimeout(function () {alert("用户输入的是:"+v.info)},3000);</script>
</body>
</html>

Vue事件绑定

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件绑定</title>
</head>
<body><div><input type="text" v-model="info"><!--v-on:事件名="方法名" 事件绑定--><input type="button" value="按钮1" v-on:click="f"><!--简写--><input type="button" value="按钮2" @click="f()"></div><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script>let v = new Vue({el:"div",data:{info:""},methods:{f(){alert(v.info)}}})</script>
</body>
</html>

Vue猜数字

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue猜数字</title>
</head>
<body><div><input type="text" v-model="num"  placeholder="请输入1-100之间的整数"><input type="button" value="猜一猜" @click="diy()"><div>结果: {{result}}</div></div><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script>//生成1-100的整数let x = parseInt(Math.random()*100)+1;let v = new Vue({el:"body>div",data:{result:"还未点击",num:""},methods:{diy(){//判断用户输入的值和x的关系if (v.num > x){v.result="猜大了";}else if (v.num < x){v.result = "猜小了";}else{v.result="恭喜你猜对了!"}}}})</script>
</body>
</html>

Vue简单计算器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue计算器</title>
</head>
<body><div><input type="text" v-model="n1"><input type="text" v-model="n2"><input type="button" value="加" @click="f(1)"><input type="button" value="减" @click="f(2)"><input type="button" value="乘" @click="f(3)"><input type="button" value="除" @click="f(4)"><div>结果: {{result}}</div></div><!--引入Vue框架--><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script>let v = new Vue({el:"body>div",data:{result:"",n1:"",n2:""},methods:{f(x){switch (x){case 1://加v.result = v.n1*1 + v.n2*1;break;case 2://减v.result = v.n1*1 - v.n2*1;break;case 3://乘v.result = (v.n1*1) * (v.n2*1);break;case 4://除v.result = (v.n1*1) / (v.n2*1);break;}}}})</script>
</body>
</html>

Vue简单计算器升级版

<head><meta charset="UTF-8"><title>Vue计算器升级版</title>
</head>
<body><div><input type="text" v-model="n1"><input type="text" v-model="n2"><input type="button" value="加" @click="f('+')"><input type="button" value="减" @click="f('-')"><input type="button" value="乘" @click="f('*')"><input type="button" value="除" @click="f('/')"><div>结果: {{result}}</div></div><!--引入Vue框架--><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script>let v = new Vue({el:"body>div",data:{result:"",n1:"",n2:""},methods:{f(x){//eval("5-2")  此方法可以将字符串以JS代码的形式执行v.result = eval(v.n1 + x + v.n2);}}})</script>
</body>
</html>

Vue循环遍历

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue循环遍历</title>
</head>
<body><div><ul><!--v-for循环遍历指令,遍历的过程中生成当前元素--><li v-for="name in arr">{{name}}</li></ul><p v-for="name in arr">{{name}}</p><h1 v-for="name in arr">{{name}}</h1><p v-for="p in persons">名字:{{p.name}}, 年龄:{{p.age}}, 类型:{{p.type}}</p><table border="1"><caption>英雄列表</caption><tr><th>名字</th><th>年龄</th><th>类型</th></tr><tr v-for="p in persons"><td>{{p.name}}</td><td>{{p.age}}</td><td>{{p.type}}</td></tr></table></div><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script>let v = new Vue({el:"div",data:{arr:["刘备","关羽","诸葛亮","孙尚香","刘禅"],persons:[{name:"刘备", age:"50", type:"战士"},{name:"孙尚香", age:"20", type:"射手"},{name:"诸葛亮", age:"30", type:"法师"}]},methods:{}})</script>
</body>
</html>

Vue员工列表练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>员工列表练习</title>
</head>
<body><div><input type="text" placeholder="姓名" v-model="emp.name"><input type="text" placeholder="工资" v-model="emp.salary"><input type="text" placeholder="工作" v-model="emp.job"><input type="button" value="添加" @click="f()"><table border="1"><caption>员工列表</caption><tr><th>姓名</th><th>工资</th><th>工作</th></tr><tr v-for="p in arr"><td>{{p.name}}</td><td>{{p.salary}}</td><td>{{p.job}}</td></tr></table></div><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script>let v = new Vue({el:"div",data:{arr:[{name:"张三",salary:3000,job:"销售"},{name:"李四",salary:4000,job:"人事"},{name:"王五",salary:10000,job:"程序员"}],emp:{name:"",salary:"",job:""}},methods:{f(){//push()是JavaScript中数组里面的添加方法// v.arr.push(v.emp); //用这种方式是对原对象的引用,值会随着文本框的内容改变/*v.arr.push({name:"赵六",salary:10000,job:"程序员"})JSON.parse(JSON.stringify(v.emp))创建了一个新的对象添加到数组中此时emp对象的值发生改变和数组中的新对象是无关的,这种复制出来的和原对象无关的方式称为深拷贝(有引用关系的是浅拷贝)*/v.arr.push(JSON.parse(JSON.stringify(v.emp)));}}})</script></body>
</html>

Vue小练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>综合练习</title>
</head>
<body><div><table border="1"><caption>个人信息</caption><tr><td>照片</td><td><img :src="person.url" width="150" alt=""></td></tr><tr><td>名字</td><td>{{person.name}}</td></tr><tr><td>年龄</td><td>{{person.age}}</td></tr><tr><td>好友</td><td><ul><li v-for="name in person.friend">{{name}}</li></ul></td></tr><tr><td colspan="2" style="text-align: center"><input type="button" value="请求数据" @click="f()"></td></tr></table></div><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script>let v = new Vue({el:"table",data:{person:{name:"xxx",age:"xxx",url:"../touxiang.png",friend:[]}},methods:{f(){v.person = {name:"女生",age:"18",url:"../touxiang2.png",friend: ["Lucy","Mike","John"]}}}})</script>
</body>
</html>

Vue显示隐藏相关

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>显示隐藏相关</title>
</head>
<body><div><!--v-if让元素是否显示和变量建立关系,如果变量值为false 则删除元素--><h1 v-if="isVisible">刘德华</h1><!--和上面v-if的显示状态取反--><h1 v-else>张三</h1><!--v-show让元素是否显示和变量建立关系,如果变量值为false 则隐藏元素(如果需要频繁切换显示状态)--><h1 v-show="isVisible">张学友</h1><h1>郭富城</h1></div><!--引入Vue框架--><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script>let v = new Vue({el:"body>div",data:{isVisible:true// isVisible:true},methods:{}})</script>
</body>
</html>

Vue入门小练习

文章目录Hello VueVue文本指令Vue属性绑定Vue双向绑定Vue事件绑定Vue猜数字Vue简单计算器Vue简单计算器升级版Vue循环遍历Vue员工列表练习Vue小练习Vue显示隐藏相关使用一些简单的小案例来熟悉Vue的基本使用方法 Hello Vue <!DOCTYPE html> <html lang"en"…...

编程日记 2023/2/27 5:40:56

Oracle-09-集合运算符篇

2022年4月13日23:01:25 通过本章学习，您将可以:1、描述 SET 操作符2、将多个查询用 SET 操作符连接组成一个新的查询目录 🏆一、SET OPERATORS ⭐️1.1、UNION /UNION ALL ⭐️1.2、INSTERSECT ⭐️1.3、MINUS ǳ...

编程日记 2023/2/27 5:39:47

获取浏览器（服务端）请求中特定的Cookie

有必要解释一下HttpServletRequest接口，因为我们需要从它里面获取Cookie。 HttpServletRequest HttpServletRequest是一个Java接口，提供了访问HTTP请求信息的方法，例如HTTP方法、请求URI、头部、参数和会话属性。它是Java Servlet API的一部…...

编程日记 2023/2/27 5:38:38

c++11 标准模板（STL）（std::unordered_set）（九）

定义于头文件 <unordered_set>template< class Key, class Hash std::hash<Key>, class KeyEqual std::equal_to<Key>, class Allocator std::allocator<Key> > class unordered_set;(1)(C11 起)namespace pmr { templat…...

编程日记 2023/2/27 5:37:27

python实战应用讲解-【实战应用篇】文件操作（附python示例代码）

目录知识储备使用 python-libarchive-c 模块创建压缩文件解压文件查看信息...

编程日记 2023/2/27 5:36:20

OpenCV-Python系列（二）—— 图像处理（灰度图、二值化、边缘检测、高斯模糊、轮廓检测）

一、【灰度图、二值化】 import cv2 img cv2.imread("lz2.png") gray_img cv2.cvtColor(img, cv2.COLOR_BGR2GRAY) # 灰度图 # 二值化，(127,255)为阈值 retval,bit_img cv2.threshold(gray_img, 127, 255, cv2.THRESH_BINARY) cv2.imshow(photo1,im…...

编程日记 2023/2/27 5:35:11

ccc-台大林轩田机器学习基石-hw1

文章目录Question1-14Question15-PLAQuestion16-PLA平均迭代次数Question17-不同迭代系数的PLAQuestion18-Pocket_PLAQuestion19-PLA的错误率Question20-修改Pocket_PLA迭代次数Question1-14 对于有明确公式和定义的不需要使用到ml 智能系统在与环境的连续互动中学习最优行为策…...

编程日记 2023/2/27 5:34:02

hadoop03-MapReduce【尚硅谷】

大数据学习笔记 MapReduce 一、MapReduce概述 MapReduce是一个分布式运算程序的编程框架，是基于Hadoop的数据分析计算的核心框架。 MapReduce处理过程为两个阶段：Map和Reduce。 Map负责把一个任务分解成多个任务；Reduce负责把分解后多任务处…...

编程日记 2023/2/27 5:32:49

测牛学堂：软件测试python学习之异常处理

python的捕获异常程序在运行时，如果python解释器遇到一个错误，则会停止程序的执行，并且提示一些错误信息，这就是异常。程序停止执行并且提示错误信息，称之为抛出异常。因为程序遇到错误会停止执行，有时…...

编程日记 2023/2/27 5:31:39

图神经网络--图神经网络

图神经网络图神经网络图神经网络一、PageRank简介1.1互联网的图表示1.2PageRank算法概述1.3求解PageRank二、代码实战2.1引入库2.2加载数据，并构建图2.3计算每个节点PageRank重要度2.4用节点尺寸可视化PageRank值一、PageRank简介 PageRank是Google最早的搜索引擎…...

编程日记 2023/2/27 5:30:27

React useCallback如何使其性能最大化？

前言 React中最让人畅谈的就是其带来的灵活性，可以说写起来非常的舒服。但是也就是它的灵活性太强，往往让我们忽略了很多细节的地方，而就是这些细节的东西能进行优化，减小我们的性能开销。可以说刚学React和工作几年后写React的代…...

编程日记 2023/2/27 5:29:20

长尾关键词使用方法，通过什么方式挖掘长尾关键词？

当你在搜索引擎的搜索栏中输入有关如何使用长尾关键词的查询时，你可能希望有简单快捷的方式出现在搜索结果中，可以帮助你更好地应用seo。不过，这里要记住一件事：SEO 策略只会为你的网站带来流量；在你的产品良好之前&a…...

编程日记 2023/2/27 5:28:06

【网络编程套接字（一）】

网络编程套接字（一）理解源IP地址和目的IP地址理解源MAC地址和目的MAC地址理解源端口号和目的端口号PORT VS PID认识TCP协议和UDP协议网络字节序socket编程接口socket常见APIsockaddr结构简单的UDP网络程序服务端创建套接字服务端绑定字符串IP VS 整数IP客…...

编程日记 2023/2/27 5:26:57

shell脚本入门

实习的时候第一个月的考核就是如何部署一个云资源，当时走的捷径（杠杠的搜索能力hhhh）找到了一个shell脚本一键部署，后来被leader问起来就如实说了，leader问有没有看懂shell脚本中的逻辑……（没有&#xff0…...

编程日记 2023/2/27 5:25:49

【经典蓝牙】蓝牙HFP层协议分析

HFP 概述 HFP概念介绍 HFP(Hands-Free Profile)， 是蓝牙免提协议， 可以让蓝牙设备对对端蓝牙设备的通话进行控制，例如蓝牙耳机控制手机通话的接听、挂断、拒接、语音拨号等。HFP中蓝牙两端的数据交互是通过定义好的AT指令来通讯的。 &am…...

编程日记 2023/2/27 5:24:40

互联网摸鱼日报（2023-02-26）

互联网摸鱼日报（2023-02-26） InfoQ 热门话题迁移工具 Air2phin 宣布开源，2 步迁移 Airflow 至 Dolphinscheduler 专访奇安信董国伟博士：目前开源安全的现状并不乐观，但其重要性已成各方共识专访Brian Behlendorf&…...

编程日记 2023/2/27 5:23:33

关于程序员中年危机的一个真实案例

关于中年危机，网上已经有了各种各样的解读。但是，这两天一个学员跟我简单几句聊天，却触发了对于中年危机的另一种思考。如果你曾经也有点迷茫，或许你可以稍微花几分钟看下这个故事。一、无奈的故事 39岁还出来面试&#x…...

编程日记 2023/2/27 5:22:24

【fly-iot飞凡物联】（2）：如何从0打造自己的物联网平台，使用开源的技术栈搭建一个高性能的物联网平台，目前在设计阶段。

目录前言1，fly-iot 飞凡物联2，mqtt-broker 服务3, 管理后台产品/设备设计4,数据存储目前使用mysql，消息存储到influxdb中5,规则引擎使用 ekuiper6, 总结和其他的想法前言本文的原文连接是: https://blog.csdn.net/freewebsys/article/detail…...

编程日记 2023/2/27 5:21:15

Hadoop MapReduce

目录1.1 MapReduce介绍1.2 MapReduce优缺点MapReduce实例进程阶段组成1.3 Hadoop MapReduce官方示例案例：评估圆周率π（PI）的值案例：wordcount单词词频统计1.4 Map阶段执行流程1.5 Reduce阶段执行流程1.6 Shuffle机制1.1 MapReduc…...

编程日记 2023/2/27 5:20:07

时间复杂度和空间复杂度详解

有一堆数据需要排序，A要使用快速排序，B要使用堆排序，A认为自己的代码更高效，B也认为自己的代码更高效，在这种情况下，怎么来判断谁的代码更好一点呢？这时候就有了时间复杂度和空间复杂度。目录 …...

编程日记 2023/2/27 5:18:57

nli-distilroberta-base在工业质检文档中的应用：SOP操作步骤与现场记录逻辑一致性核查

nli-distilroberta-base在工业质检文档中的应用：SOP操作步骤与现场记录逻辑一致性核查 1. 项目背景与价值在工业制造领域，标准作业程序(SOP)与现场操作记录的一致性核查是质量管理的核心环节。传统人工核查方式存在效率低、主观性强、覆盖不全等问题。…...

编程新知 2026/3/27 8:46:40

基于WebSocket与Protobuf协议的抖音直播间实时数据采集方案

基于WebSocket与Protobuf协议的抖音直播间实时数据采集方案【免费下载链接】DouyinLiveWebFetcher 抖音直播间网页版的弹幕数据抓取（2024最新版本） 项目地址: https://gitcode.com/gh_mirrors/do/DouyinLiveWebFetcher 技术背景与挑战在当今直…...

编程新知 2026/3/27 8:18:30

泛微OA Ecology 安全补丁管理账号配置与实战

1. 泛微OA Ecology安全补丁管理账号配置详解第一次接触泛微OA Ecology系统的安全补丁管理功能时，我完全没意识到这个看似简单的配置背后藏着这么多门道。直到有次系统被恶意攻击，才发现默认的管理账号存在安全隐患。今天就带大家彻底搞懂这个关键配置&a…...

编程新知 2026/3/27 7:52:16

南北阁 4.1-3B 开源镜像实战：Streamlit轻量化UI+CoT折叠展示一文详解

南北阁 4.1-3B 开源镜像实战：Streamlit轻量化UICoT折叠展示一文详解想快速体验一个能在本地流畅运行、还能“看见”模型思考过程的智能对话工具吗？今天要介绍的，就是基于南北阁（Nanbeige）4.1-3B模型打造的轻量化流式…...

编程新知 2026/3/27 7:50:16

Zotero Reference插件完全指南：5步实现PDF文献自动化管理

Zotero Reference插件完全指南：5步实现PDF文献自动化管理【免费下载链接】zotero-reference PDF references add-on for Zotero. 项目地址: https://gitcode.com/gh_mirrors/zo/zotero-reference Zotero Reference是一款革命性的Zotero插件，专门…...

编程新知 2026/3/27 7:05:27

面向对象高级三：内部类枚举泛型 java.lang包下常用API

一.内部类1.内部类概述 2.成员内部类（实例内部类）（1）成员内部类可以定义类的一切成员（2）当创建对象时不能直接给内部类创建对象而要先创建外部类的对象然后new成员内部类的对象（3）在…...

编程新知 2026/3/27 5:50:58

OpenClaw智能邮件助手：nanobot镜像自动分类与回复重要邮件

OpenClaw智能邮件助手：nanobot镜像自动分类与回复重要邮件 1. 为什么需要智能邮件助手每天早晨打开邮箱，看到堆积如山的未读邮件总是让人头疼。重要客户的询盘可能被埋没在促销广告中，紧急的协作请求可能因为延迟回复而影响项目进度。作为…...

编程新知 2026/3/27 4:21:50

Halcon仿射变换实战：手把手教你用vector_to_aniso和solve_matrix搞定图像配准（附完整代码）

Halcon仿射变换实战：从原理到工程落地的图像配准指南在工业视觉检测领域，图像配准的精度直接影响着后续缺陷检测的准确性。去年参与的一个半导体封装项目让我深刻体会到这一点——当芯片位置存在0.5像素以上的偏移时，细微的焊球缺陷就会被漏…...

编程新知 2026/3/27 2:32:44

如何快速搭建QQ机器人？LuckyLilliaBot入门指南

如何快速搭建QQ机器人？LuckyLilliaBot入门指南【免费下载链接】LuckyLilliaBot NTQQ的OneBot API插件项目地址: https://gitcode.com/gh_mirrors/li/LuckyLilliaBot 在数字化时代，QQ机器人开发已成为自动化交互的重要工具。LuckyLilliaBot作为N…...

编程新知 2026/3/27 2:18:42

为什么你的Flask农业API总在灌溉高峰期崩？Python高并发部署的4层熔断架构设计（实测QPS提升6.8倍）

第一章：为什么你的Flask农业API总在灌溉高峰期崩？Python高并发部署的4层熔断架构设计（实测QPS提升6.8倍） 当全省智能灌溉系统在每日清晨5:00–7:00集中调度水阀、上传土壤墒情数据时，基于默认配置的Flask API常出现进程…...

编程新知 2026/3/27 1:30:20