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

【Vue】基本交互指令

Vue

el挂载点

<div id="app">{{message}}
</div>
<script>var app = new Vue({el:"#app",data:{message:"hello"}})
</script>
  • Vue实例的作用范围:管理el选项命中的元素及其内部的后代元素
  • 使用其他的选择器?:可以,建议用ID选择器
  • 设置其他的dom元素?:可以使用双标签,不能使用HTML和BODY

data数据对象

  • Vue中用到的数据定义在data中
  • data中可以写复杂类型的数据
  • 渲染复杂类型数据时,要遵守js的语法

本地应用

  • 通过Vue实现常见的网页效果
  • Vue指令:以v-开头的一组特殊语法

v-text

作用:设置标签的内容

默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容

内部支持写表达式

//全部内容
<h2 v-text="message"></h2>
//部分内容
<h2>{{message}}</h2>
//表达式,字符串拼接
<p v-text="message"+"!"></p>

v-html

作用:设置元素的innerHTML

内容中有html结构会被解析为标签

v-text无论内容是什么,只会解析为文本

解析文本使用v-text,解析html结构使用v-html

<p v-html="content"></p>
//content为超链接时,解析为超链接

v-on

作用:为元素绑定事件

事件名不需要写on

指令可以简写为:@

绑定的方法定义在methods属性中

方法内部通过this关键字可以访问定义在data中的数据

<div id="app"><input type="button" value="v-on test" @click="doit">
</dive><script>var app=new Vue({el:"#app",data:{message:"vegetable"}methods:{doit:function(){alert("do it!")this.message+="!"}}})
</script>

事件绑定的方法写成函数调用的形式,可以传入自定义参数

定义方法时,需要定义形参来接受传入的实参

事件的后面跟上 .修饰符 可以对事件进行限制

.enter 可以限制触发的按键为回车

事件修饰符有多种

<input type="text" @keyup.enter="sayhello">

v-show

作用:根据真假切换元素的显示状态

原理:修改元素的display,实现显示隐藏

内容最终解析为布尔值

true——元素显示,false——元素隐藏

数据改变后,对应元素的显示状态同步更新

v-if

作用:根据表达式的真假,切换元素的显示状态

本质:通过操纵dom元素来切换显示状态

true——元素存在于dom树中,false——从dom树中移除

频繁切换使用v-show,否则使用v-if,前者切换消耗小

v-bind

作用:为元素绑定属性

完整写法是v-bind:属性名

简写是 :属性名,即省略v-bind字样

需要动态的删增class,最好使用对象的方式

<img :class="{active:isActive}" @click="toggleActive">
//对象方法<img :class="isActive ? 'active' : ''" @click="toggleActive">
//三目运算方法

v-for

作用:根据数据生成列表结构

数组经常和v-for结合使用

语法是(item,index) in 数据

item和index可以结合其他指令一起使用

<ul><li v-for="(it,index) in arr">{{index+1}} 是 {{it}}</li>
</ul>//结合其他指令
<h2 v-for="item in arr" v-bind:title="item.name">{{item.name}}
</h2>

v-model

作用:便捷地设置和获取表单元素的值

绑定的数据会和表单元素值相关联

绑定的数据<==>表单元素的值(双向修改)

相关文章:

【Vue】基本交互指令

Vue el挂载点 <div id"app">{{message}} </div> <script>var app new Vue({el:"#app",data:{message:"hello"}}) </script>Vue实例的作用范围&#xff1a;管理el选项命中的元素及其内部的后代元素使用其他的选择器&a…...

MySQL 中的 distinct 和 group by 哪个效率更高?

结论先说大致的结论&#xff08;完整结论在文末&#xff09;&#xff1a;在语义相同&#xff0c;有索引的情况下group by和distinct都能使用索引&#xff0c;效率相同。在语义相同&#xff0c;无索引的情况下&#xff1a;distinct效率高于group by。原因是distinct 和 group by…...

Spring 框架源码(六) Bean的生命周期全流程源码解析

Spring框架作为Java王国的地基&#xff0c;我觉得它包含了很多精妙的设计&#xff0c;例如Bean工厂设计、Bean的生命周期、tx、aop、web、mvc等&#xff0c;最核心基本的Bean设计是Spring 的框架的灵魂&#xff0c;本文就Bean的生命周期全流程做源码程度上的解析&#xff0c;欢…...

运维服务商低成本提升服务质量解决方案

在信息化高速发展的今天&#xff0c;网络建设的重要性不言而喻&#xff0c;更多客户选择将运维服务外包或托管给运维服务商&#xff0c;市场需求愈大竞争压力愈大&#xff0c;想要脱颖而出势必要优化自身提高服务质量&#xff0c;最好是低成本、大提升&#xff0c;nVisual助力渠…...

Raft 一致性算法

Raft Raft提供了一种在计算系统集群中分布状态机的通用方法&#xff0c;确保集群中的每个节点都同意一系列相同的状态转换。 一个Raft集群包含若干个服务器节点&#xff0c;通常为5个&#xff0c;这允许整个系统容忍2个节点的失效。每个节点处于以下三种状态之一&#xff1a; …...

驱动程序开发:基于EC20 4G模块自动拨号联网的两种方式(GobiNet工具拨号和PPP工具拨号)

目录一、EC20 4G模块简介二、根据移远官方文档修改EC20 4G模组驱动  1、因为EC20 4G模组min-pice接口其实就是usb接口&#xff0c;因此需要修改Linux内核源码drivers/usb/serial/option.c文件&#xff0c;如下图&#xff1a;  2、根据USB协议的要求&#xff0c;需要在drive…...

Web自动化测试——常见问题篇

文章目录一、什么是自动化测试二、为啥进行自动化测试&#xff08;优点&#xff09;三、Webdriver 的工作原理四、显示等待和隐式等待的区别五、什么样的项目适合做自动化六、自动化测试的流程七、如何分析生成的自动化测试报告一、什么是自动化测试 所谓的自动化测试就是使用…...

快速实现Modbus TCP转BACnet IP协议的方案

一、需求背景 BACnet是用于智能楼宇自控系统的主流通信协议&#xff0c;可用在暖通空调系统&#xff08;HVAC&#xff0c;包括暖气、通风、空气调节&#xff09;&#xff0c;也可以用在照明控制、门禁系统、火警侦测系统及其相关的设备。楼宇中的受控设备都通过BACnet协议连接到…...

Unity CircleLayoutGroup 如何实现一个圆形自动布局组件

文章目录简介实现原理Editor 编辑器简介 Unity中提供了三种类型的自动布局组件&#xff0c;分别是Grid Layou Group、Horizontal Layout Group、Vertical Layout Group&#xff0c;本文自定义了一个圆形的自动布局组件Circle Layout Group&#xff0c;如图所示&#xff1a; Ra…...

springcloud+nacos+gateway案例

一、先搭建好springcloudnacos项目地址:https://javazhong.blog.csdn.net/article/details/128899999二、spring cloud gateway简述Spring Cloud Gateway 是Spring Cloud家族中的一款API网关。Gateway 建立在 Spring Webflux上&#xff0c;目标是提供一个简洁、高效的API网关&a…...

实习这么久,你知道Maven是如何从代码仓库中找到需要的依赖吗?

目录 碎碎念 Maven是如何找到代码仓库里需要的依赖的&#xff1f; 如何根据坐标在本地仓库中寻找所需要的依赖&#xff1f; 如何根据坐标在远程仓库中寻找所需要的依赖&#xff1f; Maven 如何使用 HTTP 或 HTTPS 协议从远程仓库中获取依赖项&#xff0c;请详细解释其原理…...

低代码/零代码的快速开发框架

目前国内主流的低代码开发平台有&#xff1a;宜搭、简道云、明道云、云程、氚云、伙伴云、道一云、JEPaaS、华炎魔方、搭搭云、JeecgBoot 、RuoYi等。这些平台各有优劣势&#xff0c;定位也不同&#xff0c;用户可以根据自己需求选择。 一、阿里云宜搭 宜搭是阿里巴巴集团在20…...

C# 中常见的设计模式

设计模式是一套被广泛应用于软件设计的最佳实践&#xff0c;它们可以帮助开发者解决特定的问题&#xff0c;提高代码的可重用性、可读性和可维护性。本文将介绍 C# 中常见的几种设计模式&#xff0c;并提供相应的示例代码。 工厂模式 工厂模式是一种创建型设计模式&#xff0c…...

promethues/servicemonitor

目录 1.promethues 能保证源源不断地采集/metrics 信息吗&#xff1f;每次都是最新的吗 2.部署servicemonitor 的作用是什么&#xff1f; 3.pod 部署采集数据直接上报promthues &#xff0c;不通过servicemonitor 可以吗&#xff1f; 4.你说的"此外&#xff0c;如果部署…...

postman使用简介

1、介绍 postman是一款功能强大的网页调试和模拟发送HTTP请求的Chrome插件&#xff0c;支持几乎所有类型的HTTP请求 2、下载及安装 官方文档&#xff1a;https://www.getpostman.com/docs/v6/ chrome插件&#xff1a;chrome浏览器应用商店直接搜索添加即可&#xff08;需墙&…...

@DS注解在事务中实现数据源的切换@DS在事务中失效【已解决】

在Springboot的application.yml中的配置&#xff1a; spring:datasource:url: jdbc:mysql://localhost:3306/test2?serverTimezoneUTC&useUnicodetrue&characterEncodingutf8driver-class-name: com.mysql.cj.jdbc.Driverusername: rootpassword: rootdynamic:primar…...

Java I/O之文件系统

一、全文概览 在学习文件系统之前&#xff0c;需要了解下Java在I/O上的发展史&#xff1a;在Java7之前&#xff0c;打开和读取文件需要编写特别笨拙的代码&#xff0c;涉及到很多的InputStream、OutputStream等组合起来使用&#xff0c;每次在使用时或许都需要查一下文档才能记…...

Mysql元数据获取方法(information_schema绕过方法)

前提&#xff1a;如果waf或其它过滤了information_schema关键字&#xff0c;那我们该如何获取元数据呢&#xff1f;能够代替information_schema的有&#xff1a;sys.schema_auto_increment_columnssys.schema_table_statistics_with_bufferx$schema_table_statistics_with_buff…...

Eclipse快捷键

* 1.补全代码的声明&#xff1a;alt /* 2.快速修复: ctrl 1 * 3.批量导包&#xff1a;ctrl shift o* 4.使用单行注释&#xff1a;ctrl /* 5.使用多行注释&#xff1a; ctrl shift / * 6.取消多行注释&#xff1a;ctrl shift \* 7.复制指定行的代码&#xff1a;ctrl a…...

java ssm自习室选座预约系统开发springmvc

人工管理显然已无法应对时代的变化&#xff0c;而自习室选座预约系统开发能很好地解决这一问题&#xff0c;既能提高人力物力&#xff0c;又能提高预约选座的知名度&#xff0c;取代人工管理是必然趋势。 本自习室选座预约系统开发以SSM作为框架&#xff0c;JSP技术&#xff0c…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

ETLCloud可能遇到的问题有哪些?常见坑位解析

数据集成平台ETLCloud&#xff0c;主要用于支持数据的抽取&#xff08;Extract&#xff09;、转换&#xff08;Transform&#xff09;和加载&#xff08;Load&#xff09;过程。提供了一个简洁直观的界面&#xff0c;以便用户可以在不同的数据源之间轻松地进行数据迁移和转换。…...

如何理解 IP 数据报中的 TTL?

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

return this;返回的是谁

一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请&#xff0c;不同级别的经理有不同的审批权限&#xff1a; // 抽象处理者&#xff1a;审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...