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

1、【vue篇】vue框架快速上手

注意事项:

methods必须要加s

  • 导入vue:<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  • 导入Axios:<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

简单Vue程序

<div id="app">{{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>var app =new Vue({el:"#app",data:{message:"hello Vue!"}})
</script>

el : 挂载点

data: 数据,里面也可以放数组,对象等

vue指令

v-text指令的作用:设置标签的内容

v-html指令的作用是:设置元素的innerHTML

<h2 v-text = "message">北京</h2>
<h2>{{ message+"!" }}深圳</h2>
<p v-html="content"></p><script>var app=new Vue({el:"#app",data:{message:"嘿嘿嘿",content:"<a href='https://mp.csdn.net/console/home'>黑马</a>"}})
</script>

 v-on指令基础:点击就触发(单机、双击,按键)

<button @click="sub">点击我</button>
<input type="text" @keyup.enter="sayHi"><script>var app=new Vue({el:"#app",data:{num:1},methods:{sub:function(){console.log("sub");}}})
</script>

v-show、v-if指令:元素的显示与隐藏、v-if操作DOM树开销大

<img v-show="isShow" src="./1.jpg">
<img v-show="age>=18" src="./1.jpg"><p v-if="true">我是一个p标签</p>
<p v-if="isShow">我是一个p标签</p>

v-bind指令:为元素绑定属性、需要动态的增删class建议使用对象的方式

<img :src="imgSrc" :title="imgTitle+'显示'" :class="isActive?'active':''" @click="toggleActive">
<img :src="imgSrc" :title="imgTitle+'显示'" :class="{active:isActive}" @click="toggleActive">

v-for指令:循环

<li v-for="(item,index) in arr" :title="item">{{ index }}{{ item }}
</li>
<li v-for="(item,index) in objArr">{{ item.name }}
</li>

v-model:双向绑定数据

<input type="button" v-model="message" /><script>
var app=new Vue({el:"#app",data:{message:"沙丁鱼"},
</script>

关于HTML标签的使用

# 链接触发javascript
<a href="javascript:;" @click="changeCity('北京')">北京</a># audio使用
<audio v-bind:src="MusicUrl" ref="audio" controls autoplay loop @play="play" @pause="pause"></audio># video使用
<video v-bind:src="MvUrl" controls="controls"></video>

相关文章:

1、【vue篇】vue框架快速上手

注意事项&#xff1a; methods必须要加s 导入vue&#xff1a;<script src"https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>导入Axios:<script src"https://unpkg.com/axios/dist/axios.min.js"></script> 简单Vue程序…...

Unity 编辑器篇|(九)编辑器美化类( GUIStyle、GUISkin、EditorStyles) (全面总结 | 建议收藏)

目录 1. GUIStyle1.1 参数总览1.2 样式代码 2. GUISkin2.1 参数总览2.2 创建自定义Skin 3. EditorStyles2.1 参数总览1.2 反射获取所有EditorStyles 1. GUIStyle GUIStyle是一个用于定制GUI控件样式的类&#xff0c;它包含了控件的外观属性&#xff0c;如字体、颜色、背景等。…...

Spring Boot Starters

Spring Boot Starters 概述 Spring Boot Starters是一系列为特定应用场景预设的依赖管理和自动配置方案。每个Starter都是为了简化特定类型的项目构建和配置。例如&#xff0c;spring-boot-starter-web是为创建基于Spring MVC的Web应用程序而设计的。 Starter的结构 一个典型…...

Qt防止创建窗口抢焦点

问题是&#xff0c;当我在 Qt 中打开一个新窗口时&#xff0c;它会自动窃取前一个应用程序的焦点。 有什么办法可以防止这种情况发生吗&#xff1f; setAttribute(Qt::WA_ShowWithoutActivating);这会强制窗口不激活。即使有Qt::WindowStaysOnTopHint flag 出处&#xff1a; S…...

shared_ptr 与 unique_ptr 的转换 笔记

推荐B站文章&#xff1a; 6.shared_ptr与unique_ptr_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV18B4y187uL?p6&vd_sourcea934d7fc6f47698a29dac90a922ba5a3我的往期文章&#xff1a; 独占指针&#xff1a;unique_ptr 与 函数调用-CSDN博客https://blog.csdn.n…...

python windows和linux 文件同步

在Python中&#xff0c;可以使用paramiko库来实现Windows和Linux之间的文件同步。paramiko是一个用于SSH连接的Python库&#xff0c;可以用于在Windows和Linux之间进行文件传输。 以下是一个简单的示例代码&#xff0c;演示如何使用paramiko库在Windows和Linux之间同步文件&am…...

【数据结构】72变的双端队列

双端队列 前言一、双端队列1.1 双端队列的定义1.2 输入受限的双端队列1.3 输出受限的双端队列1.5 输入输出都受限的双端队列1.6 小结 二、双端队列的使用2.1 双端队列的出队序列——暴力求解2.1.1 栈的出栈序列2.1.2 输入受限的双端队列2.1.3 输出受限的双端队列2.1.4 输入输出…...

kafka为什么不支持读写分离?

kafka为什么不支持读写分离&#xff1f; 在kafka中&#xff0c;生产者写入消息&#xff0c;消费者读取消息的操作都是与 leader 副本进行交互的&#xff0c;从而实现的是一种主写主读的生产消费模型。kafka不支持读写分离&#xff0c;也就是主写从读。 读写分离有以下不足&am…...

arcgis 面要素shp数据处理

面要素是工作中用到最多的&#xff0c;那么面要素是如何形成的呢&#xff0c;主要还是由闭合的线要素转换而成。在面要素数据中常用的有以下几点&#xff1a; 一、 线转面&#xff08;要素转面&#xff09; 通过上一篇得到了点转线的要素&#xff0c;那么根据上节的线要素&am…...

数轴(0 ~ m)上有n个不同点,最多只能移动一个点,移动到[1, m]中任意一点,求最终最小相邻两个点的距离的最大值是什么

题目 思路:先找到相邻距离最小的位置,假设为pos, 那么不是移动第pos个点就是移动第(pos - 1)个点,先移动pos点,用数组vec存除了pos点之外的所有点,求出最小相邻距离和最大相邻距离,那么肯定将pos点插入到最大相邻距离中。 #include <bits/stdc++.h> using namesp…...

BGP路由反射-数据中心IDC项目经验

一、背景描述 R1,R2,R3在AS200区域内&#xff0c;R1和R2,R1和R3建立OSPF&#xff0c;宣告接口互联. AS200区域内&#xff0c;R1和R2建立IBGP, R1和R3建立IBGP R2和R4建立EBGP, R3和R5建立EBGP。 网络拓扑&#xff1a; 二、故障现象 R1和R2可以收到来自AS100区域R4的E…...

提取视频中的某一帧画面,留住视频中的美好瞬间

你是否曾经被视频中的某一帧画面深深吸引&#xff0c;却又惋惜于无法将其永久保存&#xff1f;现在&#xff0c;有了我们【媒体梦工厂】&#xff0c;这一遗憾将成为过去&#xff0c;这个软件可以提取视频中的某一帧保存为图片&#xff0c;为你留住那些稍纵即逝的美好。 所需工…...

一个好用的服务器控制面板

简介 它是一个免费开源的管理面板工具&#xff0c;可以帮助你集中管理多个服务器和网站。Ajenti 支持 Linux、BSD、Mac OS X和Windows 等多个操作系统&#xff0c;并且可以通过一个直观的 Web 界面来完成各种系统管理任务。 相比于其他管理面板&#xff0c;Ajenti有以下几个优…...

软件测评中心▏软件系统测试的定义与测试流程简析

软件系统测试是指在软件开发的各个阶段对软件系统进行全面、系统的测试&#xff0c;以发现并修复潜在的问题和错误。系统测试旨在确保软件在各种不同的环境和使用条件下都能正常运行&#xff0c;满足用户需求&#xff0c;并且具备良好的性能和稳定性&#xff0c;包括以下测试流…...

基于JavaWeb+SSM+Vue基于微信小程序生鲜云订单零售系统的设计和实现

基于JavaWebSSMVue基于微信小程序生鲜云订单零售系统的设计和实现 滑到文末获取源码Lun文目录前言主要技术系统设计功能截图订阅经典源码专栏Java项目精品实战案例《500套》 源码获取 滑到文末获取源码 Lun文目录 目录 1系统概述 1 1.1 研究背景 1 1.2研究目的 1 1.3系统设计…...

查询列表实时按照更新时间降序排列 没有更新时间就按创建时间

例子: sql两个字段排序 ORDER BY update_time DESC , create_time DESC <select id"selectLawIllegalActivitiesList" parameterType"LawIllegalActivities" resultMap"LawIllegalActivitiesResult"><include refid"selectL…...

愉快的使用vscode刷leetcode,开启摸鱼新高度

文章目录 1. 安装leetcode插件2. 安装node.js3. vscode配置 1. 安装leetcode插件 插件扩展中搜索LeetCode&#xff0c;一般刚开始都是第一个&#xff0c;如下图所示。 2. 安装node.js window安装方法 去 node.js官网 下载相应的安装包&#xff0c;一路next即可。 ubuntu安…...

openssl3.2/test/certs - 003 - genroot “Root CA“ root-key2 root-cert2

文章目录 openssl3.2/test/certs - 003 - genroot "Root CA" root-key2 root-cert2概述笔记END openssl3.2/test/certs - 003 - genroot “Root CA” root-key2 root-cert2 概述 索引贴 > openssl3.2 - 官方demo学习 - test - certs 笔记 // openssl3.2/test/…...

npm install出错的各种情况

1.npm不再支持签名证书&#xff0c;npm install 走的是http协议&#xff0c;需要通过数字证书保证 解决方法&#xff1a; 解决方法&#xff1a;1、取消ssl验证&#xff1a;npm config set strict-ssl false 这个方法一般就可以解决了。 2、更换npm镜像源&#xff1a;npm confi…...

【Docker】Docker学习⑤ - Docker数据管理

【Docker】Docker学习⑤ - Docker数据管理 一、Docker简介二、Docker安装及基础命令介绍三、Docker镜像管理四、Docker镜像与制作五、Docker数据管理1. 数据类型1.1 什么是数据卷&#xff08;data volume&#xff09;1.1.1 创建APP目录并生成web页面1.1.2 启动容器并验证数据1.…...

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

pam_env.so模块配置解析

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

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...