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

Vue常用指令及其生命周期

news 2026/2/8 20:25:48

作者：CSDN-PleaSure乐事

欢迎大家阅读我的博客 希望大家喜欢

目录

 1.常用指令

1.1 v-bind

1.2 v-model

注意事项

1.3 v-on

注意事项

1.4 v-if / v-else-if / v-else

1.5 v-show

1.6 v-for

无索引

有索引

生命周期

定义

流程

1.常用指令

Vue当中的指令是指HTML标签带有v-前缀的特殊属性，不同指令具有不同含义。

1.1 v-bind

指令：v-bind

作用：为HTML标签绑定属性值，如设置href，css样式等

<body><div id="app"><a v-bind:href="url">一个超链接</a></div><script>new Vue({el: '#app',data: {url:"https://www.baidu.com"}})</script>
</body>

 

此时我们已经完成了对超链接的设置。虽然href当中并没有直接指明跳转地址，但是我们可以通过v-bind进行动态设置跳转地址。

另外，需要注意的是，我们可以将v-bind直接简写为一个冒号，如：

<a :href="url">一个超链接</a>

这样的格式也是允许的。 

1.2 v-model

指令：v-model

作用：为表单元素创建双向数据绑定

<body><div id="app"><a v-bind:href="url">一个超链接</a><input type="text" v-model="url"></div><script>new Vue({el: '#app',data: {url:"https://www.baidu.com"}})</script>
</body>

此时我们在url当中指定的目标网址则会在输入框中跟随显示。如果我们将输入框中的网址进行改变，那么超链接的目标网址也会跟随变化：

注意事项

需要注意的是，我们在v-bind和v-model当中绑定的变量必须在数据模型中声明，即在new vue当中声明。 

1.3 v-on

指令：v-on

作用：为HTML标签绑定事件

<body><div id="app"><input type="button" value="按钮" v-on:click="show"></div><script>new Vue({el: '#app',data: {},methods: {show:function(){alert("已触发事件")}}})</script>
</body>

此时我们点击按钮，则会出发alert弹出网页显示。

注意事项

需要把定义的事件放在method当中，且v-on可以简化为@

1.4 v-if / v-else-if / v-else

指令：v-if、v-else-if、v-else

作用：条件性渲染某元素，为true时渲染，否则不渲染

<body><div id="app">年龄<input type="text" 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></div><script>new Vue({el: '#app',data: {age:20}})</script>
</body>

这里我们进行判断，在age符合不同条件时会动态显示不同结果，最终效果如下：

1.5 v-show

指令：v-show

作用：根据条件展示元素，区别在于切换的是display属性的值

<body><div id="app">年龄<input type="text" v-model="age"><span v-show="age <= 35">35岁以下</span><span v-show = "age>35 &&age<=60">35-60岁</span><span v-show>60岁以上</span></div><script>new Vue({el: '#app',data: {age:20}})</script>
</body>

这里需要注意v-show和上面的v-if展现的效果类似，区别我们可以通过元素检查器发现：

v-if只展示符合的条件，而display则通过none与非none来进行区分。

1.6 v-for

指令：v-for

作用：遍历容器元素或对象属性来进行列表渲染

无索引

v-for的格式与python当中的遍历差不多，如下：

<body><div id="app"><div v-for="add in adds">{{add}}</div></div><script>new Vue({el: '#app',data: {adds:["a","b","c","d","e"]}})</script>
</body>

得到的效果如下：

 

有索引

如果我们想要插入索引，那么直接加入index即可，格式如下：

<body><div id="app"><div v-for="(add,index) in adds">{{index}} : {{add}}</div></div><script>new Vue({el: '#app',data: {adds:["a","b","c","d","e"]}})</script>
</body>

但是需要注意的是索引是从0开始，如果想要从1开始，则直接对大括号内的index进行加一操作即可，想要从其他数字开始同理。 

生命周期

定义

生命周期的定义是指一个对象从创建到销毁的过程，生命周期有如下8个阶段：

  1. 创建前：beforeCreate
  2. 创建后：created
  3. 挂载前：beforeMount
  4. 挂载完成：mounted
  5. 更新前：beforeUpdate
  6. 更新后：updated
  7. 销毁前：beforeDestroy
  8. 销毁后：destroyed

流程

作者：CSDN-PleaSure乐事

希望我的博客对您有帮助，也希望在对您有帮助时您可以为我留下点赞收藏与关注，这对我真的很重要，谢谢！

相关文章：

Vue常用指令及其生命周期

作者&#xff1a;CSDN-PleaSure乐事 欢迎大家阅读我的博客 希望大家喜欢 目录 1.常用指令 1.1 v-bind 1.2 v-model 注意事项 1.3 v-on 注意事项 1.4 v-if / v-else-if / v-else 1.5 v-show 1.6 v-for 无索引 有索引 生命周期 定义 流程 1.常用指令 Vue当中的指令…...

编程日记 2024/7/27 12:02:21

简化数据流：Apache SeaTunnel实现多表同步的高效指南

Apache SeaTunnel除了单表之间的数据同步之外&#xff0c;也支持单表同步到多表&#xff0c;多表同步到单表&#xff0c;以及多表同步到多表&#xff0c;下面简单举例说明如何实现这些功能。 单表 to 单表 一个source&#xff0c;一个sink。 从mysql同步到mysql&#xff0c;…...

编程日记 2024/7/27 11:54:13

均匀圆形阵列原理及MATLAB仿真

均匀圆形阵列原理及MATLAB仿真 目录 前言 一、均匀圆阵原理 二、圆心不存在阵元方向图仿真 三、圆心存在阵元方向图仿真 四、MATLAB仿真代码 总结 前言 本文详细推导了均匀圆形阵列的方向图函数&#xff0c;对圆心不放置阵元和圆心放置阵元的均匀圆形阵列方向图都进行了仿…...

编程日记 2024/7/27 11:47:06

vue2使用univerjs

1、univerjs Univer 提供了一个全面的企业级文档与数据协同的解决方案&#xff0c;支持电子表格、文本文档和演示幻灯片三大核心文档类型。通过灵活的 API 和插件机制&#xff0c;开发者可以在 Univer 的基础上进行个性化功能的定制和扩展&#xff0c;以适应不同用户在不同场景…...

编程日记 2024/7/27 11:46:05

VUE3 el-table-column header新增必填*

1.在需要加必填星号的el-table-column上添加render-header属性 <el-table-column :label"getName(产品代码)" :render-header"addRedStart" prop"MODELCODE" min-width“4.5%”> <template v-slot"scope"> <el-input …...

编程日记 2024/7/27 11:44:03

条件概率和贝叶斯公式

...

编程日记 2024/7/27 11:43:02

Kali中docker与docker-compose的配置

权限升级 sudo su 升级为root用户 更新软件 apt-get update安装HTTPS协议和CA证书 apt-get install -y apt-transport-https ca-certificates下载docker apt下载docker apt install docker.io 验证docker安装是否成功 查版本 docker -v 启动docker systemctl start …...

编程日记 2024/7/27 11:40:59

C++ | Leetcode C++题解之第283题移动零

题目&#xff1a; 题解&#xff1a; class Solution { public:void moveZeroes(vector<int>& nums) {int n nums.size(), left 0, right 0;while (right < n) {if (nums[right]) {swap(nums[left], nums[right]);left;}right;}} };...

编程日记 2024/7/27 11:39:59

Exponential Moving Average (EMA) in Stable Diffusion

1.Moving Average in Stable Diffusion (SMA&EMA) 1.Moving average 2.移动平均值 3.How We Trained Stable Diffusion for Less than $50k (Part 3) Moving Average 在统计学中&#xff0c;移动平均是通过创建整个数据集中不同选择的一系列平均值来分析数据点的计算。 …...

编程日记 2024/7/27 11:38:58

017、Vue动态tag标签

文章目录 1、先看效果2、代码 1、先看效果 2、代码 <template><div class "tags"><el-tag size"medium"closable v-for"item,index in tags":key"item.path":effect"item.title$route.name?dark:plain"cl…...

编程日记 2024/7/27 11:33:53

RocketMQ 架构概览

Apache RocketMQ 是一个分布式消息中间件和流计算平台&#xff0c;提供低延迟、高性能和可靠的队列服务&#xff0c;并且支持大规模的分布式系统。在详细介绍 RocketMQ 的整体架构之前&#xff0c;先了解其设计目标和核心特性是很重要的。RocketMQ 主要用于处理大规模的消息&am…...

编程日记 2024/7/27 11:31:51

优化医疗数据管理：Kettle ETL 数据采集方案详解

在现代医疗保健领域&#xff0c;数据的准确性、完整性和及时性对于提高医疗服务质量和患者护理至关重要。为了有效管理和利用医疗数据&#xff0c;Kettle ETL&#xff08;Extract, Transform, Load&#xff09;数据采集方案成为了许多医疗机构的首选工具之一。本文将深入探讨Ke…...

编程日记 2024/7/27 11:30:50

spring-from表单

在spring boot当中，from表单怎样开发（name=value) 先列出接口所需信息（抓包得到请求信息），将这些必要信息以注解的方式表达出来 步骤： 梳理前置条件（请求地址，请求header，请求方法，请求数据，响应结果）编辑一个普通类，在类上标记注解@Controller: 标记在类上,让类…...

编程日记 2024/7/27 11:29:48

【.NET】asp.net core 程序重启容器后redis无法连接，连接超时

环境是容器化部署asp.net core 程序当有大量请求打到容器如果此时重启容器会出现&#xff0c;redis无法连接情况。 使用 csredis 库报错&#xff1a; Status unavailable, waiting for recovery. Connect to server timeout 使用StackExchange.Redis 报错&#xff1a; Time…...

编程日记 2024/7/27 11:24:42

【vue前端项目实战案例】Vue3仿今日头条App

本文将开发一款仿“今日头条”的新闻App。该案例是基于 Vue3.0 Vue Router webpack TypeScript 等技术栈实现的一款新闻资讯类App&#xff0c;适合有一定Vue框架使用经验的开发者进行学习。 项目源码在文章末尾 1 项目概述 该项目是一款“今日头条”的新闻资讯App&#xf…...

编程日记 2024/7/27 11:22:38

常见的文心一言的指令

文心一言&#xff0c;作为百度研发的预训练语言模型“ERNIE 3.0”的一项功能&#xff0c;能够与人对话互动&#xff0c;回答问题&#xff0c;协助创作&#xff0c;高效便捷地帮助人们获取信息、知识和灵感。以下是一些常见的文心一言指令类型及其具体示例&#xff1a; 1. 查询…...

编程日记 2024/7/27 11:18:35

数字货币交易接口实现（含源代码）

数字货币交易接口实现&#xff08;含源代码&#xff09; 使用币安交易接口步骤1&#xff1a;注册API密钥步骤2&#xff1a;安装所需库步骤3&#xff1a;使用API进行交易获取市场数据查看账户信息执行交易错误处理安全提示 使用OKX交易接口步骤1&#xff1a;注册API密钥步骤2&am…...

编程日记 2024/7/27 11:16:33

c++函数以及函数分文件编写

1.函数 1.1格式 返回值类型 函数名 &#xff08;参数列表&#xff09;//返回值类型指的是return过去的类型 { 函数体语句 return 表达式 } 1.2常见的函数样式 1.无参返回 2.有参返回 3.无参有返 4.有参有返 #include<iostream> using namespace std; int add(int nu…...

编程日记 2024/7/27 11:15:32

【JVM基础06】——组成-直接内存详解

目录 1- 引言&#xff1a;直接内存概述1-1 直接内存是什么&#xff1f;直接内存的定义(What)1-2 为什么用直接内存&#xff1f;Java程序对直接内存的使用 (Why) 2- ⭐核心&#xff1a;详解直接内存(How)2-1 文件拷贝案例介绍对比常规 IO(BIO) 和 NIO常规 IO 的操作流程NIO 的操…...

编程日记 2024/7/27 11:14:31

学术研讨 | 区块链与隐私计算领域专用硬件研讨会顺利召开

学术研讨 近日&#xff0c;国家区块链技术创新中心主办&#xff0c;长安链开源社区支持的“区块链与隐私计算领域专用硬件研讨会”顺利召开&#xff0c;会议围绕基于区块链与隐私计算的生成式AI上链、硬件加速、软硬协同等主题展开讨论&#xff0c;来自复旦大学、清华大学、北京…...

编程日记 2024/7/27 11:12:28

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

编程新知 2026/2/8 4:37:01

相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

编程新知 2026/1/30 10:10:55

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

编程新知 2026/2/5 3:09:56

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

编程新知 2025/10/7 15:08:22

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

编程新知 2026/1/20 19:15:45

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

编程新知 2026/1/7 1:29:19

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

编程新知 2025/9/13 16:17:01

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...

编程新知 2026/2/8 2:27:29

C++ 设计模式 《小明的奶茶加料风波》

&#x1f468;‍&#x1f393; 模式名称&#xff1a;装饰器模式&#xff08;Decorator Pattern&#xff09; &#x1f466; 小明最近上线了校园奶茶配送功能&#xff0c;业务火爆&#xff0c;大家都在加料&#xff1a; 有的同学要加波霸 &#x1f7e4;&#xff0c;有的要加椰果…...

编程新知 2026/1/31 8:45:21

Linux部署私有文件管理系统MinIO

最近需要用到一个文件管理服务&#xff0c;但是又不想花钱&#xff0c;所以就想着自己搭建一个&#xff0c;刚好我们用的一个开源框架已经集成了MinIO&#xff0c;所以就选了这个 我这边对文件服务性能要求不是太高&#xff0c;单机版就可以 安装非常简单&#xff0c;几个命令就…...

编程新知 2026/2/7 17:45:38