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

VUE笔记

news 2025/9/14 23:02: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

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2025/9/13 15:40:26

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/7/6 21:38:30

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

编程新知 2025/8/21 21:33:01

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

编程新知 2025/9/11 4:52:26

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

编程新知 2025/8/30 23:51:46

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

编程新知 2025/9/13 8:59:33

HarmonyOS运动开发：如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

编程新知 2025/9/3 13:28:25

VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

编程新知 2025/9/2 18:36:21

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2025/9/3 19:49:50

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

编程新知 2025/9/3 20:57:36