Vue基本知识
一、vue入门
Vue为前端的框架，免除了原生js的DOM操作。简化书写。
基于MVVM的思想，实现数据的双向绑定，使编程的重点放在数据上。
1、引入vue.js文件
2、定义vue核心对象，定义数据模型
3、编写视图
//1、引入vue.js
<script src="vue.js"></script>//2、定义vue核心对象
<script>//定义vue对象new Vue({el:"#app",//vue接管的区域data:{message:"Hello Vue"}})
</script>//定义视图
<!-- 定义视图 --><div id="app"><!-- v-model为绑定数据 --><input type="text" name="" id="" v-model="message">{{message}}</div>其中{{message}}为插值表达式
形式：{{表达式}} 内容可以为变量、函数调用、三元运算符
input中v-model为绑定数据，当input输入的值发生变化时，vue对象中的message也随之发生变化从而体现了vue的双向绑定性。
v-model为指令。
二、vue指令
指令：html标签上带有v-的特殊属性
- v-mind为html标签绑定属性值，如href，css
- v-model在表单元素上进行双向数据绑定
- v-on为html标签绑定事件
- v-if ，v-else-if，v-else条件性的渲染某元素
- v-for遍历容器
- v-show通过条件来确定是否展示该元素
1、v-mind
为html标签动态的绑定一个属性值，当vue的数据模型的值发生变化时，其所绑定的属性值也发生变化
<div id="app"><!-- v-bind动态绑定 --><!-- url的值将会动态的绑定vue对象中的数据模型data --><a v-bind:href="URL">链接1</a><a :href="URL">链接2</a><input type="text" v-model="URL"></div><script>//定义vue对象new Vue({el:"#app",//vue接管的区域data:{URL:"https://www.baidu.com"},})</script>2、v-model
在表单上进行双向数据绑定
3、v-on
为html标签绑定事件，其数据模型要改为以下形式
new Vue({el:"#app",//vue接管的区域data:{},methods:{handle:function(){alert("你点了我一下...");} }})调用方式：
<input type="button" name="" id="" value="点击" v-on:click="handle()">4、v-if v-else-if v-else
当条件为真时渲染标签，若为假则不渲染
5、v-show
根据条件展示某元素，但都进行了渲染，只不过使用display对展示进行了控制
实例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="vue.js"></script></head><body> <!-- 定义视图 --><div id="app">年龄<input type="text" name="" id="" v-model="age">经判定为:<span v-if="age<=35">年轻人(35以下)</span><span v-else-if="age>35 && age<60">中年人(35-60)</span><span v-else>老年人(60以上)</span><br><br>年龄<input type="text" name="" id="" v-model="age">经判定为:<span v-show="age<=35">年轻人(35以下)</span><span v-show="age>35 && age<60">中年人(35-60)</span><span v-show="age>60">老年人(60以上)</span><br><br></div></body><script>//定义vue对象new Vue({el:"#app",//vue接管的区域data:{age:20},methods:{}})</script>
</html>v-if与v-show在展示时的区别：
v-show去对span标签全部进行了渲染，只不过在显示的时候使用display进行控制，值为none不进行显示，而v-if只对条件满足的标签进行渲染。
6、v-for
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="vue.js"></script></head><body><!-- 定义视图 --><div id="app"><div v-for="addr in addrs">{{addr}}</div><hr><div v-for="(addr,index) in addrs">{{index+1}:{{addr}}</div></div></body><script>//定义vue对象new Vue({el: "#app", //vue接管的区域data: {addrs: ['北京', '上海', '广州', '深圳', '成都']}})</script>
</html> 
案例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="vue.js"></script></head><body><!-- 定义视图 --><div id="app"><table border="1" cellspacing="0" width="60%"><tr><th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>成绩</th><th>等级</th></tr><tr align="center" v-for="(user,index) in users"><td>{{index+1}}</td><td>{{user.name}}</td><td>{{user.age}}</td><td><span v-if="user.gender==1">男</span><span v-if="user.gender==2">女</span></td><td>{{user.scorce}}</td><td><span v-if="user.scorce>=85">优秀</span><span v-else-if="user.scorce>=60">及格</span><span style="color: red;" v-else>不及格</span></td></tr></table></div></body><script>//定义vue对象new Vue({el: "#app", //vue接管的区域data: {users: [{name: "Tom",age: 20,gender: 1,scorce: 78},{name: "Rose",age: 18,gender: 2,scorce: 86},{name: "Jerry",age: 26,gender: 1,scorce: 90},{name: "Tony",age: 30,gender: 1,scorce: 52}]}})</script>
</html>
三、vue的生命周期
生命周期：一个对象从创建到销毁的整个过程。
mounted：挂载完成，vue初始化成功，html页面渲染成功(发送请求到服务端，加载数据)
相关文章：
Vue基本知识
一、vue入门 Vue为前端的框架，免除了原生js的DOM操作。简化书写。 基于MVVM的思想，实现数据的双向绑定，使编程的重点放在数据上。 1、引入vue.js文件 2、定义vue核心对象，定义数据模型 3、编写视图 //1、引入vue.js <scr…...
item_get_sales-获取商品销量详情
一、接口参数说明： item_get_sales-获取商品销量详情，点击更多API调试，请移步注册API账号点击获取测试key和secret 公共参数 请求地址: https://api-gw.onebound.cn/taobao/item_get_sales 名称类型必须描述keyString是调用key（…...
LangChain手记 Memory
整理并翻译自DeepLearning.AILangChain的官方课程：Memory Memory 使用open ai的API调用GPT都是单次调用，所以模型并不记得之前的对话，多轮对话的实现其实是将前面轮次的对话过程保留，在下次对话时作为输入的message数组的一部分&…...
linux下安装.run后缀名文件
1.文件传输 对于大文件，不能直接拖拽，可以借助工具，例如WinSCP 创建会话时，需要提供虚拟机的主机名，可以采取输入ifconfig的命令，如图所示： ifconfig（接口配置）命令在 …...
Angular 性能优化实战
Angular 性能优化实战 Angular 是一个非常强大的前端框架，但是如果不注意性能优化，应用程序可能会变得非常慢并增加加载时间。 以下是一些Angular性能优化经验的实战建议： 1. 使用 OnPush 变更检测策略 默认情况下，Angular检查…...
在vue项目使用数据可视化 echarts ，柱状图、折线图、饼状图使用示例详解及属性详解
官网地址：Apache ECharts 一、下载插件并在页面中引入 npm install echarts --save 页面导入： import * as echarts from echarts 全局导入： main.js 中，导入并注册到全局 import echarts from echarts Vue.prototype.$echart…...
九耶丨阁瑞钛伦特-井字棋html5代码
你想了解关于井字棋（Tic-Tac-Toe）的HTML代码吗？以下是一个简单的井子棋的HTML代码示例： <!DOCTYPE html> <html> <head><title>Tic-Tac-Toe</title><style>.board {display: flex;flex-wrap…...
Linux服务器上配置HTTP和HTTPS代理
本文将向你分享如何在Linux服务器上配置HTTP和HTTPS代理的方法，解决可能遇到的问题，让你的爬虫项目顺利运行，畅爬互联网！ 配置HTTP代理的步骤 1. 了解HTTP代理的类型：常见的有正向代理和反向代理两种类型。根据实际需求…...
OpenZFS 2.2 发布 RC3，支持 Linux 6.4
导读之前的 OpenZFS 2.2 候选版本已致力于实现与 Linux 6.4 内核的兼容性，而在 2.2-rc3 中，Linux 6.4 支持的元跟踪器已标记为已完成。 OpenZFS 2.2 发布了第 3 个 RC 版本。 之前的 OpenZFS 2.2 候选版本已致力于实现与 Linux 6.4 内核的兼容性&#x…...
嵌入式 C 语言程序数据基本存储结构
一、5大内存分区 内存分成5个区，它们分别是堆、栈、自由存储区、全局/静态存储区和常量存储区。 1、栈区(stack)：FIFO就是那些由编译器在需要的时候分配，在不需要的时候自动清除的变量的存储区。里面的变量通常是局部变量、函数参数等。 …...
记录VS2022离线安装NuGet包的过程
离线安装NuGet包主要分为两个阶段：指定安装源及下载包及其依赖项。本文记录在VS2022中离线安装NuGet包的过程及注意事项。 离线安装NuGet包，主要有两种方式：1）搭建局域网或本机NuGet服务器，将VS2022的源指定为NuGe…...
tomcat的多实例和动静分离
目录 多实例 安装tomcat 配置 tomcat 环境变量 修改server.xml文件 修改开关文件，添加环境变量 tomcat1 tomcat2 启动 浏览器访问测试 nginxtomcat实现动静分离 Nginx实现负载均衡的原理 部署nginx的负载器 搭建第三台tomcat 配置多实例服务器 Tomcat…...
点成案例丨比浊仪用于乳酸菌抑菌活性测定
乳酸菌概述 自1929年英国科学家弗莱明发现青霉素以来，抗生素为人类医学的进步做出了巨大贡献。然而，抗生素在临床上广泛且持续的使用导致病原微生物产生了耐药性。目前，病原微生物对抗生素的耐药性正在威胁人们的健康，寻找具有抑…...
总结synchronized
一.synchronized的特性 synchronized 是 Java 语言中内置的关键字，用于实现线程同步，以确保多线程环境下共享资源的安全访问。 互斥性：synchronized保证了同一时刻只有一个线程可以执行被synchronized修饰的代码块或方法。当一个线程进入sync…...
react实现模拟弹框遮罩的自定义hook
需求描述 点击按钮用于检测鼠标是否命中按钮 代码实现 import React from react; import {useState, useEffect, useRef} from react;// 封装一个hook用来检测当前点击事件是否在某个元素之外 function useClickOutSide(ref,cb) {useEffect(()>{const handleClickOutside…...
直接在html中引入Vue.js的cdn来实现一个简单的博客
摘要 其实建立一个博客系统是非常简单的，有很多开源的程序，如果你不喜欢博客系统，也可以自己开发，也可以自己简单做一个。我这次就是用Vue.js和php做后端服务实现一个简单的博客。 界面 代码结构 代码 index.html <!DOCTYP…...
Android Studio瀑布流实现
效果： ImageDetail class package com.example.waterfallflow; import android.app.Activity; import android.content.Intent; import android.os.Bundle; import android.widget.ImageView;public class ImageDetail extends Activity{Overrideprotected void …...
Java 中的 == 运算符、equals 方法和 hashcode 方法
一、 运算符 是 Java 中的一个运算符，用于比较两个对象，但在比较两个对象的时候需要根据比较类型分情况进行讨论。 1.1 基本数据类型与基本数据类型 基本数据类型之间通过 进行比较的时候，是直接比较它们的大小，而与它们的具体…...
第一个ArkTS项目实践-鸿蒙ArkTS
第一个ArkTS项目实践-ArkTS 第一个ArkTS项目实践-ArkTS自定义组件的组成配置属性与布局配置属性布局 改变组件状态循环渲染列表数据代码ToDoItem组件ToDoList页面 效果参考资料 第一个ArkTS项目实践-ArkTS 本篇文章是官网上视频对ArkTS开发实践的第一个视频，主要是引…...
【数据结构•堆】序列和的前n小元素（堆排序）
题目描述 问题：序列和的前 n n n小元素 给出两个长度为 n n n的有序表 A A A和 B B B, 在A和B中各任取一个, 可以得到 n 2 n^2 n2 个和. 求这些和最小的 n n n个。 输入输出格式 输入格式： 输入数据共三行。 第一行，一个整数值 n n …...
基于算法竞赛的c++编程（28）结构体的进阶应用
结构体的嵌套与复杂数据组织 在C中，结构体可以嵌套使用，形成更复杂的数据结构。例如，可以通过嵌套结构体描述多层级数据关系： struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...
Lombok 的 @Data 注解失效，未生成 getter/setter 方法引发的HTTP 406 错误
HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误，它们的含义、原因和解决方法都有显著区别。以下是详细对比： 1. HTTP 406 (Not Acceptable) 含义： 客户端请求的内容类型与服务器支持的内容类型不匹…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来，Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
在四层代理中还原真实客户端ngx_stream_realip_module
一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡（如 HAProxy、AWS NLB、阿里 SLB）发起上游连接时，将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后，ngx_stream_realip_module 从中提取原始信息…...
生成 Git SSH 证书
🔑 1. 生成 SSH 密钥对 在终端（Windows 使用 Git Bash，Mac/Linux 使用 Terminal）执行命令： ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 参数说明： -t rsa&#x…...
Redis数据倾斜问题解决
Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中，部分节点存储的数据量或访问量远高于其他节点，导致这些节点负载过高，影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...
Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...
Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）
在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马（服务器方面的）的原理，连接，以及各种木马及连接工具的分享 文件木马：https://w…...
【生成模型】视频生成论文调研
工作清单 上游应用方向：控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...
QT3D学习笔记——圆台、圆锥
类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体（对象或容器）QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质（定义颜色、反光等）QFirstPersonC…...