vue简述
vue为渐进式框架：vmmv
1.易用
有html、css、javascript基础，即可学习vue框架
2.高效、开发前端页面 非常高效
1.vue的体积小、压缩完只需要20k的大小
2.超快的虚拟dom操作js中非常多的dom操作，vue设计虚拟dom非常快
3.设计时vue底层深度优化
3.灵活、开发灵活、多样性
vue的入门开发 ：
1.下载vue.js并引用
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
vue对象的基础认识：
vue语法极其严格：
空格、标点符号、语法不正确、极小的语法错误都会导致viem视图无法显示
<body>
<div id="#app">
{{msg}} //vue中mvvm的数据形参写法
</div>
</body>
<script>
const app = new Vue({
el:"#app", //element 用来给Vue实例定义一个作用范围，可操作id为app标签内的内容
data:{ //用来给Vue实例定义一些相关数据
msg:"百知欢迎你,期待你的加入!",
username:"hello Vue!",
pwd :"12345"}
});
</script>
vue中各对象获取参数的写法：
<body>
<div id="app">//对象数据
<h4>{{user.id}}--{{user.name}}--{{user.age}}--{{user.sex}}--{{user.salary}}</h4>
<h4>//数组数据
{{hobbies[0]}}--{{hobbies[1]}}--{{hobbies[2]}}--{{hobbies[3]}}--{{hobbies[4]}}
</h4>
<h4>//集合对象
{{users[0].id}}--{{users[0].name}}--{{users[0].age}}--
{{users[0].sex}}-- {{users[0].salary}}
</h4>
<h4>
{{users[1].id}}--{{users[1].name}}--{{users[1].age}}--
{{users[1].sex}}-- {{users[1].salary}}
</h4>
<h4>
{{users[2].id}}--{{users[2].name}}--{{users[2].age}}--
{{users[2].sex}}-- {{users[2].salary}}
</h4>
</div>
</body>
</html><script>
//创建vue实例
new Vue({
el:"#app",
data:{
user:{id:1,name:"cpx",age:20,sex:true,salary:2000.0},
hobbies:["吃饭","喝水","睡觉","游山","玩水"],
users:[
{id:1,name:"cpx",age:20,sex:true,salary:2000.0},
{id:2,name:"zhang3",age:22,sex:false,salary:3000.0},
{id:3,name:"li4",age:23,sex:true,salary:4000.0},
]
}
})
</script>
v-text和v-html的使用和区别
<div id="#app">
//获取vue对象中key为msg的value
<h3>{{msg}}</h3>
//在标签内获取vue对象中key为msg的value值，直接获取内部文本信息
<h4 v-text="msg"></h4>
//在标签内获取vue对象中key为content的value值，但是如果值中有html标签则可以解析html标签中的信息，输出其中的样式和内容
<h4 v-text="content"></h4>
</div>
vue中的绑定事件
事件的三要素：事件源、事件、监听器
1.事件源：发生特定动作的html
2.事件：发生特定动作 单击事件、双击事件、鼠标移出移入等
3.监听器：当标签上发生特定事件时处理的程序一般在js中称为事件处理函数
vue中绑定事件基本语法,事件处理函数的写法
<div id="app">
//js中事件的写法为：οnclick="method()"，vue中双向绑定的写法为：v-on:事件 名 ="function()"，可省略为@事件名v-on:click="clickMethod"等同于@click="clickMethod",且如果方法没有形参列表，可省略扩号
<button v-on:click="clickMethod"></button>
</div>
<script>
const app = new Vue({
el:"#app", //element 用来给Vue实例定义一个作用范围，可操作id为app标签内的内容
data:{ //用来给Vue实例定义一些相关数据
msg:"百知欢迎你,期待你的加入!",
username:"hello Vue!",
pwd :"12345",
content:"<h4 stely='color:red'>内容</h4>"
}，
methods:{
"clickMethod":{ //在methods中定义事件所需要的方法
}
});
</script>
this的使用
<div id="app">
<h4> {{msg}}</h4>
<button @click="clickMethod">单击事件</button>
<button @dbclick="dbclickMethod("名字想好了")">双击事件</button>
</div>
<script>
const app = new Vue({
el:"#app", //element 用来给Vue实例定义一个作用范围，可操作id为app标签内的内容
data:{ //用来给Vue实例定义一些相关数据
msg:"百知欢迎你,期待你的加入!"，
username:"名字没想好"
}，
methods:{
clickMethod(username){ //在methods中定义事件所需要的方法
this.msg="改变后的数据"；//通过this可调用data中双向绑定的数据
this.username=username;
},
dbclickMethod(username){ //通过this可调用methods中的方法
this.clickMethod(username);
}
}
});
</script>
v-show和v-if、v-bind的使用
v-show 底层通过先创建此标签然后控制标签css样式的display属性实现页面原始展示或隐藏
v-if 底层通过控制dom树的元素节点实现（增删改查操作）页面元素展示或隐藏
v-show和v-if的选择：
v-show：有更高的初始渲染，通过css样式的display实现隐藏，需要频繁切换，则使用
v-if：有更高的切换消耗，通过删除、添加dom元素，运行时条件很少改变，则使用v-if
v-bind可操作标签中的css样式属性，例：
//v-bind
<img v-bind:width="width" v-bind:height="height" v-bind:src="src" @mouseover="changeImage1" @mouseout="changeImage2"/>
'<script>
//创建vue实例
let app = new Vue({
el:"#app", //用来指定vue实例的作用范围
data:{//用来给vue实例绑定数据
msg:"hello ", //虽然还是写死的路径 但是根据双向绑定的原理 将来通过修改属性的值改变图片路径
src:"images/1.jpg",
width:170,
height:200
}
})
v-for的使用
v-for遍历对象:
<标签名 v-for="(value,key,index) in vue实例的data属性中的哪个变量"></标签名>
<span v-for="(value,key,index) in user">
{{index}}--{{key}}--{{value}}<br/>
</span>
v-for遍历数组:
标签名 v-for="(item,index) in vue实例的data属性中的哪个变量">
<ul>
<li v-for="(item,index) in hobbies">{{index+1}}-{{item}}</li>
</ul>
v-for遍历集合:
标签名 v-for="(item,index) in vue实例的data属性中的哪个变量">
<table border="1px" cellspacing="0" width="100%">
<tr align="center">
<td>序号</td>
<td>编号</td>
<td>名字</td>
<td>年龄</td>
<td>工资</td>
<td>操作</td>
</tr>
//集合对象的遍历需要:key便于vue内部做重用和排序
<tr v-for="(user,index) in users" :key="user.id" align="center">
<td>{{index+1}}</td>
<td>{{user.id}} </td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.salary}}</td>
<td><a href="">删除</a>|<a href="">修改</a></td>
</tr>
</table>
相关文章：
vue简述
vue为渐进式框架：vmmv 1.易用 有html、css、javascript基础，即可学习vue框架 2.高效、开发前端页面 非常高效 1.vue的体积小、压缩完只需要20k的大小 2.超快的虚拟dom操作js中非常多的dom操作，vue设计虚拟dom非常快 3.设计时vue底层深度优化 …...
YOLOv8 训练自己的分割数据集
之前写过一篇 使用YOLOv8训练自己的【目标检测】数据集-【收集数据集】-【标注数据集】-【划分数据集】-【配置训练环境】-【训练模型】-【评估模型】-【导出模型】，里面带大家整个流程走过一遍了， 这篇文章我们来介绍如何使用 YOLOv8 训练分割数据集&a…...
Python实现DDos攻击实例详解
文章目录 SYN 泛洪攻击Scapy3k 基本用法代码实现DDos 实现思路argparse 模块socket 模块代码实现Client 端程序测试后记关于Python技术储备一、Python所有方向的学习路线二、Python基础学习视频三、精品Python学习书籍四、Python工具包项目源码合集①Python工具包②Python实战案…...
微信小程序实现【点击 滑动 评分 评星（5星）】功能
wxml文件： <view class"wxpl_xing"><view class"manyidu">{{scoreContent}}</view><view><block wx:for{{scoreArray}} wx:for-item"item"><view classstarLen bindtapchangeScore data-sy"{{…...
堡垒机的用途
堡垒机的用途 堡垒机，即在一个特定的网络环境下，为了保障网络和数据不受来自外部和内部用户的入侵和破坏，而运用各种技术手段监控和记录运维人员对网络内的服务器、网络设备、安全设备、数据库等设备的操作行为，以便集中报警、及时…...
超全超实用行业解决方案合集，覆盖十大行业数据应用需求
现代企业面对复杂的业务需求，对数据分析的需求日益增加。 从实时销售到市场趋势，从客户行为到产品优化，每个环节都依赖于数据支持。然而，传统的数据分析平台常分散在不同系统和团队中，形成数据孤岛，降低了…...
一盏茶的时间，入门 Node.js
一、.什么是 Node.js？ Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，用于构建高性能、可伸缩的网络应用。 它采用事件驱动、非阻塞 I/O 模型，使其在处理并发请求时表现出色。 二、安装 Node.js 首先，让我们从 Node.…...
关于Java多线程的一些随笔
Synchronized与ReentrantLock有哪些相同点和不同点？ 在Java中，synchronized关键字和ReentrantLock类都用于管理线程间的同步，但它们在实现方式、功能和灵活性方面存在一些差异。以下是它们的相同点和不同点： 相同点 互斥性&…...
Answering difficult questions in other way
I’m not (too) sure Q：Do you think computers make life easier？ A：I’m not (too) sure, to be honest, but I reckon they do make life easier because… I can’t say for sure, but … Q：Do you think computers make lif…...
RabbitMQ教程：Linux下安装、基本命令与Spring Boot集成
RabbitMQ教程：Linux下安装、基本命令与Spring Boot集成 1. RabbitMQ简介 RabbitMQ是一个开源的消息代理和队列服务器，用于通过轻量级消息传递协议（AMQP）在分布式系统中传递消息。它支持多种编程语言，包括Java、Pytho…...
王者荣耀小游戏
第一步是创建项目 项目名自拟 第二部创建个包名 来规范class 然后是创建类 GameFrame 运行类 package com.sxt; package com.sxt;import java.awt.Graphics; import java.awt.Image; import java.awt.Toolkit; import java.awt.event.ActionEvent; import java.awt.event.…...
JAVA小游戏“简易版王者荣耀”
第一步是创建项目 项目名自拟 第二部创建个包名 来规范class 然后是创建类 GameFrame 运行类 package com.sxt;import java.awt.Graphics; import java.awt.Image; import java.awt.Toolkit; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; im…...
Nginx高级
Nginx高级 第一部分：扩容 通过扩容提升整体吞吐量 1.单机垂直扩容：硬件资源增加 云服务资源增加 整机：IBM、浪潮、DELL、HP等 CPU/主板：更新到主流 网卡：10G/40G网卡 磁盘：SAS(SCSI) HDD（机械…...
深度学习中小知识点系列(三) 解读Mosaic 数据增强
前言 Mosaic数据增强，这种数据增强方式简单来说就是把4张图片，通过随机缩放、随机裁减、随机排布的方式进行拼接。Mosaic有如下优点： （1）丰富数据集：随机使用4张图片，随机缩放，再随…...
telnet-MISC-bugku-解题步骤
——CTF解题专栏—— 题目信息： 题目：这是一张单纯的图片 作者：未知 提示：无 解题附件： 解题思路： (⊙﹏⊙)这是个什么文件pcap文件分析_pcap文件打开-CSDN博客查了一下，但没看懂，…...
大数据Doris（二十九）：数据导入（Insert Into）
文章目录 数据导入（Insert Into） 一、创建导入...
jmeter测试dubbo接口
本文讲解jmeter测试dubbo接口的实现方式，文章以一个dubbo的接口为例子进行讲解，该dubbo接口实现的功能为： 一：首先我们看服务端代码 代码架构为： 1：新建一个maven工程，pom文件为： 1…...
分类预测 | Matlab实现基于DBN-SVM深度置信网络-支持向量机的数据分类预测
分类预测 | Matlab实现基于DBN-SVM深度置信网络-支持向量机的数据分类预测 目录 分类预测 | Matlab实现基于DBN-SVM深度置信网络-支持向量机的数据分类预测分类效果基本描述程序设计参考资料 分类效果 基本描述 1.利用DBN进行特征提取，将提取后的特征放入SVM进行分类…...
android系统新特性——用户界面以及系统界面改进
用户界面改进 Android用户界面改进最明显的就是MD了。MD是Google于2014年推出的设计语言，它是一套完整的设计系统，包含了动画、样式、布局、组件等一系列与设计有关的元素。通过对这些行为的描述，让开发者设计出更符合目标的软件，…...
电量计驱动代码
外部电量计驱动代码，直接上代码了，懒，不做细节分析。。。。。 /** Fuelgauge battery driver** This package is free software; you can redistribute it and/or modify* it under the terms of the GNU General Public License version 2 as* published by the Free Soft…...
23-Oracle 23 ai 区块链表（Blockchain Table）
小伙伴有没有在金融强合规的领域中遇见，必须要保持数据不可变，管理员都无法修改和留痕的要求。比如医疗的电子病历中，影像检查检验结果不可篡改行的，药品追溯过程中数据只可插入无法删除的特性需求；登录日志、修改日志…...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指：像函数调用/返回一样轻量地完成任务切换。 举例说明： 当你在程序中写一个函数调用： funcA() 然后 funcA 执行完后返回&…...
Linux相关概念和易错知识点（42）（TCP的连接管理、可靠性、面临复杂网络的处理）
目录 1.TCP的连接管理机制（1）三次握手①握手过程②对握手过程的理解 （2）四次挥手（3）握手和挥手的触发（4）状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...
苍穹外卖--缓存菜品
1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得，如果用户端访问量比较大，数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据，减少数据库查询操作。 缓存逻辑分析： ①每个分类下的菜品保持一份缓存数据…...
CMake 从 GitHub 下载第三方库并使用
有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库，例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体，比如 SnowballFight、Huggy the Do…...
深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南
🚀 C extern 关键字深度解析：跨文件编程的终极指南 📅 更新时间：2025年6月5日 🏷️ 标签：C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言🔥一、extern 是什么？&…...
Map相关知识
数据结构 二叉树 二叉树，顾名思义，每个节点最多有两个“叉”，也就是两个子节点，分别是左子 节点和右子节点。不过，二叉树并不要求每个节点都有两个子节点，有的节点只 有左子节点，有的节点只有…...
【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习
禁止商业或二改转载，仅供自学使用，侵权必究，如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...
技术栈RabbitMq的介绍和使用
目录 1. 什么是消息队列？2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...