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个阶段:

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

流程


作者:CSDN-PleaSure乐事

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/50658.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据库水印算法三道题

针对数据库水印算法的面试题&#xff0c;由简单到困难&#xff0c;可以设计以下三道题目&#xff1a; 1. 基础理解题 题目&#xff1a;请简要解释什么是数据库水印算法&#xff0c;并说明其主要应用场景。 参考答案&#xff1a; 数据库水印算法是一种在数据库中嵌入隐蔽信息…

Red Hat 9.4 配置Yum镜像源

1. 虚拟机信息 镜像&#xff1a;rhel-server-9.4-x86_64-dvd.iso 系统版本&#xff1a;Red Hat 9.4 版本信息&#xff1a; cat /etc/redhat-release Red Hat Enterprise Linux release 9.4 (Plow)2. 配置文件 vim /etc/yum.repos.d/local.repo # 按i键&#xff0c;输入以下内…

Linux 普通用户启动Nginx使用80端口,小于1024的端口

让 Nginx 运行在 root 权限下&#xff1a; 在root用户下执行 cd /usr/local/nginx/sbin/ chown root nginx chmod us nginx或者&#xff1a;cd /usr/local/nginx/sbin/ sudo chown root nginx sudo chmod us nginx

远程项目调试-informer2020

informer2020 Informer: Beyond Efficient Transformer for Long Sequence Time-Series Forecasting(原文&#xff09;Informer 是一个基于Transformer的模型&#xff0c;是为了应对长依赖关系而开发的。本文的主要主题是序列预测。序列预测可以在任何具有不断变化的数据的地方…

[笔记]ONVIF服务端实现[进行中...]

1.文档搜索&#xff1a; 从&#xff1a;https://www.cnblogs.com/liwen01/p/17337916.html 跳转到了&#xff1a;ONVIF协议网络摄像机&#xff08;IPC&#xff09;客户端程序开发&#xff08;1&#xff09;&#xff1a;专栏开篇_onvif 许振坪-CSDN博客 1.1原生代码支持&…

Linux——管理本地用户和组(详细介绍了Linux中用户和组的概念及用法)

目录 一、用户和组概念 &#xff08;一&#xff09;、用户的概念 &#xff08;二&#xff09;、组的概念 补充组 主要组 二、获取超级用户访问权限 &#xff08;一&#xff09;、su 命令和su -命令 &#xff08; 二&#xff09;、sudo命令 三、管理本地用户账户 &…

ERROR: Cannot find command ‘git’- do you have ‘git’ installed and in your PATH?

ERROR: Cannot find command ‘git’- do you have ‘git’ installed and in your PATH? 目录 ERROR: Cannot find command ‘git’- do you have ‘git’ installed and in your PATH? 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/61780…

Transformer自然语言处理实战pdf阅读

一.第一章 欢迎来到transformer的世界 1.解码器-编码器框架 在Transformer出现之前&#xff0c;NLP的最新技术是LSTM等循环架构。这些架 构通过在神经网络连接使用反馈循环&#xff0c;允许信息从一步传播到另一 步&#xff0c;使其成为对文本等序列数据进行建模的理想选择。如…

图片检查 python脚本

图片检查 python脚本 import os from PIL import Imagedef is_image_broken(image_path):try:img Image.open(image_path)img.verify() # Verify that it is, in fact an imagereturn Falseexcept (IOError, SyntaxError) as e:return Truedef check_images_in_directory(di…

Unity分享:继承自MonoBehaviour的脚步不要对引用类型的字段在声明时就初始化

如果某些字段在每个构造函数中都要进行初始化&#xff0c;很多人都喜欢在字段声明时就进行初始化&#xff0c;对于一个非继承自MonoBehaviour的脚步&#xff0c;这样做是没有问题的&#xff0c;然而继承自MonoBehaviour后就会造成内存的浪费&#xff0c;为什么呢&#xff1f;因…

多模态大模型应用中的Q-Former是什么?

多模态大模型应用中的Q-Former是什么&#xff1f; Q-Former是一种新型的神经网络架构&#xff0c;专注于通过查询&#xff08;Query&#xff09;机制来改进信息检索和表示学习。在这篇博客中&#xff0c;我们将详细探讨Q-Former的工作原理、应用场景&#xff0c;并在必要时通过…

pyqt designer使用spliter

1、在designer界面需要使用spliter需要父界面不使用布局&#xff0c;减需要分割两个模块选中&#xff0c;再点击spliter分割 2、在分割后&#xff0c;再对父界面进行布局设置 3、对于两边需要不等比列放置的&#xff0c;需要套一层 group box在最外层进行分割

大数据学习之Flink基础

Flink基础 1、系统时间与时间时间 系统时间&#xff08;处理时间&#xff09; 在Sparksreaming的任务计算时&#xff0c;使用的是系统时间。 假设所用窗口为滚动窗口&#xff0c;大小为5分钟。那么每五分钟&#xff0c;都会对接收的数据进行提交任务. 但是&#xff0c;这里有…

GoogleCTF2023 Writeup

GoogleCTF2023 Writeup Misc NPC Crypto LEAST COMMON GENOMINATOR? Web UNDER-CONSTRUCTION NPC A friend handed me this map and told me that it will lead me to the flag. It is confusing me and I don’t know how to read it, can you help me out? Attach…

VSCode切换默认终端

我的VSCode默认终端为PowerShell&#xff0c;每次新建都会自动打开PowerShell。但是我想让每次都变为cmd&#xff0c;也就是Command Prompt 更改默认终端的操作方法如下&#xff1a; 键盘调出命令面板&#xff08;CtrlShiftP&#xff09;中,输入Terminal: Select Default Prof…

Hisilicon 适配新遥控器

Hisilicon 适配新遥控器 适配NEC红外遥控器: 相关文档: Android解决方案开发指南:输入 红外驱动使用说明及注意事项 Application Notes HMS 开发指南:IR HMS sample 使用指南:IR 1、查看公版遥控器 sample_ir 没有此命令,不是没有编译打开,而是名字变成ir_user:…

Java 中的Stream流

Stream流就像工厂中的流水线操作。 如何使用Stream&#xff1f; 1、首先要获取Stream流&#xff0c;那么如何获取呢? 对于不同的数据&#xff0c;有不同的获取方法。 ①单列集合 方法名说明default Stream<E> stream()Collection接口中的默认方法 所以实现了Colle…

Multi Range Read与Covering Index是如何优化回表的?

上篇文章末尾我们提出一个问题&#xff1a;有没有什么办法可以尽量避免回表或让回表的开销变小呢&#xff1f; 本篇文章围绕这个问题提出解决方案&#xff0c;一起来看看MySQL是如何优化的 回表 为什么会发生回表&#xff1f; 因为使用的索引并没有整条记录的所有信息&…

使用shell脚本在Linux主机上创建一个admin账号,并将uid配置为特定值

#!/bin/bash #说明&#xff1a;在当前主机上创建一个admin账号&#xff0c;将uid设置为1101&#xff1b; #如果账号已存在&#xff0c;则要判断uid是否为1101&#xff0c;不是的话则配置为1101&#xff1b; #如果系统中已存在其它账号使用了1101这个uid&#xff0c;则要提前变更…

AI学习指南机器学习篇-半监督聚类Python实践

AI学习指南机器学习篇-半监督聚类Python实践 在机器学习领域&#xff0c;聚类是一种常见的算法&#xff0c;它可以帮助我们对数据进行分组和分类。而在现实世界中&#xff0c;我们往往会面临一种情况&#xff1a;我们拥有一些有标签的数据&#xff08;已知类别&#xff09;&am…