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

Vue中的常用指令

news 2026/4/2 9:13:11

Vue 会根据不同的【指令】，针对标签实现不同的【功能】

概念：指令（Directives）是 Vue 提供的带有 v- 前缀 的 特殊 标签属性。

为啥要学：提高程序员操作 DOM 的效率。

vue 中的指令按照不同的用途可以分为如下 6 大类：

  • 内容渲染指令（v-html、v-text）
  • 条件渲染指令（v-show、v-if、v-else、v-else-if）
  • 事件绑定指令（v-on）
  • 属性绑定指令 （v-bind）
  • 双向绑定指令（v-model）
  • 列表渲染指令（v-for）

指令是 vue 开发中最基础、最常用、最简单的知识点。

语法：

v-html = "表达式 " → 动态设置元素 innerHTML

示例代码：

<body><div id="app"><!-- 插值表达式并不能解析标签，而是会以存文本的方式展示到页面上 --><div>{{ msg }}</div><div v-html="msg"></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {msg: `<h3>学前端~来黑马！</h3>`}})</script>
</body>

具体有哪些指令可以查询官网

学习 --> API

image-20240128182108578

可以看见，总共14个指令，但这14个并不都是常用的，只用下述用红框框起来的这10个指令才是常用的

image-20240128182240360

相关文章：

Vue中的常用指令

Vue 会根据不同的【指令】&#xff0c;针对标签实现不同的【功能】 概念&#xff1a;指令&#xff08;Directives&#xff09;是 Vue 提供的带有 v- 前缀 的 特殊 标签属性。 为啥要学&#xff1a;提高程序员操作 DOM 的效率。 vue 中的指令按照不同的用途可以分为如下 6 大…...

编程日记 2024/5/29 15:59:17

百度页面奔跑的白熊html、css

一、相关知识-动画 1.基本使用&#xff1a;先定义再调用 2. 调用动画 用keyframes定义动画&#xff08;类似定义类选择器&#xff09; keyframes动画名称{ 0%{ width:100px&#xff1b; } 100%{ width:200px; } } 使用动画 div { width:200px; height:200px; background-…...

编程日记 2024/5/29 15:58:16

Day-02面向对象

一、匿名函数 和函数的作用一致&#xff0c;都是进行代码逻辑的封装&#xff0c; 区别1 在定义时&#xff0c;匿名函数可以不指定函数的名字 区别2 匿名函数执行实现简单的计算 区别3 匿名函数会自动将计算的结果返回 定义格式 lambda 参数1,参数2...:计算逻辑(参数的处理逻辑…...

编程日记 2024/5/29 15:57:15

Sentinel-2 哨兵二号数据介绍及下载

1 Sentinel-2简介 SENTINEL-2 is a European wide-swath, high-resolution, multi-spectral imaging mission. Sentinel-2 是高分辨率多光谱成像卫星&#xff0c;一颗卫星的重访周期为10天&#xff0c;两颗互补&#xff0c;重访周期为5天。分为2A和2B两颗卫星。2A于2015年6月…...

编程日记 2024/5/29 15:55:13

阿里智能信息数据挖掘复盘

&#xff08;嘻嘻——不嘻嘻&#xff09; 挫败呜呜呜&#xff0c;钉钉忘装&#xff0c;还要手机登录&#xff0c;迟到三分钟。 一上来就问项目&#xff0c;没有自我介绍。 第一篇的重要特征是什么直接忘记&#xff0c;正负样本比&#xff0c;过拟合的判断标准&#xff0c;特…...

编程日记 2024/5/29 15:54:10

Flutter中图片是怎么在flutter上呈现出来的？

在Flutter中&#xff0c;图片的呈现是通过使用Image组件来实现的。Image组件是一个用于加载和显示图片的Widget&#xff0c;可以从本地文件、网络URL或内存中加载图片&#xff0c;并在应用界面上进行渲染。 图片在Flutter中的呈现过程如下&#xff1a; 加载图片&#xff1a; 使…...

编程日记 2024/5/29 15:53:08

使用 CNN 训练自己的数据集

CNN&#xff08;练习数据集&#xff09; 1.导包&#xff1a;2.导入数据集&#xff1a;3. 使用image_dataset_from_directory()将数据加载tf.data.Dataset中&#xff1a;4. 查看数据集中的一部分图像&#xff0c;以及它们对应的标签&#xff1a;5.迭代数据集 train_ds&#xff0…...

编程日记 2024/5/29 15:52:07

自动控制： 最小二乘估计（LSE）、加权最小二乘估计（WLS）和线性最小方差估计

自动控制&#xff1a; 最小二乘估计&#xff08;LSE&#xff09;、加权最小二乘估计&#xff08;WLS&#xff09;和线性最小方差估计 在数据分析和机器学习中&#xff0c;参数估计是一个关键步骤。最小二乘估计&#xff08;LSE&#xff09;、加权最小二乘估计&#xff08;WLS&…...

编程日记 2024/5/29 15:51:06

基于VMware安装Linux虚拟机

1.准备Linux环境 首先&#xff0c;我们要准备一个Linux的系统&#xff0c;成本最低的方式就是在本地安装一台虚拟机。为了统一学习环境&#xff0c;不管是使用MacOS还是Windows系统的同学&#xff0c;都建议安装一台虚拟机。 windows采用VMware&#xff0c;Mac则采用Fusion …...

编程日记 2024/5/29 15:50:05

6、phpjm混淆解密和php反序列化

题目&#xff1a;青少年雏形系统 1、打开链接也是一个登入面板 2、尝试了sqlmap没头绪 3、尝试御剑&#xff0c;发现一个www.zip 4、下载打开&#xff0c;有一个php文件打开有一段phpjm混淆加密 5、使用手工解混淆 具体解法链接&#xff1a;奇安信攻防社区-phpjm混淆解密浅谈…...

编程日记 2024/5/29 15:49:03

Codeforces Round 909 (Div. 3) E. Queue Sort（模拟 + 贪心之找到了一个边界点）

弗拉德找到了一个由 n 个整数组成的数组 a &#xff0c;并决定按不递减的顺序排序。 为此&#xff0c;弗拉德可以多次执行下面的操作&#xff1a; 提取数组的第一个元素并将其插入末尾&#xff1b; 将个元素与前一个元素对调&#xff0c;直到它变成第一个元素或严格大于前一个…...

编程日记 2024/5/29 15:47:01

设计模式基础——设计原则介绍

1.概述 ​ 对于面向对象软件系统的设计而言&#xff0c;如何同时提高一个软件系统的可维护性、可复用性、可拓展性是面向对象设计需要解决的核心问题之一。面向对象设计原则应运而生&#xff0c;这些原则你会在设计模式中找到它们的影子&#xff0c;也是设计模式的基础。往往判…...

编程日记 2024/5/29 15:44:58

【校园网网络维修】当前用户使用的IP与设备重定向地址中IP不一致，请重新认证

出现的网络问题&#xff1a;当前用户使用的IP与设备重定向地址中IP不一致&#xff0c;请重新认证 可能的原因&#xff1a; 把之前登录的网页收藏到浏览器&#xff0c;然后直接通过这个链接进行登录认证。可能是收藏网址导致的ip地址请求参数不一致。 解决方法&#xff1a; 方法…...

编程日记 2024/5/29 15:43:57

如何找到docker的run(启动命令)

使用python三方库进行 需要安装python解释器 安装runlike安装包 pip3 install runlike 运行命令 runlike -p <container_name> # 后面可以是容器名和容器id&#xff0c;-p参数是显示自动换行实验 使用docker启动一个jenkins 启动命令为 docker run -d \ -p 9002:80…...

编程日记 2024/5/29 15:42:56

Spring如何管理Bean的生命周期呢？

我们都知道&#xff0c;在面试的过程中&#xff0c;关于 Spring 的面试题&#xff0c;那是各种各样&#xff0c;很多时候就会问到关于 Spring的相关问题&#xff0c;比如 AOP &#xff0c;IOC 等等&#xff0c;还有就是关于 Spring 是如何管理 Bean 的生命周期的相关问题&#…...

编程日记 2024/5/29 15:41:54

Java网络编程：UDP通信篇

目录 UDP协议 Java中的UDP通信 DatagramSocket DatagramPacket UDP客户端-服务端代码实现 UDP协议 对于UDP协议&#xff0c;这里简单做一下介绍&#xff1a; 在TCP/IP协议簇中&#xff0c;用户数据报协议&#xff08;UDP&#xff09;是传输层的一个主要协议之一&#xf…...

编程日记 2024/5/29 15:39:53

HTML+CSS+JS简易计算器

HTMLCSSJS简易计算器 index.html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>简易计算器</t…...

编程日记 2024/5/29 15:38:51

STM32使用ST-LINK下载程序中需要注意的几点

使用keil5的ST-link下载界面 前提是ST-LINK已经连接好&#xff0c;&#xff08;下图中是没有连接ST-link设备&#xff09;&#xff0c;只是为了展示如何查看STlink设备是否连接的方式 下载前一定设置下载完成后自启动 这个虽然不是必须&#xff0c;但对立即看到新程序的现象…...

编程日记 2024/5/29 15:37:50

我和jetson-Nano的故事（12）——安装pytorch 以及 torchvision

在jetson nano中安装Anaconda、pytorch 以及 torchvision 1.Pytorch下载安装2.Torchvision安装 1.Pytorch下载安装 首先登录英伟达官网下载Pytorch安装包&#xff0c;这里以PyTorch v1.10.0为例 安装依赖库 sudo apt-get install libjpeg-dev zlib1g-dev libpython3-dev liba…...

编程日记 2024/5/29 15:36:49

「异步魔法：Python数据库交互的革命」(一)

Hi&#xff0c;我是阿佑&#xff0c;今天将和大家一块打开异步魔法的大门&#xff0c;进入Python异步编程的神秘领域&#xff0c;学习如何同时施展多个咒语而不需等待。了解asyncio的魔力&#xff0c;掌握Async SQLAlchemy和Tortoise-ORM的秘密&#xff0c;让你的数据库操作快如…...

编程日记 2024/5/29 15:35:48

4个维度解析YetAnotherKeyDisplayer：开源实时按键可视化工具全指南

4个维度解析YetAnotherKeyDisplayer&#xff1a;开源实时按键可视化工具全指南 【免费下载链接】YetAnotherKeyDisplayer The application for displaying pressed keys of the keyboard 项目地址: https://gitcode.com/gh_mirrors/ye/YetAnotherKeyDisplayer YetAnothe…...

编程新知 2026/4/2 8:24:03

效率倍增：用快马生成openclaw在ubuntu的一键部署与docker化脚本

最近在折腾一个开源项目openclaw的部署&#xff0c;发现每次在Ubuntu服务器上手动安装配置特别费时间。作为一个懒人程序员&#xff0c;我决定研究下怎么把整个流程自动化&#xff0c;结果发现用InsCode(快马)平台可以轻松搞定这件事&#xff0c;效率直接翻倍。 传统部署方式的…...

编程新知 2026/4/2 8:07:51

MIT-BEVFusion LiDAR Encoder 保姆级拆解：从点云到BEV特征图，手把手带你过一遍代码

MIT-BEVFusion LiDAR Encoder 深度解析&#xff1a;从点云到BEV特征图的完整实现路径 当自动驾驶系统需要理解周围环境时&#xff0c;LiDAR点云数据的高效处理成为关键挑战。MIT-BEVFusion框架中的LiDAR编码器模块&#xff0c;通过创新的稀疏卷积架构&#xff0c;将无序的三维点…...

编程新知 2026/4/2 6:24:29

PasteMD实际作品：将播客文字稿→带时间戳/嘉宾标注/知识点标签的Markdown

PasteMD实际作品&#xff1a;将播客文字稿→带时间戳/嘉宾标注/知识点标签的Markdown 1. 项目简介 PasteMD是一款基于本地Ollama框架构建的智能文本格式化工具&#xff0c;专门解决日常工作中遇到的文本整理难题。无论你是从会议记录、播客转录还是笔记草稿中获取的杂乱文本&…...

编程新知 2026/4/2 4:43:28

Qwen3.5-9B生产环境实测：7x24小时稳定运行+自动恢复+错误率＜0.3%运维报告

Qwen3.5-9B生产环境实测&#xff1a;7x24小时稳定运行自动恢复错误率<0.3%运维报告 1. 项目概述 Qwen3.5-9B是一款拥有90亿参数的开源大语言模型&#xff0c;在实际生产环境中展现出卓越的稳定性和可靠性。经过长达一个月的7x24小时不间断运行测试&#xff0c;该系统实现了…...

编程新知 2026/4/2 0:57:49

学习框架和推理引擎有什么区别

​​​​​​学习框架和推理引擎通常分别应用在 AI 大模型的训练和推理 &#xff08;运行&#xff09;阶段。模型的核心任务是从大量数据中学习规律&#xff0c;完成特定预测或者生成任务&#xff0c;前者即“模型训练”&#xff0c;后者即“模型运行”。在模型训练时&#xff…...

编程新知 2026/4/2 0:51:46

个人 AI 助理——打造你的第二大脑

个人 AI 助理——打造你的第二大脑摘要&#xff1a;信息过载时代&#xff0c;个人 AI 助理不再是奢侈品&#xff0c;而是必需品。本文教你如何搭建专属 AI 助理&#xff0c;实现信息管理、知识沉淀、决策辅助的智能化&#xff0c;让 AI 成为你的"第二大脑"。一、为什…...

编程新知 2026/4/2 0:43:28

在CentOS上部署RustDesk私有中继服务器：从零搭建到安全配置

1. 环境准备&#xff1a;搭建RustDesk私有中继服务器的基石 在CentOS系统上部署RustDesk私有中继服务器&#xff0c;首先需要确保基础环境配置正确。我遇到过不少因为环境问题导致的部署失败案例&#xff0c;所以这部分我会详细说明每个环节的注意事项。 1.1 系统更新与基础依赖…...

编程新知 2026/4/2 0:16:52

Modbus协议详解：从原理到工业应用实践

1. Modbus协议概述Modbus是一种应用层报文传输协议&#xff0c;由Modicon公司&#xff08;现为施耐德电气旗下品牌&#xff09;于1979年开发。作为工业自动化领域最广泛采用的通信协议之一&#xff0c;它定义了控制器设备之间交换信息的通用语言。关键特性&#xff1a;协议标准…...

编程新知 2026/4/2 0:08:45

Qwen-Edit-2509多角度切换技术：如何用单张图片生成全视角内容？

Qwen-Edit-2509多角度切换技术&#xff1a;如何用单张图片生成全视角内容&#xff1f; 【免费下载链接】Qwen-Edit-2509-Multiple-angles 项目地址: https://ai.gitcode.com/hf_mirrors/dx8152/Qwen-Edit-2509-Multiple-angles 在视觉创作领域&#xff0c;你是否曾为拍…...

编程新知 2026/4/1 23:44:29