【VUE】
概念
VUE是一个用于构建用户界面的渐进式框架
构建用户界面:基于数据渲染出用户看到的界面
渐进式:声明式渲染->组件系统->客户端路由->大规模状态管理->构建工具
框架:一套完整的项目解决方案
VUE使用方式:
1.局部模块改造,用Vue核心包开发
2.整站开发,用Vue核心包&Vue插件&工程化开发
创建实例
1.创建Vue实例,初始化渲染
准备容器
<div id="app"></div>
引包
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
创建Vue实例
el:指定挂载点
data:提供数据
const app = new Vue({el: '#app',data: {msg: 'hello'}})
指定配置项
<div id="app">{{msg}}</div>
插值表达式
{{ }}:利用表达式进行插值,渲染到页面
注意点
1.使用数据必须存在
2.支持表达式,但不支持语句
3.不能在标签属性中使用{{}}插值
响应式特性
响应式:数据变化,视图自动更新
访问
app.msg
修改数据
app.msg="bye"
开发者工具
指令
带前缀的特殊标签属性
v-html
作用:设置元素的innerHTML
语法:v-html="表达式"
<body><div id="app"><div v-html="msg"></div></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {msg: '<a href="www.baidu.com">baidu</a>'}})</script>
v-show
作用:控制元素显示隐藏
语法:v-show="表达式",表达式为true显示,false隐藏,但在源码中显现
场景:频繁切换显示隐藏的场景
v-if
作用:控制元素显示隐藏(条件渲染)
语法:v-if="表达式",表达式为true显示,false隐藏,不在源码中显现
场景:要么显示,要么隐藏
v-on
作用:注册事件=添加监听+提供处理逻辑
语法:
1.v-on:事件名="内联语句" 或者@事件名="内联语句"
2.v-on:事件名="methods中的函数名" 或者@事件名="methods中的函数名"
v-else
作用:辅助v-if进行判断渲染
语法:v-else="表达式",要紧挨v-if使用
v-else-if
见上
v-bind
作用:动态地设置html的标签属性
语法:v-bind:属性名="表达式"
v-for
作用:基于数据循环(数组,对象,数字~),多次渲染整个元素
语法:v-for="(item,index) in 数组",要加key属性
v-model
作用:给表单元素使用,双向数据绑定,快速获取设置表单元素内容
语法:v-model="表达式"
Vue文件(.vue)
规范:
1.属性绑定,src="{{url}}升级为"src="url"
2.事件绑定,bindtap="eventName"升级为@tap="eventName"
3.支持Vue常用指令
相关文章:
【VUE】
概念 VUE是一个用于构建用户界面的渐进式框架 构建用户界面:基于数据渲染出用户看到的界面 渐进式:声明式渲染->组件系统->客户端路由->大规模状态管理->构建工具 框架:一套完整的项目解决方案 VUE使用方式: 1.…...
详解初阶数据结构之顺序表(SeqList)——单文件文件实现SeqList的增删查改
目录 一、线性表 二、顺序表 2.1概念及结构 2.2接口实现 2.3动态顺序表的创建 2.3动态顺序表的初始化 2.3.1传值初始化 2.3.2传址初始化 2.4动态顺序表的清空 2.5动态顺序表的扩容 2.6动态顺序表内容的打印 三、动态顺序表的使用 3.1尾插尾删 3.1.1尾插 3.1.2尾删…...
JavaScript中的深拷贝和浅拷贝
聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 浅拷贝(Shallow Copy):⭐深拷贝(Deep Copy):⭐ 写在最后 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带…...
树形结构的节点作为查询参数业务
1、业务描述 有一个树结构,存在一个唯一的code和一个父节点的pcode,要求前端传入任意层的code匹配这个code对应的所有子节点对应的数据。 2、解决思路 因为无法判定传入的code到底在那层,so 直接递归调用查询判断,如果有子节点就…...
sql:SQL优化知识点记录(十二)
(1)读锁案例讲解 加读锁和写锁 查看是否上锁:In_use:变成了1 读写锁对我们数据产生哪些影响: 读锁:是共享锁,其他线程可以查看: 加了读锁:session1不能修改自己…...
一.使用qt creator 设计显示GUI
一.安装qt creator 二.创建项目 文件-》新建项目 三.使用设计 可以直接使用鼠标拖拽 四.转换为py文件 # from123.py 为导出 py文件的文件名 form.ui 为 qt creator创造的 ui 文件 pyuic5 -o x:\xxx\from123.py form.ui五.显示GUI from PyQt5.QtWidgets import * fr…...
sql:SQL优化知识点记录(八)
(1)索引面试题分析 所谓索引:就是排好序的快速查找数据结构,排序家查找是索引的两个用途 select * 在where使用到了索引,当select * 有模糊查询%在左边索引会失效 当select * where后面索引的顺序发生变化࿰…...
java笔试题,寻找多出来的元素
题目:有两个数组a和b,其中b有一个元素是a没有的,其他元素都相同,请找出b中这个多余的元素。 1 public class Test02 { 2 3 public static void main(String[] args) { 4 int[] a {11, 34, 9, -4, 100, 98}; 5 int[] b {34…...
docker笔记3 Docker常规安装
1.安装tomcat docker hub上面查找tomcat镜像 docker search tomcat 从docker hub上拉取tomcat镜像到本地 docker pull tomcat docker images查看是否有拉取到的tomcat 使用tomcat镜像创建容器实例(也叫运行镜像) docker run -it -p 8080:8080 tomcat -p 小写,主…...
阻止 NTLM后无法登录远程桌面的原因
阻止 NTLM(NT LAN Manager) 攻击设置二 之前郑州景安的服务器被攻击,没过几天阿里云的也被攻击,且都是 NTLM 攻击。 Operating System: Windows Server 2008(R2) Enterprise Service Pack 1 64bit 一、winr 输入 gpedit.msc 二、依次进入:…...
Docker网络功能
基本网络功能 Docker 允许通过外部访问容器或容器互联的方式来提供网络服务。使用docker network子命令来管理Docker网络。 外部访问容器可通过端口映射实现,启动容器时使用-p参数指定映射关系。-p可多次使用来绑定多个端口。使用docker port命令查看当前映射的端…...
如何入门 AI----如何确定学习目标
当确定学习人工智能(AI)的目标时,可以考虑以下具体的步骤: 兴趣和好奇心: 首先,问问自己,您对哪些 AI 领域感兴趣?是机器学习、自然语言处理、计算机视觉,还是其他领域&a…...
ABAP中加前导零和去前导零方法
文章目录 1 Introduction2 Method 1 Introduction In the sap there are two method for leading zero. We can use function or use the below the method . 2 Method SELECT * INTO TABLE DATA(IT_ITEM)FROM MARA .LOOP AT IT_ITEM ASSIGNING FIELD-SYMBOL(<FS_DATA&g…...
聊聊ShardingSphere是怎么进行sql重写的
序 本文主要研究一下ShardingSphere进行sql重写的原理 prepareStatement org/apache/shardingsphere/driver/jdbc/core/connection/ShardingSphereConnection.java public final class ShardingSphereConnection extends AbstractConnectionAdapter {Overridepublic Prepar…...
软件设计模式系列之二——抽象工厂模式
1 抽象工厂模式的定义 抽象工厂模式是一种创建型设计模式,它提供了一种创建一组相关或相互依赖对象的方式,而无需指定它们的具体类。该模式以一组抽象接口为核心,包括抽象工厂接口和一组抽象产品接口,每个具体工厂类负责创建特定…...
P2719 搞笑世界杯 (期望dp
#include <bits/stdc.h> using namespace std; using VI vector<int>;double dp[2000][2000]; int n; //求dp[2][0] //dp[0][2] //期望dp要从终末态,向起始态转移 //dp[a][b] - > dp[a][b-1] or dp[a-1][b] //dp[a][b] 1/2 * dp[a][b1] 1/2 * dp…...
spring cloud新版本使用loadbalancer替代Ribbon
Nacos 2021 不再集成 Ribbon,建议使用spring cloud loadbalancer 引入 一、简单使用 引入依赖spring cloud loadbalancer <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-loadbalancer<…...
【Git-Exception】Git报错:fatal: unable to auto-detect email address
报错信息: *** Please tell me who you are. Run git config --global user.email “youexample.com” git config –global user.name “Your Name” to set your account’s default identity. Omit --global to set the identity only in this repository. fatal…...
JVM性能优化 —— 类加载器,手动实现类的热加载
一、类加载的机制的层次结构 每个编写的”.java”拓展名类文件都存储着需要执行的程序逻辑,这些”.java”文件经过Java编译器编译成拓展名为”.class”的文件,”.class”文件中保存着Java代码经转换后的虚拟机指令,当需要使用某个类时&#…...
SSH连接MobaXterm
IT常用软件的安装 ssh连接MobaXterm详细使用教程 数据库Navicat安装:https://www.jianshu.com/p/2494e02caf63 java SE安装 https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html windows安装pip https://www.cnblogs.com/NanShan2016/…...
23-Oracle 23 ai 区块链表(Blockchain Table)
小伙伴有没有在金融强合规的领域中遇见,必须要保持数据不可变,管理员都无法修改和留痕的要求。比如医疗的电子病历中,影像检查检验结果不可篡改行的,药品追溯过程中数据只可插入无法删除的特性需求;登录日志、修改日志…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动(如演唱会、马拉松赛事、高考中考等)期间,城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例,暖城商圈曾因观众集中离场导致周边…...
从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路
进入2025年以来,尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断,但全球市场热度依然高涨,入局者持续增加。 以国内市场为例,天眼查专业版数据显示,截至5月底,我国现存在业、存续状态的机器人相关企…...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现,这取决于你是想在组件内部直接设置,还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法: 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别
OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码: prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...
Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?
在大数据处理领域,Hive 作为 Hadoop 生态中重要的数据仓库工具,其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式,很多开发者常常陷入选择困境。本文将从底…...
AGain DB和倍数增益的关系
我在设置一款索尼CMOS芯片时,Again增益0db变化为6DB,画面的变化只有2倍DN的增益,比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析: 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...
作为测试我们应该关注redis哪些方面
1、功能测试 数据结构操作:验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化:测试aof和aof持久化机制,确保数据在开启后正确恢复。 事务:检查事务的原子性和回滚机制。 发布订阅:确保消息正确传递。 2、性…...
使用SSE解决获取状态不一致问题
使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件,这个上传文件是整体功能的一部分,文件在上传的过程中…...
