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

VUE笔记

news 2025/11/1 18:55:18

框架：

框架结构，把很多基础功能已经实现（封装了）。

框架：在基础语言之上，对各种基础功能进行封装，方便开发者，提高开发效率。

举例：操作页面

现在：点击按钮，触发事件，获得要操作的标签，对标签进行操作。

框架：操作网页时，程序员只关注操作的内容即可，对标签的内容更新操作，都由框架完成。

前端框架：

JavaScript是原生的。

vue.js 是一个js框架，不是代替js的，是对js进行封装。

优点:

体积小

效率高

双向数据绑定：

M V VM

生态丰富，学习成本低（花费时间少点）

UI框架：将前端常用的一些组件（表单，按钮，消息提示）进行封装；对html和css进行封装。

后端java框架：

mybatis--jdbc

spring···

部分VUE指令

v-show&&v-if和v-else

v-show="布尔值" true-显示，false-隐藏 控制标签的display属性，显示和隐藏标签，效率高 ​ v-if="布尔值" true-显示，false-隐藏 会在隐藏时，删除标签，重新显示时创建标签，效率低，v-else 和 v-if配合

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/v2.6.10/vue.js"></script><style>img{width: 100px;height: 100px;}</style></head><body><!-- v-show="布尔值" true-显示，false-隐藏  控制标签的display属性，显示和隐藏标签，效率高v-if="布尔值" true-显示，false-隐藏  会在隐藏时，删除标签，重新显示时创建标签，效率低，v-else 和 v-if配合，--><div id="app"><img v-show="isShow" src="img/1.jpg"/><img v-show="age<18" src="img/2.jpg"/><img v-if="isShow" src="img/3.jpg"/><img v-if="age<18" src="img/4.jpg"/><img v-else src="img/5.jpg"/><input type="button" value="切换" @click="qh()"></div><script>var app = new Vue({el: '#app', data: {isShow:true,age:15},methods:{qh(){this.isShow=!this.isShow;this.age=19;}}})</script></body>
</html>
v-users
​​​​​​​<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/v2.6.10/vue.js"></script></head><body><div id="uid"><li></li></div><script>var users=[{name:"jim",age:20,gender:"男"},{name:"lih",age:21,gender:"女"},{name:"xm",age:22,gender:"男"}]var uobj =document.getElementById("uid");var s="";for(var i=0;i<users.length;i++){s+="<li>姓名:"+users[i].name+",年龄:"+users[i].age+",性别:"+users[i].gender+"</li>"}uobj.innerHTML=s;</script></body>
</html>
v-for
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="js/v2.6.10/vue.js"></script></head><body><div id="app"><li v-for="usr in users">姓名:{{usr.name}}年龄:{{usr.age}}性别:{{usr.gender}}</li></div><script>var app = new Vue({el: '#app', data: {//数组，模拟从后端响应回来的数据users:[{name:"jim",age:20,gender:"男"},{name:"lih",age:21,gender:"女"},{name:"xm",age:22,gender:"男"}]},methods:{}})</script></body>
</html>

VUE-CLI(脚手架)

vue-cli官方提供的脚手架，用于快速生成一个 vue 的项目模板；预先定义 好的目录结构及基础代码，使得开发更加的快速；

主要的功能  ：

统一的目录结构，本地调试，热部署，单元测试，集成打包上线

需要的环境：

Node.js(前段js的一个运行环境)

npm:
npm 是 Node.js 的包管理工具，用来安装各种 Node.js 的扩展.
使用HbuilderX 搭建vue-cli项目步骤：

一、创建一个vue-cli默认项目或者vue3-cli默认项目，学习前期建议使用vue-cli默认项目创建后会进行下载，需要等待一段时间

二、通过npm i vue-router@3.5.3命令在命令窗口安装vue-router插件包

三、创建Router目录，并在其中创建index.js文件，并在其中配置路由，导入路由和其他组件

四、在Vue.use(router)后定义组件路由，最后在导出路由。

五、使用路由

六、在main.js中配置路由。

七、运行项目

搭建Node.js环境：

一、下载Node.js
      通过地址下载：  Node.js — Download Node.js®
二、解压后
选好要安装的文件位置
之后一直让其继续就行，知道安装好Node.js。
然后我们可以通过win+R  cmd进入指令窗口，输入“node -v”和"npm -v"
当分别出现v16.20.2和8.19.4说明安装好了，可以通过HbuilderX快速创建vue-cli项目了。

相关文章：

VUE笔记

框架&#xff1a; 框架结构&#xff0c;把很多基础功能已经实现&#xff08;封装了&#xff09;。 框架&#xff1a;在基础语言之上&#xff0c;对各种基础功能进行封装&#xff0c;方便开发者&#xff0c;提高开发效率。 举例&#xff1a;操作页面 现在&#xff1a;点击按…...

编程日记 2024/7/1 12:07:59

Datawhale机器学习day-1

赛题 在当今科技日新月异的时代&#xff0c;人工智能&#xff08;AI&#xff09;技术正以前所未有的深度和广度渗透到科研领域&#xff0c;特别是在化学及药物研发中展现出了巨大潜力。精准预测分子性质有助于高效筛选出具有优异性能的候选药物。以PROTACs为例&#xff0c;它是…...

编程日记 2024/7/1 12:06:57

业务模型扩展字段存储

构建业务模型时&#xff0c;通常模型会设置扩展信息&#xff0c;存储上一般使用JSON格式存储到db中。JSON虽然有较好的扩展性&#xff0c;但并没有结构化存储的类型和非空等约束&#xff0c;且强依赖代码中写入/读取时进行序列化/反序列化操作&#xff0c; 当扩展信息结构简单且…...

编程日记 2024/7/1 12:03:53

50+k8s常用命令，助你成为k8s大牛！

Kubernetes是一个强大的容器编排平台&#xff0c;不管是运维、开发还是测试或多或少都会接触到&#xff0c;熟练的掌握k8s可大大提高工作效率和强化自身技能。 集群管理 1. 查看集群节点状态: kubectl get nodes2. 查看集群资源使用情况: kubectl top nodes3. 查看集群信息…...

编程日记 2024/7/1 12:02:52

002-基于Sklearn的机器学习入门：回归分析（上）

本节及后续章节将介绍机器学习中的几种经典回归算法&#xff0c;所选方法都在Sklearn库中聚类模块有具体实现。本节为上篇&#xff0c;将介绍基础的线性回归方法&#xff0c;包括线性回归、逻辑回归、多项式回归和岭回归等。 2.1 回归分析概述 回归&#xff08;Regression&…...

编程日记 2024/7/1 11:58:48

python实现网页自动化（自动登录需要验证的网页）

引言： python作为实现网页自动化的一个重要工具，其强大的各种封装的库使得程序运行更加简洁，只需要下载相应的库，然后调用库中的函数就可以简便的实现我们想要的网页相关操作。 正文： 我的前几篇文章写了关于初学爬虫中比较容易上手的功能，例如爬取静态网页的数据、动…...

编程日记 2024/7/1 11:57:47

ctfshow-web入门-命令执行（web71-web74）

目录 1、web71 2、web72 3、web73 4、web74 1、web71 像上一题那样扫描但是输出全是问号 查看提示&#xff1a;我们可以结合 exit() 函数执行php代码让后面的匹配缓冲区不执行直接退出。 payload&#xff1a; cvar_export(scandir(/));exit(); 同理读取 flag.txt cinclud…...

编程日记 2024/7/1 11:55:45

一体化导航的优点及应用领域

一体化导航&#xff0c;作为现代导航技术的重要发展方向&#xff0c;正日益展现出其独特的魅力和广泛的应用前景。这种导航方式将多种导航技术、信息系统以及数据处理方法集成于一个统一的平台上&#xff0c;为用户提供高效、准确、便捷的导航服务。 一体化导航的核心在于其高度…...

编程日记 2024/7/1 11:53:43

“吃饭大学”！中国大学食堂排行TOP10（含西电）

同学们们&#xff0c;考研择校考虑的因素除了学术&#xff0c;地理位置等方面&#xff0c;你们还会考虑哪些因素呢&#xff1f;小研作为一个吃货&#xff0c;必定会考虑的一个因素当然是大学的食堂美食啊~ 那中国超级好吃的大学食堂在哪&#xff1f;一起来看看有没有你的目标院…...

编程日记 2024/7/1 11:51:40

使用 Mybatis 时，调用 DAO接口时是怎么调用到 SQL 的？

Mybatis 是一个流行的 Java 持久层框架&#xff0c;它提供了一种半自动的 SQL 映射方式&#xff0c;允许开发者在 Java 代码中以一种更加直观和灵活的方式来操作数据库。当你使用 Mybatis 调用 DAO 接口时&#xff0c;背后的工作流程大致如下&#xff1a; 接口定义&#xff1a;…...

编程日记 2024/7/1 11:50:39

微信小程序毕业设计-微信食堂线上订餐系统项目开发实战(附源码+论文)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;微信小程序毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计…...

编程日记 2024/7/1 11:47:36

昂首资本实例使用价格行为策略，交易翻倍一点都不难

交易翻倍难吗&#xff1f;当Anzo Capital昂首资本使用价格行为策略进行交易时&#xff0c;发现一点都不难&#xff0c;以下是使用价格行为策略的实例分享&#xff1a; 1. 在初次交易信号出现时&#xff0c;推荐在1.00429价位入场&#xff0c;将止损设于1.04399&#xff0c;止盈…...

编程日记 2024/7/1 11:43:32

20240701 每日AI必读资讯

&#x1f3eb;AI真炼丹&#xff1a;整整14天&#xff0c;无需人类参与 - 英矽智能推出全球首个AI参与决策的生物学实验室&#xff0c;实现了14天内完成靶点发现和验证的全自动化闭环实验。 - 该实验室由PandaOmics平台驱动&#xff0c;集成多种预测模型和海量数据&#xff0…...

编程日记 2024/7/1 11:42:30

GPT-5 一年半后发布，对此你有何期待？

IT之家6月22日消息&#xff0c;在美国达特茅斯工程学院周四公布的采访中&#xff0c;OpenAI首席技术官米拉穆拉蒂被问及GPT-5是否会在明年发布&#xff0c;给出了肯定答案并表示将在一年半后发布。此外&#xff0c;穆拉蒂在采访中还把GPT-4到GPT-5的飞跃描述为高中生到博士生的…...

编程日记 2024/7/1 11:41:29

Redis学习——Redisson 分布式锁集成及其简单使用

文章目录 引言1. Redisson概述1.1 Redisson的基本概念1.2 Redisson的主要功能1.3 Redisson的优点 2. 开发环境3. Redisson的安装与配置3.1 添加依赖3.2 配置Redisson 4. 使用Redisson4.1 可重入锁4.1.1 可重入锁的概念4.1.2 可重入锁的实现原理4.1.3 简单使用锁的获取和释放 4.…...

编程日记 2024/7/1 11:39:26

08 - matlab m_map地学绘图工具基础函数 - 绘制线、图例、添加文字注释等函数

08 - matlab m_map地学绘图工具基础函数 - 绘制线、图例、添加文字注释等函数 0. 引言1. 关于m_line2. 关于m_quiver3. 关于m_text4. 关于m_plot5. 结语 0. 引言 本篇介绍下m_map中添加绘制基础线&#xff08;m_line、m_plot&#xff09;、绘制箭头&#xff08;m_quiver&#x…...

编程日记 2024/7/1 11:37:24

Luminar Neo 1.20.0 (macOS Universal) - 创新 AI 图像编辑器

Luminar Neo 1.20.0 (macOS Universal) - 创新 AI 图像编辑器 利用尖端的人工智能生成技术&#xff0c;轻松增强照片效果 请访问原文链接&#xff1a;https://sysin.org/blog/luminar-neo/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1…...

编程日记 2024/7/1 11:36:24

谈谈Flink消费kafka的偏移量

offset配置: flinkKafkaConsumer.setStartFromEarliest():从topic的最早offset位置开始处理数据&#xff0c;如果kafka中保存有消费者组的消费位置将被忽略。 flinkKafkaConsumer.setStartFromLatest():从topic的最新offset位置开始处理数据&#xff0c;如果kafka中保存有消费…...

编程日记 2024/7/1 11:35:22

MySQL 高级SQL高级语句（二）

一.CREATE VIEW 视图 可以被当作是虚拟表或存储查询。 视图跟表格的不同是&#xff0c;表格中有实际储存数据记录&#xff0c;而视图是建立在表格之上的一个架构&#xff0c;它本身并不实际储存数据记录。 临时表在用户退出或同数据库的连接断开后就自动消失了&#xff0c;而…...

编程日记 2024/7/1 11:33:20

MySQL之高可用性(四)

高可用性 故障转移和故障恢复 冗余是很好的技术&#xff0c;但实际上只有在遇到故障需要恢复时才会用到。(见鬼&#xff0c;这可以用备份来实现)。冗余一点儿也不会增加可用性或减少宕机。在故障转移的过程中&#xff0c;高可用性是建立在冗余的基础上。当有一个组件失效&…...

编程日记 2024/7/1 11:31:18

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

编程新知 2025/9/19 8:02:57

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

编程新知 2025/10/31 8:26:37

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2025/10/24 6:17:43

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

编程新知 2025/10/26 12:46:24

屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

编程新知 2025/10/30 21:12:38

AI编程--插件对比分析：CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

编程新知 2025/7/6 18:33:10

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

编程新知 2025/6/11 3:07:32

浪潮交换机配置track检测实现高速公路收费网络主备切换NQA

浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求&#xff0c;本次涉及的主要是收费汇聚交换机的配置&#xff0c;浪潮网络设备在高速项目很少&#xff0c;通…...

编程新知 2025/10/25 12:25:19

AI+无人机如何守护濒危物种？YOLOv8实现95%精准识别

【导读】 野生动物监测在理解和保护生态系统中发挥着至关重要的作用。然而&#xff0c;传统的野生动物观察方法往往耗时耗力、成本高昂且范围有限。无人机的出现为野生动物监测提供了有前景的替代方案&#xff0c;能够实现大范围覆盖并远程采集数据。尽管具备这些优势&#xf…...

编程新知 2025/10/28 23:33:33

Scrapy-Redis分布式爬虫架构的可扩展性与容错性增强：基于微服务与容器化的解决方案

在大数据时代&#xff0c;海量数据的采集与处理成为企业和研究机构获取信息的关键环节。Scrapy-Redis作为一种经典的分布式爬虫架构&#xff0c;在处理大规模数据抓取任务时展现出强大的能力。然而&#xff0c;随着业务规模的不断扩大和数据抓取需求的日益复杂&#xff0c;传统…...

编程新知 2025/10/28 15:58:29