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

vue中常见的指令

news 文章来源：https://blog.csdn.net/qq_40801987/article/details/135300353 2024/9/21 16:39:34

简单介绍一下常见的vue中用到的指令

v-on

指定当前的事件，语法糖为@，如例子所示，指定按钮的事件为addCounter，点击会使变量counter + 1

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- <script src="https://unpkg.com/vue@next"></script> --><script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app">		{{ counter }}<button @click="addCounter">+1</button></div><script>const App = {data() {return {counter: 0}},methods: {addCounter() {this.counter ++;}}};Vue.createApp(App).mount('#app');</script></body>
</html>

v-html

会将输出的文本解析为html

v-text

会将变量解析为文本

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- <script src="https://unpkg.com/vue@next"></script> --><script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app">		<p v-text="msg"></p><p v-html="msg"></p></div><script>const App = {data() {return {msg: '<b>1</b>'}}};Vue.createApp(App).mount('#app');</script></body>
</html>

在这里插入图片描述

v-if v-show

都可以控制元素的显示，v-show 不管显示不显示，元素都会被加载，使用的css的display属性去控制元素，v-if如果不显示的话，元素会在编译的时候被去除.

<p v-html=“msg” v-if=“displayFlg”>

v-for

用户循环变量的显示，以及列表数据的显示。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- <script src="https://unpkg.com/vue@next"></script> --><script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app">		<p v-for="(val,index) in arrayText">{{index}} -- {{val}} </p></div><script>const App = {data() {return {arrayText: ['蛮子', '寒冰', '剑圣']}}};Vue.createApp(App).mount('#app');</script></body>
</html>

在这里插入图片描述

v-bind

用于绑定元素的属性，如下图给img标签绑定了src属性

		<div id="app">		<img v-bind:src="imgsrc"/></div><script>const App = {data() {return {imgsrc: 'img/1.jpg'}}};Vue.createApp(App).mount('#app');</script>

v-model

用于绑定表单元素的值，改变表单中的值，也会改变对应的属性值

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- <script src="https://unpkg.com/vue@next"></script> --><script src="js/v3.2.8/vue.global.prod.js" type="text/javascript" charset="utf-8"></script></head><body><div id="app"><input  type="text" v-model="text"/><p>{{text}}</p></div><script>const App = {data() {return {text: 'Hi好'}}};Vue.createApp(App).mount('#app');</script></body>
</html>

在这里插入图片描述

v-pre

跳过元素的vue编辑

v-once

只加载一次，后续改变不在渲染

v-cloak

用于元素未完全加载时候，不显示。需要配合css来使用。

[v-cloak] {
display: none;
}

相关文章：

vue中常见的指令

简单介绍一下常见的vue中用到的指令 v-on 指定当前的事件&#xff0c;语法糖为&#xff0c;如例子所示&#xff0c;指定按钮的事件为addCounter&#xff0c;点击会使变量counter 1 <!DOCTYPE html> <html><head><meta charset"utf-8" />…...

编程日记 2024/1/1 6:12:24

单片机原理及应用：开关控制LED多种点亮模式

从这篇文章开始&#xff0c;我们不再只研究单一的外设工作&#xff0c;而是将LED、数码管、开关、按键搭配在一起研究&#xff0c;这篇文章主要介绍LED和开关能擦出怎样的火花&#xff0c;同时也介绍一些函数封装的知识。 由于开关有闭合与打开两种状态&#xff0c;LED有左移流…...

编程日记 2024/1/1 6:09:22

你真的了解UVM sequence的运行机制吗

1. 前言 UVM在sequence里提供了很多的callback方法给用户&#xff0c;从而更灵活地完成各种复杂场景的交互和控制执行顺序。我们可能在很多情况下只使用了body()方法&#xff0c;本文将介绍sequence里常见的callback方法&#xff0c;以及在不同场景下&#xff0c;它们的是否被…...

编程日记 2024/1/1 6:06:19

Bug升级记

2023.12.28 &#xff08;1) 小程序session_key泄露隐患 核心&#xff1a;session_key这个字段及对应值不应该传到小程序客户端等服务器外的环境 错误操作&#xff1a;直接在小程序调用https://api.weixin.qq.com/sns/jscode2session并将session_key作为参数进行明文传输 正确操…...

编程日记 2024/1/1 6:01:15

爬虫详细教程第1天

爬虫详细教程第一天 1.爬虫概述1.1什么是爬虫&#xff1f;1.2爬虫工具——Python1.3爬虫合法吗&#xff1f;1.4爬虫的矛与盾1.4.1反爬机制1.4.2反爬策略1.4.3robots.txt协议 2.爬虫使用的软件2.1使用的开发工具: 3.第一个爬虫4.web请求4.1讲解一下web请求的全部过程4.2页面渲染…...

编程日记 2024/1/1 6:00:14

[Linux] MySQL数据库的备份与恢复

一、数据库备份的分类和备份策略 1.1 数据库备份的分类 1&#xff09;物理备份 物理备份&#xff1a;对数据库操作系统的物理文件&#xff08;如数据文件、日志文件等&#xff09;的备份。 物理备份方法&#xff1a; 冷备份(脱机备份) &#xff1a;是在关闭数据库的时候进…...

编程日记 2024/1/1 5:58:12

Django、Python版本升级问题大汇总

Django3.0升级到4.1，Python3.8升级到3.11.6问题大汇总 报错1：ERROR: Could not build wheels for cffi, uWSGI, which is required to install pyproject.toml-based projects ERROR: Could not build wheels for cffi, uWSGI, which is required to install pyproject.tom…...

编程日记 2024/1/1 5:51:07

2023-12-30 AIGC-LangChain介绍

摘要: 2023-12-30 AIGC-LangChain介绍 LangChain介绍 1. https://youtu.be/Ix9WIZpArm0?t353 2. https://www.freecodecamp.org/news/langchain-how-to-create-custom-knowledge-chatbots/ 3. https://www.pinecone.io/learn/langchain-conversational-memory/ 4. https://de…...

编程日记 2024/1/1 5:50:06

pytorch01：概念、张量操作、线性回归与逻辑回归

目录 一、pytorch介绍1.1pytorch简介1.2发展历史1.3pytorch优点 二、张量简介与创建2.1什么是张量&#xff1f;2.2Tensor与Variable2.3张量的创建2.3.1 直接创建torch.tensor()2.3.2 从numpy创建tensor 2.4根据数值创建2.4.1 torch.zeros()2.4.2 torch.zeros_like()2.4.3 torch…...

编程日记 2024/1/1 5:49:05

storyBook play学习

场景 在官方给出的案例中&#xff0c; Page.stories.js import { within, userEvent } from storybook/testing-library import MyPage from ./Page.vueexport default {title: Example/Page,component: MyPage,parameters: {// More on how to position stories at: https:/…...

编程日记 2024/1/1 5:45:01

Android Matrix画布Canvas旋转Rotate，Kotlin

Android Matrix画布Canvas旋转Rotate&#xff0c;Kotlin private fun f1() {val originBmp BitmapFactory.decodeResource(resources, R.mipmap.pic).copy(Bitmap.Config.ARGB_8888, true)val newBmp Bitmap.createBitmap(originBmp.width, originBmp.height, Bitmap.Config.…...

编程日记 2024/1/1 5:44:00

私有部署ELK，搭建自己的日志中心（三）-- Logstash的安装与使用

一、部署ELK 上文把采集端filebeat如何使用介绍完&#xff0c;现在随着数据的链路&#xff0c;继续~~ 同样&#xff0c;使用docker-compose部署&#xff1a; version: "3" services:elasticsearch:container_name: elasticsearchimage: elastic/elasticsearch:7.9…...

编程日记 2024/1/1 5:41:58

2023就这样过去了，2024会更好吗？

2023年&#xff0c;不是很好 2023年是疫情后的第一年&#xff0c;疫情过去了&#xff0c;大家都有大多的希望&#xff0c;希望经济可以恢复&#xff0c;希望信心可以恢复&#xff0c;但是整体都是远远低于预期的。年初的一片热潮&#xff0c;年中的一片哀嚎&#xff0c;年底基…...

编程日记 2024/1/1 5:39:56

SpringBoot加载配置的6种方式

从配置文件中获取属性应该是SpringBoot开发中最为常用的功能之一&#xff0c;简单回顾一下这六种的使用方式&#xff1a; 说明Environment对象Environment是springboot核心的环境配置接口&#xff0c;它提供了简单的方法来访问应用程序属性&#xff0c;包括系统属性、操作系统…...

编程日记 2024/1/1 5:38:55

大语言模型（LLM）训练平台与工具

LLM 是利用深度学习和大数据训练的人工智能系统&#xff0c;专门 设计来理解、生成和回应自然语言。 大模型训练平台和工具提供了强大且灵活的基础设施&#xff0c;使得开发和训练复杂的语言模型变得可行且高效。 平台和工具提供了先进的算法、预训练模型和优化技术&#xff0c…...

编程日记 2024/1/1 5:35:52

docker配置buildx插件

一、介绍 Docker buildx是docker的一个插件 支持Moby BuildKit的所有特性 可以跨CPU架构编译镜像 可以在多节点编译镜像 二、前提 使用 buildx 作为 docker CLI 插件需要使用 Docker 19.03 或更新版本。 三、配置步骤 1&#xff09;客户端&#xff1a;在客户端的配置文…...

编程日记 2024/1/1 5:33:49

mysql 空间函数

ST_GeomFromText&#xff1a;将文本表示的几何对象转换为几何对象。 SELECT ST_GeomFromText(POINT(1 1)); ST_AsText&#xff1a;将几何对象转换为文本表示。 SELECT ST_AsText(ST_GeomFromText(POINT(1 1))); ST_Contains&#xff1a;判断一个几何对象是否包含另一个几何对象…...

编程日记 2024/1/1 5:31:48

vscode调试 反汇编c/c++ 查看汇编代码gdb/lldb

先看下流程&#xff01; 先看下流程&#xff01; 有问题请留言&#xff01; 文章目录 必备F5开启调试左侧侧边栏->确保打开回调栈右键函数栈->查看反汇编 方法二&#xff1a;手动输入命令查看 必备 使用c/c 插件&#xff0c;这应该是必备的。 F5开启调试 左侧侧边栏-&…...

编程日记 2024/1/1 5:27:44

总结项目中oauth2模块的配置流程及实际业务oauth2认证记录（Spring Security）

文章目录 简单示例添加oauth2的依赖配置认证服务器配置资源服务器配置安全使用http或者curl命令测试 实际业务中工具类&#xff08;记录&#xff09;&#xff1a;认证服务器资源服务器、配置安全用户验证登录控制层配置文件application.yml 项目中用过的spring security&#x…...

编程日记 2024/1/1 5:26:43

传感器原理与应用复习

测量与误差 传感器原理与应用复习—测量概述与测量误差 传感器特性与应变式传感器 传感器原理与应用复习–传感器基本特性与应变式传感器 电感式传感器 传感器原理与应用复习–电感式传感器 电容式与电压式传感器 传感器原理与应用复习–电容式与压电式传感器 电磁式与…...

编程日记 2024/1/1 5:25:41

蓝桥杯python比赛历届真题99道经典练习题 （8-12）

【程序8】 题目：输出9*9口诀。 1.程序分析：分行与列考虑，共9行9列，i控制行，j控制列。 2.程序源代码： #include "stdio.h" main() {int i,j,result;printf("\n");for (i=1;i<10;i++){ for(j=1;j<10;j++){result=i*j;printf("%d*%d=%-3…...

编程日记 2024/1/1 5:24:40

八个理由：从java8升级到Java17

目录 前言 1. 局部变量类型推断 2.switch表达式 3.文本块 4.Records 5.模式匹配instanceof 6. 密封类 7. HttpClient 8.性能和内存管理能力提高 前言 从Java 8 到 Java 20&#xff0c;Java 已经走过了漫长的道路&#xff0c;自 Java 8 以来&#xff0c;Java 生态系统…...

编程日记 2024/1/1 5:21:38

使用poi将pptx文件转为图片详解

目录 项目需求 后端接口实现 1、引入poi依赖 2、代码编写 1、controller 2、service层 测试出现的bug 小结 项目需求 前端需要上传pptx文件&#xff0c;后端保存为图片&#xff0c;并将图片地址保存数据库&#xff0c;最后大屏展示时显示之前上传的pptx的图片。需求看上…...

编程日记 2024/1/1 5:20:37

【微服务】springboot整合skywalking使用详解

目录 一、前言 二、SkyWalking介绍 2.1 SkyWalking是什么 2.2 SkyWalking核心功能 2.3 SkyWalking整体架构 2.4 SkyWalking主要工作流程 三、为什么选择SkyWalking 3.1 业务背景 3.2 常见监控工具对比 3.3 为什么选择SkyWalking 3.3.1 代码侵入性极低 3.3.2 功能丰…...

编程日记 2024/1/1 5:19:36

electron——查看electron的版本(代码片段)

electron——查看electron的版本(代码片段)1.使用命令行&#xff1a; npm ls electron 操作如下&#xff1a; 2.在软件内使用代码&#xff0c;如下&#xff1a; console.log(process) console.log(process.versions.electron) process 里包含很多信息&#xff1a; process详…...

编程日记 2024/1/1 5:14:32

【Electron】富文本编辑器之文本粘贴

由于这个问题导致&#xff0c;从其他地方复制来的内容 粘贴发送之后都会多一个 换行 在发送的时候如果直接&#xff0c;发送innerHTML 就 可以解决 Electron h5 Andriod 都没问题&#xff0c;但是 公司的 IOS 端 不支持&#xff0c;且不提供支持&#xff08;做不了。&#xff…...

编程日记 2024/1/1 5:13:30

【哈希数组】697. 数组的度

697. 数组的度 解题思路 首先创建一个IndexMap 键表示元素 值表示一个列表List list存储该元素在数组的所有索引之后再次创建一个map1 针对上面的List 键表示列表的长度 值表示索引的差值遍历indexmap 将所有的list的长度 和 索引的差值存储遍历map1 找到最大的key 那么这个Ke…...

编程日记 2024/1/1 5:11:29

GO语言工具函数库--Lancet

支持300常用功能的开源GO语言工具函数库–Lancet lancet&#xff08;柳叶刀&#xff09;是一个全面、高效、可复用的go语言工具函数库。lancet受到了java apache common包和lodash.js的启发。 特性 全面、高效、可复用300常用go工具函数&#xff0c;支持string、slice、dateti…...

编程日记 2024/1/1 5:10:28

25、商城系统（七）：商城项目基础功能pom.xml（重要），mybatis分页插件

截止这一章，我们就不把重心放在前端，后台的基础代码，因为后面都是业务层面的crud。 前端直接替换这两个文件夹即可，后台代码也直接复制： 一、重新更新一下所有的pom.xml 这个地方我踩了好多坑，最后得到一个完整的pom.xml，建议大家直接用我的pom.xml替换即可。 1.comm…...

编程日记 2024/1/1 5:07:25

【Docker-Dev】Mac M2 搭建docker mysql

Mac M2 搭建Mysql 1、前言2、前置说明-Docker的代理访问3、前置说明-Mysql的镜像访问3.1、提取信息3.1.1、开启Mysql的实例3.1.2、Dokcer连接Mysql3.1.3、官方简易版的docker-compose3.1.4、如何登录mysql bash3.1.5、自定义my.cnf文件3.1.6、如何知道其他自定义配置项 4、M2安…...

编程日记 2024/1/1 5:06:24

idea中终端Terminal页面输入命令git log后如何退出

1、idea中Terminal输入命令git log后如何退出&#xff1f; 2、解决 输入q键会自动退出git log命令...

编程日记 2024/1/1 5:05:22

程序员必备IDEA插件，什么是是IDE？

IDEA是一款功能强大的集成开发环境&#xff08;IDE&#xff09;插件&#xff0c;它可以帮助开发人员更加高效地编写、调试和部署软件应用程序。 我们在编写完接口代码后需要进行接口调试等操作&#xff0c;一般需要打开额外的调试工具。今天就给大家介绍一款IDEA插件&#xff…...

编程日记 2024/1/1 5:03:20

SkyWalking UI 修改发布Nginx

文章目录 SkyWalking UI修改图标修改路由发布到Nginx添加认证修改路由模式vite.config.ts添加baseNginx配置 SkyWalking UI skywalking-booster-ui下载地址 修改图标 替换 logo.svg 修改路由 router - data - index.ts 发布到Nginx 添加认证 # 安装 yum install -y h…...

编程日记 2024/1/1 5:02:19

移动硬盘打不开怎么办?没有比这更好的办法了

移动硬盘打不开是常见故障&#xff0c;可能的原因有很多&#xff0c;例如硬盘驱动器故障、文件系统损坏、分区表错误等。本文将详细分析这些原因&#xff0c;并提供相应的解决方法&#xff0c;帮助您解决移动硬盘打不开的问题。 当移动硬盘打不开时&#xff0c;为了保留其中的文…...

编程日记 2024/1/1 5:01:18

[场景实现]：多选框与树形结构递归

一、场景描述 实现一个分配权限的页面&#xff0c;最左侧是大的权限模块的名称&#xff0c;左右侧是控制其是否勾选的多选框。中间部分是一级权限模块下的子权限名称及多选框。 请求此权限模块数据的接口返回的是树形结构 对象数组。 主要属性为menuName表示权限名&#xff0…...

编程日记 2024/1/1 5:00:17

从0到1浅析Redis服务器反弹Shell那些事

文章目录 前言Redis服务1.1 特点与应用1.2 安装与使用1.3 语法和配置1.4 未授权访问 反弹Shell2.1 Web服务写入Webshell2.2 Linux定时任务反弹shell2.3 /etc/profile.d->反弹shell2.4 写入ssh公钥登录服务器2.5 利用Redis主从复制RCE2.6 SSRF漏洞组合拳->RCE 总结 前言 …...

编程日记 2024/1/1 4:58:15

JavaScript中alert、confrim、prompt的使用及区别【精选】

Hi i,m JinXiang ⭐ 前言 ⭐ 本篇文章主要介绍JavaScript中alert、confrim、prompt的区别及使用以及部分理论知识 &#x1f349;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f4dd;私信必回哟&#x1f601; &#x1f349;博主收将持续更新学习记录获&#xff0c;友友们有任…...

编程日记 2024/1/1 4:56:13

Docker Compose容器编排实战

介绍 Docker Compose 是 Docker 官方提供的一种工具&#xff0c;用于定义和运行多个 Docker 容器的应用。它使用简单的 YAML 文件&#xff08;通常称为 docker-compose.yml&#xff09;来配置应用的服务&#xff0c;并使用单个命令即可创建、启动和停止整个应用。 官方文档&am…...

编程日记 2024/1/1 4:55:12

科技创新实验室数据管理优选：高效企业网盘推荐

科技创新实验室建设是国家加强科技创新基本能力建设的重要措施&#xff0c;企业网盘等高效办公工具的应用是保证科技创新实验室正常运行、提高科研项目团队合作效率的重要手段。 本文将介绍企业网盘Zoho WorkDrive提供的解决方案&#xff1a; 行业痛点1&#xff1a;分散的数据…...

编程日记 2024/1/1 4:54:11

记录一次云服务器使用docker搭建kafka的过程

创建网络 一定要将zookeeper注册中心与kafka建在一个network中&#xff0c;不然在springboot 集成 kakfa的demo测试代码中进行消息发送时会超时&#xff0c;报错&#xff1a; E x c e p t i o n t h r o w n w h e n s e n d i n g a m e s s a g e w i t h k e y ‘ n u l l…...

编程日记 2024/1/1 4:53:10

微信小程序与vue区别

微信小程序和Vue是两个完全不同的东西&#xff0c;虽然它们都是前端技术&#xff0c;但是有以下几点区别&#xff1a; 技术栈不同&#xff1a; 微信小程序使用WXML、WXSS和JavaScript进行开发&#xff0c;而Vue使用HTML、CSS和JavaScript进行开发。微信小程序是一种基于微信平台…...

编程日记 2024/1/1 4:52:09

GIT提交、回滚等基本操作记录

1、add文件时warning: LF will be replaced by CRLF in .idea/workspace.xml. 原因&#xff1a;windows中的换行符为 CRLF&#xff0c; 而在Linux下的换行符为LF&#xff0c;所以在执行add . 时会出现以下提示 解决&#xff1a;git config core.autocrlf false 2、GIT命令&…...

编程日记 2024/1/1 4:49:07

Apollo自动驾驶：从概念到现实的里程碑

前言 「作者主页」&#xff1a;雪碧有白泡泡 「个人网站」&#xff1a;雪碧的个人网站 ChatGPT体验地址 文章目录 前言1. Apollo Client2. Apollo Server3. Apollo Federation4. Apollo Tracing5. Apollo Codegen6. Apollo Link7. 其他工具和框架结论 &#x1f680;&#x1f…...

编程日记 2024/1/1 4:48:06

再看promise

第一次学的时候没学牢固 后面意识到promise的重要性之后 陆陆续续的看、查&#xff0c;终于在今天 感觉好像明白点了 把自己敲的理解分享给大家 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name&…...

编程日记 2024/1/1 4:46:04

Redis 分布式锁总结

在一个分布式系统中，由于涉及到多个实例同时对同一个资源加锁的问题，像传统的synchronized、ReentrantLock等单进程情况加锁的api就不再适用，需要使用分布式锁来保证多服务实例之间加锁的安全性。常见的分布式锁的实现方式有zookeeper和redis等。而由于redis分布式锁相对于比…...

编程日记 2024/1/1 4:45:03

Vue懒加载深度解析：提升性能、优化用户体验的完整指南

文章目录 &#x1f333;引言&#x1f333;Vue懒加载基础&#x1f332;什么是懒加载&#xff1f;&#x1f332;组件级懒加载&#x1f332;图片懒加载 &#x1f333;懒加载的原理与优势&#x1f332;组件懒加载原理&#x1f332;图片懒加载原理&#x1f332;懒加载的优势 &#x…...

编程日记 2024/1/1 4:42:01

“图解C语言：一维数组的声明、创建与初始化艺术“

各位少年&#xff1a; 标题&#xff1a;《C语言一维数组的探索之旅&#xff1a;从声明到初始化&#xff0c;及如何避免常见误区》 引言 在编程世界中&#xff0c;数组无疑是最基础且重要的数据结构之一&#xff0c;尤其在C语言中&#xff0c;它以其简洁明了的特性为各类数据处…...

编程日记 2024/1/1 4:40:59

Unity坦克大战开发全流程——开始场景——场景装饰

开始场景——场景装饰 step1&#xff1a;先创建两个场景 step2&#xff1a;将地板拖拽到场景上 step3&#xff1a;将方块拖拽到场景上&#xff0c;并设置其参数 step4&#xff1a;将坦克拖拽到场景上 step5&#xff1a;创建点光源 step6&#xff1a;旋转炮塔 将该脚本挂载到炮…...

编程日记 2024/1/1 4:39:59

【链表OJ—链表的回文结构】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 例如&#xff1a;…...

编程日记 2024/1/1 4:38:58

关键字：try-catch关键字

在 Java 中&#xff0c;try-catch关键字用于异常处理。它们允许编写代码来捕获和处理异常&#xff0c;以确保程序能够在出现问题时合理地处理它们而不会崩溃。 以下是try-catch关键字的基本语法&#xff1a; 在try块中编写可能会抛出异常的代码。如果在try块中的任何代码抛出…...

编程日记 2024/1/1 4:35:54