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

VUE笔记

news 2025/6/18 19:23:48

框架：

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

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

举例：操作页面

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

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

前端框架：

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

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

编程新知 2025/6/17 3:47:36

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

编程新知 2025/6/18 7:56:41

项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

编程新知 2025/6/16 11:24:22

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...

编程新知 2025/6/16 20:31:08

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

编程新知 2025/6/16 10:02:02

多模态图像修复系统：基于深度学习的图片修复实现

多模态图像修复系统：基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型（Stable Diffusion Inpainting）实现图像修复功能，结合文本描述和图片输入，对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...

编程新知 2025/6/16 1:59:27

SpringAI实战：ChatModel智能对话全解

一、引言&#xff1a;Spring AI 与 Chat Model 的核心价值 &#x1f680; 在 Java 生态中集成大模型能力&#xff0c;Spring AI 提供了高效的解决方案 &#x1f916;。其中 Chat Model 作为核心交互组件&#xff0c;通过标准化接口简化了与大语言模型&#xff08;LLM&#xff0…...

编程新知 2025/6/16 21:40:16

jdbc查询mysql数据库时，出现id顺序错误的情况

我在repository中的查询语句如下所示&#xff0c;即传入一个List<intager>的数据&#xff0c;返回这些id的问题列表。但是由于数据库查询时ID列表的顺序与预期不一致&#xff0c;会导致返回的id是从小到大排列的&#xff0c;但我不希望这样。 Query("SELECT NEW com…...

编程新知 2025/6/17 4:55:06

用 Rust 重写 Linux 内核模块实战：迈向安全内核的新篇章

用 Rust 重写 Linux 内核模块实战&#xff1a;迈向安全内核的新篇章 ​​摘要&#xff1a;​​ 操作系统内核的安全性、稳定性至关重要。传统 Linux 内核模块开发长期依赖于 C 语言&#xff0c;受限于 C 语言本身的内存安全和并发安全问题&#xff0c;开发复杂模块极易引入难以…...

编程新知 2025/6/13 19:34:18

Springboot 高校报修与互助平台小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;高校报修与互助平台小程序被用户普遍使用&#xff0c;为…...

编程新知 2025/6/15 12:00:58