Vue中常用指令简介

一. V-html

作用:更新元素的innerHTML,拥有响应式的特点,即数据驱动视图,解析标签,作用类似于js中获取dom对象,然后再进行innerHTML赋值。

展示了一下v-html解析标签的特点,这算是和插值表达式{{ }}的不一样的地方。

总结:需要解析标签就用v-html,单纯的数据展示就用插值表达式{{ }}就行。


二.v-show和v-if还有v-else-if和v-else

v-show

1.作用 控制元素显隐藏

2.语法格式 v-show="表达式" 表达式值为true则显示,反之则不显示。 

3.原理 主要通过css中的display属性的改变来控制显隐藏。下图展示原理

通过检查可以看到盒子上被加了一个display:none,这是v-show的显示和隐藏的原理。

总结:主要通过css来控制元素显隐藏,v-show适用于需要频繁切换显隐藏的地方使用。

v-if

1.作用 控制元素显隐藏

2.语法格式 v-if="表达式" 表达式值为true则显示,反之则不显示。 

3.原理 通过操作节点的创建或删除来控制显隐藏,下图展示原理。

检查可以看到v-if控制的div元素节点已被删除。

总结:主要通过元素节点的创建和删除来控制元素显隐藏,v-if适用于不需要频繁切换显示和隐藏的地方使用,否则会由于频繁操作dom而导致性能下降。

v-else-if和v-else

1.作用 辅助v-if进行条件渲染

2.用法 参考C语言中if,else if,else的用法,类比v-if,v-else-if,v-else。


三.v-on

1.作用 注册事件,并提供对应的处理逻辑。

2.用法 v-on:事件名="简单的逻辑处理语句" 或 v-on:事件名="逻辑处理函数" (函数应是methods中定义的函数)也可以简写为 @事件名="逻辑处理"

下面是一些常见的事件名

  1. 点击事件

    • click:用于点击操作。
    • dblclick:用于双击操作。
  2. 鼠标事件

    • mousedown:鼠标按下。
    • mouseup:鼠标释放。
    • mousemove:鼠标移动。
    • mouseover:鼠标移入。
    • mouseout:鼠标移出。
    • mouseenter:鼠标移入(不冒泡)。
    • mouseleave:鼠标移出(不冒泡)。
  3. 键盘事件

    • keydown:键盘按下。
    • keyup:键盘释放。
    • keypress:键盘按下并释放(某些浏览器中可用)。
  4. 表单事件

    • change:表单元素值改变时触发。
    • input:在输入字段里输入数据时触发。
    • focus:元素获得焦点时触发。
    • blur:元素失去焦点时触发。
    • submit:表单提交时触发。
  5. 滚动事件

    • scroll:元素滚动时触发。
  6. 拖放事件

    • dragstart:开始拖动元素时触发。
    • dragover:元素在另一个元素上拖动时触发。
    • drop:元素被放下时触发。
    • dragenter:元素进入另一个元素时触发。
    • dragleave:元素离开另一个元素时触发。
  7. 其他事件

    • load:当页面或图片加载完成时触发。
    • unload:当页面即将卸载时触发。
    • error:当在加载过程中发生错误时触发。

四.v-bind

1.作用 动态渲染html的标签属性,例如src,title等等

2.语法  v-bind:属性名="表达式" 也可以简写为 :属性名="表达式"


五.v-for

1.作用 根据数据进行多次渲染,多次渲染整个元素。

2.语法 v-for="(item,index) in 数组" item为每一项,index为数组下标,用不到index也可以不写。

下面是一个例子

另外v-for通常和key属性一起用

用法:  :key="唯一标识" 

作用: 给渲染的每一个元素添加唯一标识,便于vue进行正确的排序复用,一般以后台数据中得到的id为唯一标识。具体可以了解一下v-for的循环渲染复用机制。


五.v-model

1.作用 

在 Vue 中,v-model 主要用于在表单元素(如 <input><textarea><select> 等)上创建双向数据绑定。它的作用是实现视图(页面上显示的内容)和模型(Vue 实例中的数据)之间的自动同步更新。当用户在表单元素中输入或修改内容时,对应的模型数据会自动更新;反之,当模型数据发生变化时,表单元素中的显示内容也会自动更新。

2.用法

v-model="变量"


其他不常用的可以到 vue2官网 中的API去查找用法

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

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

相关文章

【网络安全的神秘世界】文件包含漏洞

&#x1f31d;博客主页&#xff1a;泥菩萨 &#x1f496;专栏&#xff1a;Linux探索之旅 | 网络安全的神秘世界 | 专接本 | 每天学会一个渗透测试工具 一、概述 文件包含&#xff1a;重复使用的函数写在文件里&#xff0c;需要使用某个函数时直接调用此文件&#xff0c;而无需再…

【Linux】生产者消费者模型 + 线程池的介绍和代码实现

前言 上节我们学习了线程的同步与互斥&#xff0c;学习了互斥锁和条件变量的使用。本章我们将学习编程的一个重要模型&#xff0c;生产者消费者模型&#xff0c;并且运用之前学的线程同步和互斥的相关接口来实现阻塞队列和环形队列&#xff0c;最后再来实现一个简易的线程池。 …

国科大作业考试资料《人工智能原理与算法》2024新编-第十三次作业整理

1、假设我们从决策树生成了一个训练集&#xff0c;然后将决策树学习应用于该训练集。当训练集的大小趋于无穷时&#xff0c;学习算法将最终返回正确的决策树吗&#xff1f;为什么是或不是&#xff1f; 本次有两个参考&#xff1a; 参考一&#xff1a; 当训练集的大小趋于无穷…

普中51单片机:蜂鸣器的简单使用(十一)

文章目录 引言蜂鸣器的分类工作原理无源蜂鸣器压电式蜂鸣器&#xff1a;电磁式蜂鸣器&#xff1a; 电路符号及应用代码演示——无源蜂鸣器 引言 蜂鸣器是一种常见的电子音响器件&#xff0c;广泛应用于各种电子产品中。它们能够发出不同频率的声音&#xff0c;用于警报、提醒、…

整数二分详解【附带PPT】

#include<bits/stdc.h> using namespace std; int n,a[1001],k;int b_search1(int l,int r,int k){while(l<r){int mlr1>>1;//检查是否满足橙色性质 if(a[m]<k) lm;else rm-1;}//循环结束l和r同时指向边界 return l; }int b_search2(int l,int r,int k){whil…

【Linux】进程间通信(1):进程通信概念与匿名管道

人与人之间是如何通信的&#xff1f;举个简单的例子&#xff0c;假如我是月老&#xff0c;我要为素不相识的但又渴望爱情的男女两方牵红线。我需要收集男方的信息告诉女方&#xff0c;收集女方的信息告诉男方&#xff0c;然后由男女双方来决定是否继续。对于他们而言&#xff0…

Python | Leetcode Python题解之第275题H指数II

题目&#xff1a; 题解&#xff1a; class Solution:def hIndex(self, citations: List[int]) -> int:n len(citations)left 0; right n - 1while left < right:mid left (right - left) // 2if citations[mid] > n - mid:right mid - 1else:left mid 1retur…

【Linux C | 网络编程】进程池大文件传输的实现详解(三)

上一篇实现了进程池的小文件传输&#xff0c;使用自定义的协议&#xff0c;数据长度数据本身&#xff0c;类似小火车的形式&#xff0c;可以很好的解决TCP“粘包”的问题。 【Linux C | 网络编程】进程池小文件传输的实现详解&#xff08;二&#xff09; 当文件的内容大小少于…

html+css 动态效果

1.波浪效果 <div class"sitesingle"></div> <style>.sitesingle{display:flex;justify-content:space-between;align-items:stretch;overflow:hidden;position:relative;height: 400px;}keyframes bgRotate{0%{transform:rotate(0deg)}to{transfor…

基于关联规则的分类算法(CBA) | 项集、频繁项集、关联规则 | arulesCBA库

基于关联规则的分类算法 目前使用较多且较为简洁的关联规则分类算法是基于关联规则的分类算法&#xff08;Classification Based on Association, CBA&#xff09;&#xff0c;下面将从该算法的相关概念开始介绍。 这部分笔记参考论文&#xff1a;孙菡悦.基于多因素交互效应的…

C++的STL简介(一)

目录 1.什么是STL 2.STL的版本 3.STL的六大组件 4.string类 4.1为什么学习string类&#xff1f; 4.2string常见接口 4.2.1默认构造 ​编辑 4.2.2析构函数 Element access: 4.2.3 [] 4.2.4迭代器 ​编辑 auto 4.2.4.1 begin和end 4.2.4.2.regin和rend Capacity: 4.2.5…

repo中的default.xml文件project name为什么一样?

文章目录 default.xml文件介绍为什么 name 是一样的&#xff0c;path 不一样&#xff1f;总结 default.xml文件介绍 在 repo 工具的 default.xml 文件中&#xff0c;定义了多个 project 元素&#xff0c;每个元素都代表一个 Git 仓库。 XML 定义了多个不同的 project 元素&…

树和二叉树(不用看课程)

1. 树 1.1 树的概念与结构 树是⼀种非线性的数据结构&#xff0c;它是由 n&#xff08;n>0&#xff09; 个有限结点组成⼀个具有层次关系的集合。把它叫做树是因为它看起来像⼀棵倒挂的树&#xff0c;也就是说它是根朝上&#xff0c;而叶朝下的。 • 有⼀个特殊的结点&am…

GD32相较于STM32的优劣势-完全总结

优势 1.更高的主频 GD32单片机的主频可以达到108MHz&#xff0c;‌而STM32的最大主频为72MHz&#xff0c;‌这意味着GD32在代码执行速度上具有优势&#xff0c;‌适合需要快速处理数据的场景 2.更低的内核电压 GD32的内核电压为1.2V&#xff0c;‌而STM32的内核电压为1.8V。…

《系统架构设计师教程(第2版)》第12章-信息系统架构设计理论与实践-05-信息系统架构案例分析

文章目录 1. 价值驱动的体系结构——连接产品策略与体系结构1.1 价值模型1&#xff09;概述2&#xff09;价值驱动因素3&#xff09;传统方法识别价值模型的缺陷&#xff08;了解即可&#xff09; 1.2 体系结构策略&#xff08;挑战&#xff09;1&#xff09; 优先级的确定2&am…

【C++】动态内存管理与模版

目录 1、关键字new&#xff1a; 1、用法&#xff1a; 2、理解&#xff1a; 3、与malloc的相同与不同&#xff1a; 1、相同&#xff1a; 2、不同&#xff1a; 2、模版初阶&#xff1a; 1、函数模版&#xff1a; 1、概念&#xff1a; 2、关键字&#xff1a;template&…

微信公众号获取用户openid(PHP版,snsapi_base模式)

微信公众号获取用户openid的接口有2个&#xff1a;snsapi_base、snsapi_userinfo 详情见微信公众号开发文档&#xff1a;https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html 本文介绍用PHP方式调用snsapi_base接口获取微信用户…

苦学Opencv的第十一天:图像的形态学操作

Python OpenCV从入门到精通学习日记&#xff1a;图像的形态学操作 前言 图像形态学是图像处理中的一个重要分支&#xff0c;主要关注图像中物体的形状和结构。通过形态学操作&#xff0c;我们可以对图像进行有效的分析和处理&#xff0c;例如图像的腐蚀与膨胀、开运算与闭运算…

ansible基础讲解和加密文件讲解

ansible最重要的三个文件 /etc/ansible/ansible.cfg #####ansible的配置文件 /etc/ansible/host ##清单文件inventory ansible-navigator.yml ####以yml结尾的文件可以理解为conf结尾的文件&#xff0c;是配置文件&#xff0c;用于设置剧本playbook playbook讲解 以.yml结…

vue3中计算属性

假如需要修改,需要使用get,set let a ref(111) import {computed} from vue let changeimg computed({get(){return a},set(val){a.value val}}) 如果不需要修改 let a ref(111) import {computed} from vue let changeimg computed(() >{return a })