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

JavaEE学习笔记 2024-1-25 --VUE的入门使用

news 2026/2/9 22:23:20

« 上一篇

个人整理非商业用途，欢迎探讨与指正！！

文章目录

    • 14.VUE基础
      • 14.1VUE的入门使用
      • 14.2条件判断
      • 14.3循环渲染
      • 14.4v-bind绑定标签属性
      • 14.5v-model表单标签的双向绑定
      • 14.6事件处理
      • 14.7axios

14.VUE基础

前端框架
UI框架:页面渲染Bootstrap,Layui...
JS框架:数据渲染JQuery,React,angular,node.js,vue...

14.1VUE的入门使用

引入方式:1.引入vue文件2.使用脚手架

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="app"><!-- 使用vue中的绑定的数据 -->{{hello}}{{emp}}---{{emp.employeeid}}--{{emp.age}}</div><!-- 引入vue.js --><script src="js/vue.js"></script><script>// 创建vue对象let vue = new Vue({// 将vue绑定在指定的盒子上el:'#app',// 使用vue绑定的数据data:{// 以键值对的形式存在hello:"hello vue",emp:{"employeeid":1,"employeename":"tom","age":19}}});</script></body>
</html>

14.2条件判断

<body><div id="app"><span v-if="gender == 0">男</span><span v-else>女</span></div><script src="js/vue.js"></script><script>new Vue({el:"#app",data:{gender:0}});</script>
</body>

14.3循环渲染

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="app">{{list}} <br>{{list[0]}} <br>{{list[1]}} <br>{{list[2]}} <br><h2>信息</h2><ul><!-- u是负责输出的对象 i是下标 --><li v-for="(u,i) in list">{{u}}--{{i}}--{{u.name}}--{{u.age}}</li></ul></div><script src="js/vue.js"></script><script>new Vue({el:"#app",data:{list:[{"id":1,"name":"zs","age":19},{"id":2,"name":"ls","age":19},{"id":3,"name":"ww","age":19},]}});</script></body>
</html>

14.4v-bind绑定标签属性

v-bind:属性 简写为:属性

<body><div id="app"><!-- 当前的input标签绑定hello的值 --><input type="text" v-bind:value="hello"><input type="text" :value="str"><img v-bind:src="img" alt=""><img :src="img" alt=""></div><!-- 引入vue.js --><script src="js/vue.js"></script><script>// 创建vue对象let vue = new Vue({// 将vue绑定在指定的盒子上el:'#app',// 使用vue绑定的数据data:{// 以键值对的形式存在hello:"hello vue",str:"你好",img:"img/3.jpg"}});</script>
</body>

14.5v-model表单标签的双向绑定

全写v-model:value 

<body><div id="app">{{str}} 	<br><input type="text" v-model:value="str"><br><input type="text" v-model="str"><br><!-- 单向绑定 --><input type="text" :value="str"><br></div><!-- 引入vue.js --><script src="js/vue.js"></script><script>// 创建vue对象let vue = new Vue({// 将vue绑定在指定的盒子上el:'#app',// 使用vue绑定的数据data:{str:"大佐和大佑123"}});</script>
</body>

14.6事件处理

v-on:事件
简写为
@事件

<body><div id="app"><input type="button" value="添加" v-on:click="insert"><input type="button" value="添加" v-on:click="insert()"><input type="button" value="删除" @click="del"><input type="button" value="修改" @click="update(1,2)"><input type="text" @blur="check"></div><script src="js/vue.js"></script><script>new Vue({el:'#app',data:{},methods:{// 定义方法insert:function(){alert('添加');},// es6写法del(){alert('删除');},update(a,b){alert(a+b);},check(){alert("用户名不可用")}}});</script>
</body>

14.7axios

帮助VUE进行通讯的
VUE本身是不能通讯的,通常需要配合axios进行通讯(封装好的ajax)
getaxios.get(url).then(fn)axios.get(url,{参数}).then(fn)
post:目前不建议使用,post请求会将参数以json的形式发送,目前的技术手段处理起来很麻烦axios.get(url,{参数}).then(fn)

相关文章：

JavaEE学习笔记 2024-1-25 --VUE的入门使用

上一篇 个人整理非商业用途&#xff0c;欢迎探讨与指正&#xff01;&#xff01; 文章目录 14.VUE基础14.1VUE的入门使用14.2条件判断14.3循环渲染14.4v-bind绑定标签属性14.5v-model表单标签的双向绑定14.6事件处理14.7axios 14.VUE基础 前端框架 UI框架:页面渲染Bootstrap,L…...

编程日记 2024/1/31 8:12:49

php-fpm详细讲解

PHP-FPM&#xff08;FastCGI Process Manager&#xff09;是PHP的一种运行模式&#xff0c;用于处理动态HTTP请求。 它与传统的模块式PHP&#xff08;如Apache模块&#xff09;相比&#xff0c;将PHP解析和执行过程单独封装为一个独立的进程池&#xff0c;通过FastCGI协议与We…...

编程日记 2024/1/31 8:08:46

小白水平理解面试经典题目LeetCode 455 Assign Cookies【Java实现】

455 分配cookies 小白渣翻译&#xff1a; 假设你是一位很棒的父母&#xff0c;想给你的孩子一些饼干。但是&#xff0c;你最多应该给每个孩子一块饼干。 每个孩子 i 都有一个贪婪因子 g[i] &#xff0c;这是孩子满意的 cookie 的最小大小&#xff1b;每个 cookie j 都有一个…...

编程日记 2024/1/31 8:06:44

uniapp 问题汇总-问题数(2)

ios scroll-view无法滚动 使用uview折叠面板嵌套scroll-view 嵌套之后安卓可以滚动&#xff0c;ios无法滚动 <u-collapse accordion opencollapseOpen changecollapseChange ref"uCollapse" :valueuCollapseValue><u-collapse-item :nameindex :title&quo…...

编程日记 2024/1/31 8:03:41

[AG32VF407]国产MCU+FPGA Verilog编写控制2路gpio输出不同频率方波实验

视频讲解 [AG32VF407]国产MCUFPGA Verilog编写控制2路gpio输出不同频率方波实验 实验过程 根据原理图&#xff0c;选择两个pin脚作为输出 修改VE文件&#xff0c;clk选择PIN_OSC&#xff0c;使用内部晶振8Mhz&#xff0c;gpio使用PIN_51和52&#xff0c;pinout是数组 添加pll…...

编程日记 2024/1/31 8:01:39

python coding with ChatGPT 打卡第15天| 二叉树：翻转二叉树、对称二叉树

相关推荐 python coding with ChatGPT 打卡第12天| 二叉树&#xff1a;理论基础 python coding with ChatGPT 打卡第13天| 二叉树的深度优先遍历 python coding with ChatGPT 打卡第14天| 二叉树的广度优先遍历 文章目录 翻转二叉树Key Points相关题目视频讲解重点分析递归遍历…...

编程日记 2024/1/31 7:59:36

Python（19）Excel表格操作Ⅰ

目录 导包 读取EXCEL文件 1、获取worksheet名称 2、设定当前工作表 3、输出目标单元格数据 4、工作表.rows&#xff08;行&#xff09; 5、工作表.columns&#xff08;列&#xff09; 小结 导包 要想使用 python 操作 Excel 文件&#xff0c;应当导入 openpyxl 包。在…...

编程日记 2024/1/31 7:57:34

HiveSQL题——聚合函数(sum/count/max/min/avg)

目录 一、窗口函数的知识点 1.1 窗户函数的定义 1.2 窗户函数的语法 1.3 窗口函数分类 聚合函数 排序函数 前后函数 头尾函数 1.4 聚合函数 二、实际案例 2.1 每个用户累积访问次数 0 问题描述 1 数据准备 2 数据分析 3 小结 2.2 各直播间最大的同时在线人数 …...

编程日记 2024/1/31 7:51:29

计算机是什么做的

背景 虽然我是科班出身的&#xff0c;但是上大学时候&#xff0c;对这些内容并不感兴趣&#xff0c;只是简单的进行做题&#xff0c;考试而已。并没有思考&#xff0c;为啥学计算机组成原理&#xff0c;模电数电&#xff0c;微机原理&#xff0c;单片机&#xff0c;操作系统啥…...

编程日记 2024/1/31 7:49:27

C++多线程1(复习向笔记)

创建线程以及相关函数 当用thread类创建线程对象绑定函数后&#xff0c;该线程在主线程执行时就已经自动开始执行了,join起到阻塞主线程的作用 #include <iostream> #include <thread> #include <string> using namespace std; //测试函数 void printStrin…...

编程日记 2024/1/31 7:48:26

代理IP在游戏中的作用有哪些？

游戏代理IP的作用是什么&#xff1f;IP代理软件相当于连接客户端和虚拟服务器的软件“中转站”&#xff0c;在我们向远程服务器提出需求后&#xff0c;代理服务器首先获得用户的请求&#xff0c;然后将服务请求转移到远程服务器&#xff0c;然后将远程服务器反馈的结果转移到客…...

编程日记 2024/1/31 7:46:24

SVN Previous operation has not finished； run ‘cleanup‘ if it was interrupted

SVN cleanup出现下面的提示&#xff1a; svn: E155017: Can’t install ‘*’ from pristine store, because no checksum is recorded for this file svn报错&#xff1a;“Previous operation has not finished; run ‘cleanup’ if it was interrupted“ 解决办法  当遇到…...

编程日记 2024/1/31 7:45:23

MATLAB知识点：MATLAB的文件管理

​讲解视频&#xff1a;可以在bilibili搜索《MATLAB教程新手入门篇——数学建模清风主讲》。​ MATLAB教程新手入门篇&#xff08;数学建模清风主讲&#xff0c;适合零基础同学观看&#xff09;_哔哩哔哩_bilibili 节选自第2章 上一章我们说过&#xff0c;MATLAB是一款非常强…...

编程日记 2024/1/31 7:43:21

【深度学习】MNN ImageProcess处理图像顺序，逻辑，均值，方差

文章目录 介绍Opencv numpy等效的MNN处理 介绍 MNN ImageProcess处理图像是先reisze还是后resize&#xff0c;均值方差怎么处理&#xff0c;是什么通道顺序&#xff1f;这篇文章告诉你答案。 Opencv numpy 这段代码是一个图像预处理函数&#xff0c;用于对输入的图像进行一系…...

编程日记 2024/1/31 7:41:19

代码随想录算法训练营29期Day35|LeetCode 860,406,452

文档讲解&#xff1a;柠檬水找零 根据身高重建队列 用最小数量的箭引爆气球 860.柠檬水找零 题目链接&#xff1a;https://leetcode.cn/problems/lemonade-change/description/ 思路&#xff1a; 很简单&#xff0c;模拟即可。统计五美元、十美元和十五美元的个数。给五美元…...

编程日记 2024/1/31 7:39:17

20240130金融读报1分钟小得01

1、开放银行本质上是以用户需求为核心&#xff0c;以场景服务为切入点的共享平台金融模式&#xff0c;一定程度上加快了商业银行“隐形”和金融服务的无缝和泛在 2、利用自身优势进行差异化竞争&#xff0c;比如农信的客户面对面交流、全方位覆盖、政银紧密合作。针对劣势进行互…...

编程日记 2024/1/31 7:36:13

刷力扣题过程中发现的不熟的函数

C中不熟的函数 1.memset() 头文件&#xff1a;<string.h> void *memset(void *s,int c,unsigned long n); 为指针变量s所指的前n个字节的内存单元填充给定的int型数值c 如&#xff1a; int a[10]; memset(a,0,sizeof(a)); //将数组a中的数全部赋值为02.sort() &#…...

编程日记 2024/1/31 7:34:12

native2ascii命令详解

native2ascii命令详解 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天&#xff0c;我们将深入研究一个在Java开发中常用的命令——native2ascii&#xff0c;解析…...

编程日记 2024/1/31 7:32:10

什么是Vue Vue入门案例

一、什么是Vue 概念&#xff1a;Vue (读音 /vjuː/&#xff0c;类似于 view) 是一套 构建用户界面 的 渐进式 框架 Vue2官网&#xff1a;Vue.js 1.什么是构建用户界面 基于数据渲染出用户可以看到的界面 2.什么是渐进式 所谓渐进式就是循序渐进&#xff0c;不一定非得把V…...

编程日记 2024/1/31 7:30:08

【C/Python】GtkApplicationWindow

一、C语言 GtkApplicationWindow 是 GTK 库中用于创建应用程序主窗口的一个控件。 首先&#xff0c;需要确保环境安装了GTK开发库。然后&#xff0c;以下是一个简单的使用 GtkApplicationWindow 创建一个 GTK 应用程序的示例&#xff1a; #include <gtk/gtk.h>static …...

编程日记 2024/1/31 7:28:05

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2026/2/8 20:41:51

《Qt C++ 与 OpenCV：解锁视频播放程序设计的奥秘》

引言：探索视频播放程序设计之旅 在当今数字化时代，多媒体应用已渗透到我们生活的方方面面，从日常的视频娱乐到专业的视频监控、视频会议系统，视频播放程序作为多媒体应用的核心组成部分，扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上，用户都期望…...

编程新知 2026/2/7 13:17:38

LeetCode - 394. 字符串解码

题目 394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; 思路 使用两个栈&#xff1a;一个存储重复次数&#xff0c;一个存储字符串 遍历输入字符串&#xff1a; 数字处理&#xff1a;遇到数字时&#xff0c;累积计算重复次数左括号处理&#xff1a;保存当前状态&a…...

编程新知 2026/1/25 10:09:59

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

编程新知 2025/12/24 1:45:14

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

编程新知 2025/8/19 2:57:37

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2026/1/29 16:36:27

华为云Flexus+DeepSeek征文｜DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

编程新知 2026/2/2 2:30:58

css3笔记 （1） 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

编程新知 2025/10/11 5:18:43

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/12/25 18:22:43

Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

编程新知 2026/1/25 10:13:29