Vue常用指令及其生命周期
作者：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个阶段：
- 创建前：beforeCreate
- 创建后：created
- 挂载前：beforeMount
- 挂载完成：mounted
- 更新前：beforeUpdate
- 更新后：updated
- 销毁前：beforeDestroy
- 销毁后：destroyed
流程
作者：CSDN-PleaSure乐事
希望我的博客对您有帮助，也希望在对您有帮助时您可以为我留下点赞收藏与关注，这对我真的很重要，谢谢！
相关文章：
Vue常用指令及其生命周期
作者：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当中的指令…...
简化数据流：Apache SeaTunnel实现多表同步的高效指南
Apache SeaTunnel除了单表之间的数据同步之外，也支持单表同步到多表，多表同步到单表，以及多表同步到多表，下面简单举例说明如何实现这些功能。 单表 to 单表 一个source，一个sink。 从mysql同步到mysql，…...
均匀圆形阵列原理及MATLAB仿真
均匀圆形阵列原理及MATLAB仿真 目录 前言 一、均匀圆阵原理 二、圆心不存在阵元方向图仿真 三、圆心存在阵元方向图仿真 四、MATLAB仿真代码 总结 前言 本文详细推导了均匀圆形阵列的方向图函数，对圆心不放置阵元和圆心放置阵元的均匀圆形阵列方向图都进行了仿…...
vue2使用univerjs
1、univerjs Univer 提供了一个全面的企业级文档与数据协同的解决方案，支持电子表格、文本文档和演示幻灯片三大核心文档类型。通过灵活的 API 和插件机制，开发者可以在 Univer 的基础上进行个性化功能的定制和扩展，以适应不同用户在不同场景…...
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 …...
条件概率和贝叶斯公式
...
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 …...
C++ | Leetcode C++题解之第283题移动零
题目： 题解： 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;}} };...
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 在统计学中，移动平均是通过创建整个数据集中不同选择的一系列平均值来分析数据点的计算。 …...
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…...
RocketMQ 架构概览
Apache RocketMQ 是一个分布式消息中间件和流计算平台，提供低延迟、高性能和可靠的队列服务，并且支持大规模的分布式系统。在详细介绍 RocketMQ 的整体架构之前，先了解其设计目标和核心特性是很重要的。RocketMQ 主要用于处理大规模的消息&am…...
优化医疗数据管理：Kettle ETL 数据采集方案详解
在现代医疗保健领域，数据的准确性、完整性和及时性对于提高医疗服务质量和患者护理至关重要。为了有效管理和利用医疗数据，Kettle ETL（Extract, Transform, Load）数据采集方案成为了许多医疗机构的首选工具之一。本文将深入探讨Ke…...
spring-from表单
在spring boot当中，from表单怎样开发（name=value) 先列出接口所需信息（抓包得到请求信息），将这些必要信息以注解的方式表达出来 步骤： 梳理前置条件（请求地址，请求header，请求方法，请求数据，响应结果）编辑一个普通类，在类上标记注解@Controller: 标记在类上,让类…...
【.NET】asp.net core 程序重启容器后redis无法连接，连接超时
环境是容器化部署asp.net core 程序当有大量请求打到容器如果此时重启容器会出现，redis无法连接情况。 使用 csredis 库报错： Status unavailable, waiting for recovery. Connect to server timeout 使用StackExchange.Redis 报错： Time…...
【vue前端项目实战案例】Vue3仿今日头条App
本文将开发一款仿“今日头条”的新闻App。该案例是基于 Vue3.0 Vue Router webpack TypeScript 等技术栈实现的一款新闻资讯类App，适合有一定Vue框架使用经验的开发者进行学习。 项目源码在文章末尾 1 项目概述 该项目是一款“今日头条”的新闻资讯App…...
常见的文心一言的指令
文心一言，作为百度研发的预训练语言模型“ERNIE 3.0”的一项功能，能够与人对话互动，回答问题，协助创作，高效便捷地帮助人们获取信息、知识和灵感。以下是一些常见的文心一言指令类型及其具体示例： 1. 查询…...
数字货币交易接口实现（含源代码）
数字货币交易接口实现（含源代码） 使用币安交易接口步骤1：注册API密钥步骤2：安装所需库步骤3：使用API进行交易获取市场数据查看账户信息执行交易错误处理安全提示 使用OKX交易接口步骤1：注册API密钥步骤2&am…...
c++函数以及函数分文件编写
1.函数 1.1格式 返回值类型 函数名 （参数列表）//返回值类型指的是return过去的类型 { 函数体语句 return 表达式 } 1.2常见的函数样式 1.无参返回 2.有参返回 3.无参有返 4.有参有返 #include<iostream> using namespace std; int add(int nu…...
【JVM基础06】——组成-直接内存详解
目录 1- 引言：直接内存概述1-1 直接内存是什么？直接内存的定义(What)1-2 为什么用直接内存？Java程序对直接内存的使用 (Why) 2- ⭐核心：详解直接内存(How)2-1 文件拷贝案例介绍对比常规 IO(BIO) 和 NIO常规 IO 的操作流程NIO 的操…...
学术研讨 | 区块链与隐私计算领域专用硬件研讨会顺利召开
学术研讨 近日，国家区块链技术创新中心主办，长安链开源社区支持的“区块链与隐私计算领域专用硬件研讨会”顺利召开，会议围绕基于区块链与隐私计算的生成式AI上链、硬件加速、软硬协同等主题展开讨论，来自复旦大学、清华大学、北京…...
零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？
一、核心优势：专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发，是一款收费低廉但功能全面的Windows NAS工具，主打“无学习成本部署” 。与其他NAS软件相比，其优势在于： 无需硬件改造：将任意W…...
MySQL 8.0 OCP 英文题库解析（十三）
Oracle 为庆祝 MySQL 30 周年，截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始，将英文题库免费公布出来，并进行解析，帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...
【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分
一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计，提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合：各模块职责清晰，便于独立开发…...
day36-多路IO复用
一、基本概念 （服务器多客户端模型） 定义：单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用：应用程序通常需要处理来自多条事件流中的事件，比如我现在用的电脑，需要同时处理键盘鼠标…...
MyBatis中关于缓存的理解
MyBatis缓存 MyBatis系统当中默认定义两级缓存：一级缓存、二级缓存 默认情况下，只有一级缓存开启（sqlSession级别的缓存）二级缓存需要手动开启配置，需要局域namespace级别的缓存 一级缓存（本地缓存&#…...
认识CMake并使用CMake构建自己的第一个项目
1.CMake的作用和优势 跨平台支持：CMake支持多种操作系统和编译器，使用同一份构建配置可以在不同的环境中使用 简化配置：通过CMakeLists.txt文件，用户可以定义项目结构、依赖项、编译选项等，无需手动编写复杂的构建脚本…...
Windows电脑能装鸿蒙吗_Windows电脑体验鸿蒙电脑操作系统教程
鸿蒙电脑版操作系统来了，很多小伙伴想体验鸿蒙电脑版操作系统，可惜，鸿蒙系统并不支持你正在使用的传统的电脑来安装。不过可以通过可以使用华为官方提供的虚拟机，来体验大家心心念念的鸿蒙系统啦！注意：虚拟…...
【实施指南】Android客户端HTTPS双向认证实施指南
🔐 一、所需准备材料 证书文件（6类核心文件） 类型 格式 作用 Android端要求 CA根证书 .crt/.pem 验证服务器/客户端证书合法性 需预置到Android信任库 服务器证书 .crt 服务器身份证明 客户端需持有以验证服务器 客户端证书 .crt 客户端身份…...
React父子组件通信：Props怎么用？如何从父组件向子组件传递数据？
系列回顾： 在上一篇《React核心概念：State是什么？》中，我们学习了如何使用useState让一个组件拥有自己的内部数据（State），并通过一个计数器案例，实现了组件的自我更新。这很棒&#…...
CppCon 2015 学习:Reactive Stream Processing in Industrial IoT using DDS and Rx
“Reactive Stream Processing in Industrial IoT using DDS and Rx” 是指在工业物联网（IIoT）场景中，结合 DDS（Data Distribution Service） 和 Rx（Reactive Extensions） 技术，实现 …...