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

vue-2 指令:

指令

什么是html属性:就是用来扩展html标签的功能,属性是写在html的开发标签中:属性=“属性值”,

指令就是用来扩展在vue中标签的功能

{{}} :模板语法,文本插值

不可解析html标签

{{ 可以写变量,常量,表达式}} :undefined和null写了不会渲染到页面

就是把表达式(通过计算返回结果的公式)放到页面中进行展示

v-cloak :解决刷新页面时出现{{ }},一般写在根组件上,id="app"上,必须手动添加css代码

    - 使得 {{}} 刷新不让用户看见- 直到编译完成前,`<div>` 将不可见- 必须手工添加css代码- 适用于多个元素<div id="app" v-cloak>{{msg}}</div><script>new Vue({el: '#app',data: {msg: '欢迎Vue!'}})</script><style> [v-cloak]display:none;}</style>   

v-text:文本指令

  • 不可解析html标签

  • <元素 v-text='变量,常量,表达式'></元素>

  • vue3警告,会覆盖掉标签中的内容

v-html:解析HTML标签或特殊符号

  • 可以解析html标签

  • <元素 v-html='变量,常量,表达式'></元素>

  • vue2会覆盖掉标签中的内容

  • vue3警告,会覆盖

template标签:<!-- 它是一个标签,但是不会显示到页面 -->

<template v-if="age>18"> 成年人的世界,你懂得~ </template>

v-once:元素内容首次加载时动态显示

  • <元素 v-once>{{...}}</元素>

v-pre:不想编译内容:{{}}

  • <元素 v-pre>xxx{{xxx}}xx</元素>

v-bind :绑定数据和元素属性

  • v-bind: 属性名=""    

  • 简写带冒号:属性名=""

    <div id="app"><!-- 基本绑定样式 --><p class="active">白日依山尽</p><p :class="'active'">白日依山尽</p><p :class="x">白日依山尽</p><p :class="flag?x:''">白日依山尽</p><!-- 对象的方式 --><p :class="{active:false,border:true}">黄河入海流</p><!-- 数组的方式 --><p :class="['active','border']">欲穷千里目</p><!-- style绑定 --><p :style="{backgroundColor:'red',fontSize:'28px'}">更上一层楼</p><p :style="{backgroundColor:z}">更上一层楼</p></div>

v-show 标签显示和隐藏

v-show原理:css方式通过控制display: none/block来控制标签的显示和隐藏:适用于频繁切换

v-if、v-else-if、v-else 标签的创建和删除

v-if的原理:通过创建和销毁dom节点来控制元素显示和隐藏。 true 添加 false 移除:耗性能

:使用的使用js中创建(document.createElement())和删除(ele.remove() )

<元素1 v-if="条件1">
<元素2 v-else-if="条件2">
...
<元素n v-else>紧挨着写,不能插入其他元素

v-if和v-show区别

v-show 作用:css方式通过控制display: none/block来控制标签的显示和隐藏:适用于频繁切换

v-if的原理:通过元素的创建和销毁来控制元素显示和隐藏。 true 添加 false 移除:耗性能

性能:

  1. v-if切换一次就耗费一次性能

  2. v-show,只是初始显示时耗费一次性能

安全性(权限控制会体现):v-if要高于v-show

支持写在template标签上

  1. v-if支持

  2. v-show不支持    

v-for <!-- 口诀:想让谁出现多次,就把v-for写在谁身上 -->

  • for in 遍历数组获得的是(值,下标),遍历对象获得的是(键值,健名,下标)

  • 语法 v-for="(遍历的值,遍历的下标) in 你要便利的数据"

    • // 语法一:遍历数字: // v-for = "item in 数字" :key='唯一的, 有id用id,没有id使用index'

    • // 语法二:遍历数组 // v-for = "(item,index) in data中的数组" :key='唯一的, 有id用id,没有id使用index'

    • // 语法三:遍历对象 // v-for = "(value,key,index)in data中的对象" :key='唯一的, 有id用id,没有id使用index'。value是键值,key是键名,index索引

    • 带key, 提高for循环的效率

v-if和v-for的优先级

vue2中:v-for的优先级高于v-if

vue3中:v-if的优先级更高v-for

注意:v-if和v-for尽量不要写在一个标签上

v-on:绑定事件监听器

/* 绑定事件的语法:v-on:事件名= "少量的js代码(要求代码是赋值语法)"v-on:事件名= "函数名"v-on:事件名= "函数名(参数)"简写:@事件名 =  "少量的js代码(要求代码是赋值语法)"@事件名 =  "函数名"@事件名 =  "函数名(参数)"事件对象如何获取:如何阻止事件的默认行为 e.preventDefault()1. 调用时不传参数时,默认就在第一个形参位置就是事件对象2. 调用时传递参数时,需要手动的 把事件对象$event 放在最后一个参数位置事件修饰符:@事件名.prevent = '事件处理函数'@事件名.stop = '事件处理函数'@事件名.prevent.stop = '事件处理函数'特殊的事件如keyup 事件按键修改符:@keyup.enter = '事件处理函数'   抬起时并按下了回车键,就会指向事件处理函数.enter.delete (捕获“Delete”和“Backspace”两个按键).space (空格键).up   (上箭头).down  (下箭头).left   (左箭头).right   (右箭头)配合功能键:.ctrl 键.alt 键.shift 键.meta 键需求: 按下enter键的同时按下ctrl键@keyup.ctrl.enter = ''
*/

v-model 在表单元素中进行双向绑定:唯一 一个双向绑定

文本类型的 <input> 和 <textarea> 元素会绑定 value默认值

文本类型的 <input> 和 <textarea> 元素会绑定 value默认值

<input type="text" v-model.number="text">

默认情况下 只要给输入框绑定了v-model 那么修改内容的时候 边修改内容会跟这变

但是有些时候 我们想修改完成内容再变 当change事件的时候才会修改内容

<input type="checkbox"  v-model="checked" />{{checked}}   //true或者false根据复选状态

data变量的类型分两大类(input中)
   data变量的值的类型是数组,  v-model关联的值是  以数组形式 包含所有选中的value的值
   data变量的值的类型是非数组, v-model关联的值是 布尔类型的值 (true,false) (使用频率高)

<select v-model='data中变量'>v-model关联的是选中的选项

在普通表单元素上用v-model 实现对表单元素的双向绑定

在自定义组件上用v-model 实现对子组件内容的双向绑定

相关文章:

vue-2 指令:

指令 什么是html属性&#xff1a;就是用来扩展html标签的功能&#xff0c;属性是写在html的开发标签中&#xff1a;属性“属性值”&#xff0c; 指令就是用来扩展在vue中标签的功能 {{}} &#xff1a;模板语法&#xff0c;文本插值 不可解析html标签 {{ 可以写变量&#x…...

非常提效的7款原型工具推荐

原型图工具允许在开发前进行测试和迭代过程&#xff0c;可以帮助节省大量的开发时间和成本。在本文中&#xff0c;我们盘点了7个易于使用的原型图工具&#xff0c;以提高您的生产力&#xff01; 1.即时设计 即时设计是一款免费的在线 UI 设计工具&#xff0c;无系统限制&…...

最新Kafka和RabbitMQ消息队列经典面试题汇总(含答案)

最新Kafka和RabbitMQ消息队列经典面试题汇总 1.消息队列的应用场景有哪些?2.RabbitMQ 有哪些优点?3.RabbitMQ 有哪些重要的角色?4.RabbitMQ 有哪些重要的组件?它们有什么作用?5.什么是消息持久化?6.RabbitMQ 要实现消息持久化,需要满足哪些条件?7.消息持久化有哪些缺点…...

软件测试行业对新人友好吗?

软件测试真的算是对新人小白非常友好的学科了&#xff0c;但是你也千万不要抱有幻想&#xff0c;觉得轻轻松松就能掌握真正的技能&#xff0c;然后如愿找到高薪工作。从0到1还是需要一个过程的&#xff0c;也是需要你付出相当大的努力去学习的 随着人工智能时代的到来&#xf…...

Python requests 模块

Python中的requests模块是一个HTTP客户端库&#xff0c;它允许您向任何Web服务器发送HTTP请求并获取响应。 下面是一个简单的示例&#xff0c;向某个网站发送一个HTTP GET请求&#xff1a; python import requests response requests.get("http://www.example.com&quo…...

IOC理论推导

1.UserDao接口 package com.kuang.dao;public interface UserDao {void getUser(); }2.UserDaoImpl业务接口 package com.kuang.dao;public class UserDaoImpl implements UserDao{Overridepublic void getUser() {System.out.println("默认获取用户数据");} }3.Us…...

我的一些感悟

记录一些感悟&#xff0c;不定时更新 当面临稍微突发的情况时&#xff0c;感到慌乱&#xff1b;遭遇一点挫折时&#xff0c;情绪低落&#xff1b;面对问题&#xff0c;不是首先思考解决办法&#xff0c;而是抱怨不已。这种心态基本上无法取得成功 做事雷厉风行&#xff0c;需要…...

NC 人力薪酬管理怎么结账?

NC 人力薪酬管理结账流程 1、先在【薪资发放】节点选择相应的薪资方案进行查询操作&#xff0c;然后进行计算操作&#xff1b; 2、计算操作完后&#xff0c;再进行审核操作&#xff1b; 3、如果薪资方案勾选了“发放数据需要审批”属性&#xff0c;则需要在【发放申请】节点…...

JavaWeb编程面试题——Spring Boot

目录 引言一、面试题导航二、面试题目1.什么是SpringBoot&#xff1f;2.谈谈你对SpringBoot的理解&#xff1f;3.为什么需要SpringBoot&#xff1f;4.SpringBoot的配置文件有哪几种格式&#xff1f;5.SpringBoot支持哪些日志框架&#xff1f;推荐和默认的日志框架是哪个&#x…...

Educational Codeforces Round 148 (Rated for Div. 2) A,B,C

A. New Palindrome 要求&#xff1a;对于一个回文串&#xff0c;判断是否可以转换为其他回文串 思路&#xff1a;如果回文串的前一半存在不相同的字符&#xff0c;就可以转换 #include<bits/stdc.h> using namespace std;int n; string s;void solve(){cin>>s;boo…...

C#串口通信从入门到精通(15)——流量控制(XON/XOFF协议实现)

文章目录 前言1、XON/XOFF流控原理介绍2、XON/XOFF发送端C#代码实现3、XON/XOFF接收端C#代码实现前言 通信双方在一个发送能力大于接收处理能力时若不限制发方的数据流量则最终会“淹没”接收方而导致数据丢失,针对这个问题常规的有硬件流控和软件流控方法,本文介绍的就是软…...

基于Kubernetes集群构建大中型企业CICD应用平台(2)--code阶段工具gitlab安装

这里我们为gitlab服务器准备一台虚拟机&#xff1a;192.168.19.6-gitlab服务器 在code阶段&#xff0c;我们需要将不同版本的代码存储到一个仓库中&#xff0c;常见的版本控制工具就是SVN或者Git&#xff0c;这里我们采用Git作为版本控制工具&#xff0c;GitLab作为远程仓库。…...

数字化转型浪潮下,如何选择适合企业的低代码平台

近日&#xff0c;艾瑞咨询发布了《数字新生态&#xff1a;中国低代码厂商发展白皮书》&#xff08;以下简称“报告”&#xff09;&#xff0c;在该报告中&#xff0c;艾瑞咨询对中国当前的低代码市场进行了非常细致的解构&#xff0c;并针对当前企业数字化转型&#xff0c;对低…...

利用 Amazon API Gateway 和 Amazon Lambda 处理 Cloudfront 的内容请求

概述 国内 Amazon Cloudfront 目前不支持 Lambdaedge 功能&#xff0c;不能实现基于 CDN 的 A/B 测试、rewrite、redirect、token 认证和产生 response 等功能&#xff0c;本文介绍如何利用 API Gateway 和 Lambda 实现 Lambdaedge 的功能。下面实验介绍通过 request header 参…...

Parasoft和TASKING联手提供卓越的汽车软件开发和自动化测试

​​Parasoft与TASKING宣布建立合作 2023年4月26日&#xff0c;全球嵌入式软件测试解决方案领导者Parasoft宣布与汽车嵌入式软件开发工具行业领导者TASKING建立合作伙伴关系。Parasoft和TASKING的合作为汽车行业提供了一套完整的软件全生命周期解决方案&#xff0c;通过CI/CD工…...

java读取word文档内容

首先在pom文件引入依赖&#xff1a; <dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>4.0.0</version> </dependency> <dependency><groupId>org.apache.poi</groupId&g…...

使用Process Monitor排查因dll库被锁定导致C++程序启动报“0xc0000022”错误问题

目录 1、问题描述 2、查找到异常值0xc0000022对应的标识STATUS_ACCESS_DENIED 3、使用Process Monitor定位到哪个dll库被隔离了 4、在360安全卫士中将被隔离的文件恢复了&#xff0c;但360并没有释放对文件的锁定 VC常用功能开发汇总&#xff08;专栏文章列表&#xff0c;欢…...

Unity UI -- (1)概览

UI&#xff08;User Interface&#xff0c;用户接口&#xff09;&#xff0c;是让用户和计算机或计算机应用交互的接口系统。 在实时3D项目中&#xff0c;UI通常是由文本、按钮、复选框、滑动条和单选框等组合出来的界面。这些元素使用特定规则或通知和用户进行交互。 UI设计是…...

玩转 LLMs 之基础设施「利刃出鞘」

LLMs 时代已经到来&#xff0c;这个由 ChatGPT 开始的全球化技术浪潮&#xff0c;所经之处&#xff0c;风起云涌。LLMs 之于当下&#xff0c;更像是 iOS 、Android 之于移动互联网时代。开发者沸腾&#xff0c;投资机构争抢&#xff0c;与赛道相关的基础设施建设自然也成为整个…...

WPF MaterialDesign 初学项目实战(1)首页搭建

前言 最近在学WPF&#xff0c;由于人比较烂&#xff0c;有一个星期没怎么动代码了。感觉有点堕落。现在开始记录WPF项目&#xff0c;使用MaterialDesignInXamlToolkit。 环境搭建 如果没下载MaterialDesign 的源码 github源码运行 在Nuget里面引入MaterialDesign Materia…...

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

Java求职者面试指南:计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...

Qt 事件处理中 return 的深入解析

Qt 事件处理中 return 的深入解析 在 Qt 事件处理中&#xff0c;return 语句的使用是另一个关键概念&#xff0c;它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别&#xff1a;不同层级的事件处理 方…...