【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实例的作用范围:管理el选项命中的元素及其内部的后代元素使用其他的选择器&a…...
MySQL 中的 distinct 和 group by 哪个效率更高?
结论先说大致的结论(完整结论在文末):在语义相同,有索引的情况下group by和distinct都能使用索引,效率相同。在语义相同,无索引的情况下:distinct效率高于group by。原因是distinct 和 group by…...
Spring 框架源码(六) Bean的生命周期全流程源码解析
Spring框架作为Java王国的地基,我觉得它包含了很多精妙的设计,例如Bean工厂设计、Bean的生命周期、tx、aop、web、mvc等,最核心基本的Bean设计是Spring 的框架的灵魂,本文就Bean的生命周期全流程做源码程度上的解析,欢…...
运维服务商低成本提升服务质量解决方案
在信息化高速发展的今天,网络建设的重要性不言而喻,更多客户选择将运维服务外包或托管给运维服务商,市场需求愈大竞争压力愈大,想要脱颖而出势必要优化自身提高服务质量,最好是低成本、大提升,nVisual助力渠…...
Raft 一致性算法
Raft Raft提供了一种在计算系统集群中分布状态机的通用方法,确保集群中的每个节点都同意一系列相同的状态转换。 一个Raft集群包含若干个服务器节点,通常为5个,这允许整个系统容忍2个节点的失效。每个节点处于以下三种状态之一: …...
驱动程序开发:基于EC20 4G模块自动拨号联网的两种方式(GobiNet工具拨号和PPP工具拨号)
目录一、EC20 4G模块简介二、根据移远官方文档修改EC20 4G模组驱动 1、因为EC20 4G模组min-pice接口其实就是usb接口,因此需要修改Linux内核源码drivers/usb/serial/option.c文件,如下图: 2、根据USB协议的要求,需要在drive…...
Web自动化测试——常见问题篇
文章目录一、什么是自动化测试二、为啥进行自动化测试(优点)三、Webdriver 的工作原理四、显示等待和隐式等待的区别五、什么样的项目适合做自动化六、自动化测试的流程七、如何分析生成的自动化测试报告一、什么是自动化测试 所谓的自动化测试就是使用…...
快速实现Modbus TCP转BACnet IP协议的方案
一、需求背景 BACnet是用于智能楼宇自控系统的主流通信协议,可用在暖通空调系统(HVAC,包括暖气、通风、空气调节),也可以用在照明控制、门禁系统、火警侦测系统及其相关的设备。楼宇中的受控设备都通过BACnet协议连接到…...
Unity CircleLayoutGroup 如何实现一个圆形自动布局组件
文章目录简介实现原理Editor 编辑器简介 Unity中提供了三种类型的自动布局组件,分别是Grid Layou Group、Horizontal Layout Group、Vertical Layout Group,本文自定义了一个圆形的自动布局组件Circle Layout Group,如图所示: 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上,目标是提供一个简洁、高效的API网关&a…...
实习这么久,你知道Maven是如何从代码仓库中找到需要的依赖吗?
目录 碎碎念 Maven是如何找到代码仓库里需要的依赖的? 如何根据坐标在本地仓库中寻找所需要的依赖? 如何根据坐标在远程仓库中寻找所需要的依赖? Maven 如何使用 HTTP 或 HTTPS 协议从远程仓库中获取依赖项,请详细解释其原理…...
低代码/零代码的快速开发框架
目前国内主流的低代码开发平台有:宜搭、简道云、明道云、云程、氚云、伙伴云、道一云、JEPaaS、华炎魔方、搭搭云、JeecgBoot 、RuoYi等。这些平台各有优劣势,定位也不同,用户可以根据自己需求选择。 一、阿里云宜搭 宜搭是阿里巴巴集团在20…...
C# 中常见的设计模式
设计模式是一套被广泛应用于软件设计的最佳实践,它们可以帮助开发者解决特定的问题,提高代码的可重用性、可读性和可维护性。本文将介绍 C# 中常见的几种设计模式,并提供相应的示例代码。 工厂模式 工厂模式是一种创建型设计模式,…...
promethues/servicemonitor
目录 1.promethues 能保证源源不断地采集/metrics 信息吗?每次都是最新的吗 2.部署servicemonitor 的作用是什么? 3.pod 部署采集数据直接上报promthues ,不通过servicemonitor 可以吗? 4.你说的"此外,如果部署…...
postman使用简介
1、介绍 postman是一款功能强大的网页调试和模拟发送HTTP请求的Chrome插件,支持几乎所有类型的HTTP请求 2、下载及安装 官方文档:https://www.getpostman.com/docs/v6/ chrome插件:chrome浏览器应用商店直接搜索添加即可(需墙&…...
@DS注解在事务中实现数据源的切换@DS在事务中失效【已解决】
在Springboot的application.yml中的配置: spring:datasource:url: jdbc:mysql://localhost:3306/test2?serverTimezoneUTC&useUnicodetrue&characterEncodingutf8driver-class-name: com.mysql.cj.jdbc.Driverusername: rootpassword: rootdynamic:primar…...
Java I/O之文件系统
一、全文概览 在学习文件系统之前,需要了解下Java在I/O上的发展史:在Java7之前,打开和读取文件需要编写特别笨拙的代码,涉及到很多的InputStream、OutputStream等组合起来使用,每次在使用时或许都需要查一下文档才能记…...
Mysql元数据获取方法(information_schema绕过方法)
前提:如果waf或其它过滤了information_schema关键字,那我们该如何获取元数据呢?能够代替information_schema的有:sys.schema_auto_increment_columnssys.schema_table_statistics_with_bufferx$schema_table_statistics_with_buff…...
Eclipse快捷键
* 1.补全代码的声明:alt /* 2.快速修复: ctrl 1 * 3.批量导包:ctrl shift o* 4.使用单行注释:ctrl /* 5.使用多行注释: ctrl shift / * 6.取消多行注释:ctrl shift \* 7.复制指定行的代码:ctrl a…...
java ssm自习室选座预约系统开发springmvc
人工管理显然已无法应对时代的变化,而自习室选座预约系统开发能很好地解决这一问题,既能提高人力物力,又能提高预约选座的知名度,取代人工管理是必然趋势。 本自习室选座预约系统开发以SSM作为框架,JSP技术,…...
DeepSeek-R1-Distill-Qwen-7B功能体验:Ollama部署后,实测推理速度提升3倍
DeepSeek-R1-Distill-Qwen-7B功能体验:Ollama部署后,实测推理速度提升3倍 1. 模型背景与核心优势 1.1 模型技术背景 DeepSeek-R1-Distill-Qwen-7B是华为昇腾与阿里达摩院技术协作的产物,通过知识蒸馏技术将DeepSeek-R1(660B参数…...
生物信息学避坑指南:你的热图聚类总乱?可能是数据标准化和样品注释没做对
生物信息学避坑指南:热图聚类混乱的根源与系统性解决方案 热图(Heatmap)作为生物信息学中最常用的数据可视化工具之一,广泛应用于基因表达分析、代谢组学、微生物组学等领域。然而,许多初学者在使用热图进行样品聚类时…...
Qt安卓开发实战:从红米K60调试到多机型适配指南
1. Qt安卓开发环境准备 搞Qt安卓开发,首先得把环境搭好。这里假设你已经按照官方文档或者教程配置好了Qt Creator和Android SDK/NDK。如果还没搞定,建议先去Qt官网把Android开发套件下载齐全,包括: Qt for Android(建议…...
解锁毕业论文新姿势:书匠策AI,你的学术“超级外挂”!
在学术的征途上,毕业论文无疑是每位学子必须跨越的一道重要关卡。它不仅是对你大学四年学习成果的全面检验,更是你迈向学术殿堂或职场的重要敲门砖。然而,面对堆积如山的资料、错综复杂的逻辑结构,以及那令人头疼的格式要求&#…...
RKNN模型量化全解析:如何用1.5.2版本工具链提升瑞芯微3588芯片推理效率
RKNN模型量化实战指南:1.5.2版本工具链在RK3588芯片的深度优化 边缘计算时代的模型效率革命 当无人机需要在毫秒间识别障碍物,当零售摄像头要同时追踪上百个顾客行为,传统云端AI的响应速度已无法满足需求。这正是边缘AI芯片大显身手的舞台——…...
解锁毕业论文新姿势:书匠策AI,你的学术超级英雄!
在学术征途上,每一位即将毕业的大学生都怀揣着梦想与挑战,而毕业论文则是那座必须跨越的巍峨大山。面对这座大山,你是否曾感到迷茫、无助,甚至有些力不从心?别怕,今天,就让我带你认识一位学术界…...
Electron应用自动更新全解析:如何用electron-updater搭建私有更新服务器(附Vue2示例)
Electron应用私有化自动更新体系构建指南 当你的Electron应用从开发阶段进入生产环境,如何确保用户始终使用最新版本?本文将带你从零构建一套企业级私有更新体系,涵盖服务端部署策略、客户端配置优化以及用户体验设计三大核心模块。 1. 更新服…...
Twisted Protocols终极指南:快速构建高性能网络协议的简单方法
Twisted Protocols终极指南:快速构建高性能网络协议的简单方法 【免费下载链接】twisted Event-driven networking engine written in Python. 项目地址: https://gitcode.com/gh_mirrors/tw/twisted Twisted是一个用Python编写的事件驱动网络引擎࿰…...
如何为你的单片机项目选择最佳通信协议?I²C、SPI、UART全解析
单片机通信协议深度指南:从理论到实战的精准选择策略 当你的单片机需要与外部世界对话时,选择正确的通信协议就像为不同场合挑选合适的语言——商务会议需要正式严谨,朋友聊天则讲究轻松随意。在嵌入式系统设计中,UART、IC和SPI这…...
m3u8流媒体视频下载工具的技术实现与应用指南
m3u8流媒体视频下载工具的技术实现与应用指南 m3u8流媒体视频下载工具是一款基于现代Web技术栈开发的桌面应用程序,专门用于处理各类在线视频资源的下载需求。该工具采用TypeScript语言开发,结合Electron框架构建跨平台桌面应用,为用户提供专…...
