前端核心框架Vue指令详解

目录

▐ 关于Vue指令的介绍

▐ v-text与v-html

▐ v-on

▐ v-model

▐ v-show与v-if

▐ v-bind

▐ v-for


▐ 前言:在学习Vue框架过程中,大家一定要多参考官方API !

Vue2官方网址icon-default.png?t=N7T8https://v2.cn.vuejs.org/v2/guide/

关于Vue指令的介绍

Vue指令是Vue.js框架中用于操作DOM元素的一种机制。指令提供了一种便捷的方式,可以在DOM元素上附加自定义行为。Vue指令的基本语法是v-后跟指令名,例如v-ifv-forv-bind等。指令可以接受一个或多个参数,并且可以包含表达式,这些表达式会在指令绑定的元素上求值。Vue指令的参数和表达式提供了灵活的数据绑定和事件处理机制,使得开发者能够更加高效地操作DOM和响应数据变化。


▐ v-text与v-html

v-text 和v-html 都会覆盖标签体中的内容 (插值表达式插入变量,不会覆盖标签体中的内容 )

但v-text 会把内容当做文本来处理,v-html 会把内容当做html 内容处理,可以解析标签。

		<div id="app"><p>{{ message }}Vue</p><p v-text="message">Vue</p><p v-html="message">Vue</p></div><script>var app = new Vue({el: '#app',data: {message: '<b>Hello</b>'}})</script>


▐ v-on

v-on用于监听DOM事件,可以简写为@,用于在元素上监听原生事件,并在触发时执行一些JavaScript代码。

		<div id="app"><input type="button" value="触发" v-on:click="test()"/><p>{{message}}</p></div><script>var app = new Vue({el: '#app',data: {message: ''},methods:{test(){this.message="触发";}}})</script>


▐ v-model

v-model用于双向数据绑定,一般用在表单输入和应用状态之间建立双向绑定。

		<div id="app"><input type="text" v-model="message"/><p>{{message}}</p></div><script>var app = new Vue({el: '#app',data: {message: ''}})</script>


 ▐ v-show与v-if

v-if 和 v-show用于条件渲染,根据条件决定是否显示或隐藏元素。v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

• v-show 本质是通过控制标签的display属性来隐藏/显示标签的,效率高
• v-if 本质是通过dom元素来切换,让标签直接从网页删掉,显示时再重新创建标签,效率低 

		<div id="app"><img v-show="isShow" src="img/lisa.jpg" /><img v-if="isShow" src="img/lisa.jpg" /><input type="button" @click="oper()" value="隐藏/显示" /></div><script>var app = new Vue({el: '#app',data: {isShow: true},methods: {oper() {this.isShow = !this.isShow;}}})</script>


▐ v-bind

v-bind用于绑定属性,可以简写为:,用于动态地绑定一个或多个属性,或一个组件 prop 到表达式。

		<div id="app"><img v-bind:src="imgsrc[index]"  /><input type="button" value="切换" @click="oper()" /></div><script>var app = new Vue({el: '#app',data: {imgsrc:["img/lisa.jpg","img/金珍妮.jpg","img/金智秀.jpg"],index:0},methods:{oper(){if(this.index==2){this.index=0;}else{this.index++;}}}})</script>

•  v-bind:属性名 = "变量名"  , 一旦为属性添加v-bind,值就是一个在data中定义的变量了

•  还可以简写为   : 属性名


▐ v-for

v-for用于列表渲染,可以基于源数据多次渲染一个元素或模板,通常循环遍历数组或对象。

		<div id="app"><ul><li v-for="user in users">姓名:{{user.name}}年龄:{{user.age}}性别:{{user.gender}}</li></ul></div><script>var app = new Vue({el: '#app',data: {users:[{name:"Tom",age:16,gender:"男"},{name:"Jim",age:18,gender:"女"},{name:"Lie",age:20,gender:"女"}]}})</script>

 


希望这篇关于 Vue常用指令的介绍 能对大家有所帮助,欢迎大佬们留言或私信与我交流~~

学海漫浩浩,我亦苦作舟!大家一起学习,一起进步!

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

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

相关文章

免费制作流程图网页版本

超级好用的5个免费在线版流程图制作网站_流程图网站-CSDN博客

汽车IVI中控开发入门及进阶(三十):视频图像滚动问题分析(imx6+TVP5150+Camera)

前言: DA主控SOC采用imx6,TVP5150作为camera摄像头视频的解码decode芯片,imx6采用linux系统。 关于imx6,请参阅:汽车IVI中控开发入门及进阶(二十九):i.MX6-CSDN博客 Contributor III:

multiprocessing多进程计算及与rabbitmq消息通讯实践

1. 需求与设计 我所设计的计算服务旨在满足多个客户对复杂计算任务的需求。由于这些计算任务通常耗时较长且资源消耗较大&#xff0c;为了优化客户体验并减少等待时间&#xff0c;我采取了并行计算的策略来显著提升计算效率。 为实现这一目标&#xff0c;我计划利用Python的m…

Vue的移动端开发:使用Vue和相关技术,例如Weex或者Nativescript,进行移动端开发

介绍 Vue.js Vue.js 的核心概念和特性: 响应式数据绑定:Vue.js 的一个核心特性就是其响应式数据绑定系统,这意味着当数据更新时,所有运用到这些数据的地方都会适时地更新。组件化:Vue.js 很大程度上依赖于组件化,这意味着你可以创建可重复使用的代码片段,显著提高开发效…

基于Java实训中心管理系统设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f; 感兴趣的可以先收藏起来&#xff0c;…

实现具有多个实现类的接口并为每个实现类定义一个名字的方法

在Java中&#xff0c;实现具有多个实现类的接口并为每个实现类定义一个名字的方法&#xff0c;可以通过使用工厂模式或服务定位器模式来完成。以下是使用工厂模式的一个示例&#xff1a; 定义接口和实现类 首先&#xff0c;定义一个接口和多个实现类&#xff1a; // 接口 publ…

获取当前的域名与端口

在JavaScript中&#xff0c;你可以使用window.location对象来获取当前页面的URL&#xff0c;并从中提取域名和端口。但是&#xff0c;请注意&#xff0c;如果端口是默认的&#xff08;例如&#xff0c;HTTP的80或HTTPS的443&#xff09;&#xff0c;则URL中可能不包含端口号。 …

EasyExcel导入导出Excel数据

EasyExcel 是阿里巴巴开源的一个用于读写Excel文件的Java库。它提供了简单的API&#xff0c;可以方便地操作Excel文件&#xff0c;特别适合处理大数据量的Excel文件。 EasyExcel的主要特点: 高性能&#xff1a;设计用于高效处理大数据量。内存管理&#xff1a;采用流模式读写…

堆(数据结构篇)

数据结构之堆(优先队列) 二叉堆 概念&#xff1a; 优先队列是一个根据优先性而先去执行操作的一种特殊队列&#xff0c;平常队列是先进先出&#xff0c;但是优先队列是根据优先级选择先出的元素。优先队列的主要操作有插入和删除最小值 堆(heap)通常是指二叉堆&#xff0c;因…

碳化硅陶瓷膜的生产工艺和应用

一、生产工艺 碳化硅陶瓷膜的生产工艺多样&#xff0c;其中浸渍提拉法和喷涂法为两大主流技术。 浸渍提拉法 浸渍提拉法是一种广泛应用的制备方法。其过程主要包括&#xff1a;先将陶瓷颗粒或者聚合物前体分散在水或有机溶剂中&#xff0c;形成均质稳定的制膜液。随后&#xff…

Jenkins macos 下 failed to create dmg 操作不被允许hdiutil: create failed - 操作不被允许?

解决方案&#xff1a; 打开设置&#xff0c;选择“隐私与安全”&#xff0c;选择“完全磁盘访问权限”&#xff0c;点击“”&#xff0c;选择jenkins的路径并添加。 同理&#xff0c;添加java的访问权限。

Python14 面向对象编程

1.什么是面向对象编程OOP Python的面向对象编程&#xff08;Object-Oriented Programming&#xff0c;简称OOP&#xff09;是一种编程范式&#xff0c;它使用“对象”来设计应用程序和计算机程序。这些对象由数据和能够操作这些数据的方法组成。面向对象编程的主要目标是提高软…

Scala入门介绍

Scala 是一种强大的多范式编程语言&#xff0c;旨在融合面向对象编程和函数式编程的特性。它运行在 Java 虚拟机&#xff08;JVM&#xff09;上&#xff0c;因此可以无缝地与 Java 库进行交互。以下是对 Scala 的入门介绍&#xff0c;并附带了一些基本代码示例。 环境设置 首先…

Webpack4从入门到精通以及和webpack5对比_webpack现在用的是哪个版本

3.1 打包样式资源css-loader、style-loader… {// 匹配哪些文件test: /\.less$/,// 使用哪些loader进行处理use: [// use数组中loader执行顺序&#xff1a;从右到左&#xff0c;从下到上&#xff0c;依次执行(先执行css-loader)// style-loader&#xff1a;创建style标签&#…

HTML内容回顾

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> </head> <body><!--HTML标签&#xff1a;“标题标签 h1-h6段落标签 p换行 br水平分割线 hr空格 加粗 <…

Total CAD Converter与Total Excel Converter软件分享

1.软件介绍 Total CAD Converter Total CAD Converter 是一款功能强大的工具&#xff0c;能够将 CAD 文件转换为多种格式&#xff0c;如 PDF、TIFF、JPEG、BMP、WMF、PNG、DXF、BMP、CGM、HPGL、SVG、PS 和 SWF 等。其支持的源格式丰富多样&#xff0c;包括 dxf、dwg、dwf、d…

leetcode 面试题 08.12. 八皇后

. - 力扣&#xff08;LeetCode&#xff09; 设计一种算法&#xff0c;打印 N 皇后在 N N 棋盘上的各种摆法&#xff0c;其中每个皇后都不同行、不同列&#xff0c;也不在对角线上。这里的“对角线”指的是所有的对角线&#xff0c;不只是平分整个棋盘的那两条对角线。 注意&a…

达梦数据统计库表中的数据量

1、创建存储表数据的表结果 create table sysdba.table_count (owner varchar(100),table_name varchar(100),cnt int); 2、创建统计表的存储过程&#xff08;上千万表&#xff0c;可能存在性能慢的问题&#xff09; create or replace procedure sysdba.cut_table_number A…

【C++】一个极简但完整的C++程序

一、一个极简但完整的C程序 我们编写程序是为了解决问题和任务的。 1、任务&#xff1a; 某个书店将每本售出的图书的书名和出版社&#xff0c;输入到一个文件中&#xff0c;这些信息以书售出的时间顺序输入&#xff0c;每两周店主会手工计算每本书的销售量、以及每个出版社的…

Java 的多线程和并发处理,在项目中是如何使用它?

在Java开发中&#xff0c;多线程和并发是我们经常需要处理的问题。它们能够让我们的应用在完成一些耗时任务的同时&#xff0c;仍然保持对用户的响应&#xff0c;提高了应用的性能和用户体验。接下来&#xff0c;让我们来详细地了解一下Java中的多线程和并发处理。 Java中的多线…