Vue 简单的语法

news2024/11/23 7:14:26

1.插值表达式

1.插值表达式的作用是什么?

利用表达式进行插值,将数据渲染到页面中;

2.语法结构?

{{表达式}}

3.插值表达式的注意点是什么?

(1)使用的数据要存在,在data中;

(2)支持的是表达式,而不是语句;

(3)不能在标签属性中使用;<p title={{ 变量 }}></p> ×

2.Vue 指令

Vue 会根据不同的指令,针对标签实现不同的功能。指令:带有 v-前缀的特殊标签属性;

(1)v-html:

        作用:动态的解析标签,(像插值表达式的话会以文本形式进行展示)

         v-html = "表达式 " → 动态设置元素 innerHTML
(2)v-show & v-if:
        作用:控制元素的隐藏
        -v-show:控制元素显示隐藏
         语法:v-show = "表达式" 表达式值 true 显示, false 隐藏
         原理:切换 display:none 控制显示隐藏
         场景: 频繁切换显示隐藏的场景
      
       -v-if:控制元素显示隐藏(条件渲染)
        语法: v-if = "表达式" 表达式值 true 显示, false 隐藏
        原理: 基于条件判断,是否 创建 或 移除 元素节点
        场景: 要么显示,要么隐藏,不频繁切换的场景
(3)v-else & v-else-if:
        作用:辅助v-if 进行判断渲染
        语法: v-else v-else-if = "表达式"
        注意: 需要紧挨着 v-if 一起使用
(4)v-on:
        作用:注册事件 = 添加监听+提供处理逻辑
        语法:<1> v-on:事件名 = “内联语句”  ; <2>  v-on:事件名 = “methods中的函数名”
        简写: @事件名=“methods中的函数名”
        注意:methods函数中的 this 指向 Vue 实例;同时,我们也可以通过v-on 来调用传参;
(5)v-bind:
        作用:动态地设置 html 的标签属性和 -> src  url title ...
        语法:v-bind:属性名 = “表达式
        注意:简写形式 :属性名 = “表达式”
(6)v-for:
        作用:基于数据循环,多次渲染整个元素 ->数组、对象、数字
        语法:v-for = "(item,index) in 数组";item 是每一项,index是索引;
        省略 index 则 v-for = "item in 数组"
        注意:v-for 的默认行为会尝试 原地修改元素 (就地复用),因而我们最好加上v-for 中的key,并且给元素添加的唯一标识,便于Vue进行列表项的正确排序复用。
        注意点:

        1. key 的值只能是 字符串 或 数字类型

        2. key 的值必须具有 唯一性
        3. 推荐使用 id 作为 key(唯一),不推荐使用 index 作为 key(会变化,不对应);
(7)v-model:

        作用:给表单元素使用,双向数据绑定 -> 可以快读获取或设置表单元素内容

        ① 数据变化 → 视图自动更新
        ② 视图变化 → 数据自动更新
        语法: v-model = '变量'

3.指令的修饰符

通过 “ . ” 指明一些指令的 后缀 ,不同 后缀 封装了不同的处理操作 -> 简化代码

(1)按键修饰符

        @keyup.enter -> 键盘回车监听

(2)v-model 修饰符

        v-model.trim -> 去除首尾空格

        v-model.number -> 转数字

(3)事件修饰符

        @事件名.stop -> 阻止冒泡

        @事件名.prevent -> 阻止默认行为

4.v-bind 对于样式操作的增强*

(1)v-bind  - 操作 class

        语法: : class = "对象/数组"

        1.对象 -> 键就是类名,值是布尔值。如果值是 true ,有这个类,否则没有这个类;

<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>

        适用的场景:一个类名,来回切换;

        2.数组 -> 数组中所有类,都会添加到盒子上,本质就是一个 class 列表

<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>

        适用场景:批量添加或删除类;

示例:京东秒杀导航栏的切换

(2)v-bind - 操作 style (个人认为这个还是比较重要的)

        语法: :style = "样式对象"

<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>

        适用场景:某个具体属性的动态设置

        注意的一些点:

        <1>一些格式:首先,对于CSS属性值,我们需要对其加引号;其次,对于带有横杠的属性名,在JS对象中是不支持的,因而此时可以采取两种方法:一种是驼峰;另一种是我们可以对这种属性名加引号;

<div :style="{height:"400px";width:"600px";backgroundColor:'white';'background-color':'white';}"></div>

        <2>如果对单个的属性进行动态的改变,则

<div :style="{height:"400px";width:len;}"></div>

/* 然后在 data 中定义 len */

5.v-model 应用于其他表单元素

这个暂时和之前的是一样的


参考:

026-v-model应用于其他表单元素_哔哩哔哩_bilibili

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

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

相关文章

Java基础(第七期):Java面向对象和类 类的封装 Java构造器 JavaBean标准

Java基础专栏 Java基础&#xff08;第七期&#xff09; 面相对象 面向对象&#xff08;Object-oriented&#xff09;是一种编程思想和方法&#xff0c;它将程序的设计和组织建立在对象的概念上。在Java中&#xff0c;每个对象都是类的一个实例&#xff0c;而类定义了相同类型对…

【机器学习6】概率图模型

用观测结点表示观测到的数据&#xff0c; 用隐含结点表示潜在的知识&#xff0c; 用边来描述知识与数据的相互关系&#xff0c; 最后基于这样的关系图获得一个概率分布 。 概率图中的节点分为隐含节点和观测节点&#xff0c; 边分为有向边和无向边。 从概率论的角度&#xff0c…

使用pixy计算群体遗传学统计量

1 数据过滤 过滤参数&#xff1a;过滤掉次等位基因频率&#xff08;minor allele frequency&#xff0c;MAF&#xff09;低于0.05、哈达-温伯格平衡&#xff08;Hardy– Weinberg equilibrium&#xff0c;HWE&#xff09;对应的P值低于1e-10或杂合率&#xff08;heterozygosit…

想买GPT4会员却只能排队?来看看背后的故事!

文章目录 &#x1f9d0; 为什么要进候选名单&#xff1f;&#x1f50d; 究竟发生了什么&#xff1f;&#x1f62e; IOS端还能买会员&#xff01;&#x1f914; 网页端为啥不能订会员&#xff1f;第一点&#xff1a;防止黑卡消费第二点&#xff1a;当技术巨头遇上资源瓶颈&#…

2023.11.16-hive sql高阶函数lateral view,与行转列,列转行

目录 0.lateral view简介 1.行转列 需求1: 需求2: 2.列转行 解题思路: 0.lateral view简介 hive函数 lateral view 主要功能是将原本汇总在一条&#xff08;行&#xff09;的数据拆分成多条&#xff08;行&#xff09;成虚拟表&#xff0c;再与原表进行笛卡尔积&#xff0c…

Uniapp导出的iOS应用上架详解

目录 Uniapp导出的iOS应用上架详解 摘要 引言 苹果审核标准 苹果调试 注意事项和建议 总结 摘要 本文将探讨Uniapp导出的iOS应用能否成功上架的问题。我们将从苹果审核标准、性能影响、调试流程等多个方面进行深入分析&#xff0c;以及向开发者提供相关注意事项和建议。…

安防监控系统EasyCVR平台调用hls地址生成流的时间过长,该如何解决?

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台可拓展性强、…

Mybatis-Plus条件构造器QueryWrapper

Mybatis-Plus条件构造器QueryWrapper 1、条件构造器关系介绍 介绍 &#xff1a; 上图绿色框为抽象类 蓝色框为正常类&#xff0c;可创建对象 黄色箭头指向为父子类关系&#xff0c;箭头指向为父类 wapper介绍 &#xff1a; Wrapper &#xff1a; 条件构造抽象类&#xff0…

Portainer搭建使用

一、简介 Portainer是一个开源的容器管理平台&#xff0c;它为用户提供了一个直观且易于使用的图形用户界面&#xff08;GUI&#xff09;&#xff0c;用于管理和监控容器化应用。以下是Portainer的一些主要功能&#xff1a; 容器管理&#xff1a;Portainer允许您轻松地创建、…

土木非科班转码测开,斩获10家大厂offer

大家好&#xff0c;我是洋子 24届秋招基本已经落下了帷幕&#xff0c;各大互联网大厂基本也开奖完毕&#xff0c;还没有拿到满意offer的同学也不要灰心&#xff0c;积极备战明年的春招。另外&#xff0c;25届想要找暑期实习的同学也可以开始准备起来了&#xff0c;基本大厂在春…

java基本类型等API 基本语法

目录 数组 字符 API java的逻辑表达是必须是布尔值,不能是整数 必须写上!0 java的两个对象判断时候回判断地址是否相等--例如两个字符串用equals 数组 字符串在编程中可以用来存储文本信息&#xff0c;而字符数组则只能用来存储字符 数组转为字符串Arrays.toString 字符…

Java绘图-第19章

Java绘图-第19章 1.Java绘图类 1.1Graphics类 Graphics类是用于绘制图形的抽象类&#xff0c;它是java.awt包中的一部分。Graphics类提供了各种方法&#xff0c;可以在图形上绘制各种形状、文本和图像。这些方法包括画线、画矩形、画椭圆、画弧、绘制图像等。 1.2Graphics2…

什么是3D建模中的“高模”和“低模”?

3D建模中什么是高多边形和低多边形&#xff1f; 高多边形建模和低多边形建模之间的主要区别正如其名称所暗示的那样&#xff1a;您是否在模型中使用大量多边形或少量多边形。 然而&#xff0c;在决定每个模型的细节和多边形级别时&#xff0c;还需要考虑其他事项。最值得注意的…

Python框架篇(1):FastApi-快速入门

1.介绍 前言: 不管学什么语言&#xff0c;都应该至少掌握一个框架&#xff0c;方面我们后续&#xff0c;进行服务部署、服务对外支持等; 1.1 官网介绍 下面是来自FastAPI官网的介绍: FastAPI 是一个用于构建 API 的现代、快速&#xff08;高性能&#xff09;的 web 框架&#…

Java设计模式-结构型模式-适配器模式

适配器模式 适配器模式应用场景案例类适配器模式对象适配器模式接口适配器模式适配器模式在源码中的使用 适配器模式 如图&#xff1a;国外插座标准和国内不同&#xff0c;要使用国内的充电器&#xff0c;就需要转接插头&#xff0c;转接插头就是起到适配器的作用 适配器模式&…

浪潮信息KeyarchOS迁移体验

浪潮KOS迁移体验 文章目录 浪潮KOS迁移体验摘要CentOS 停更KOS简介 体验流程第一步&#xff0c;CentOS 体验第二部&#xff0c;迁移操作体验迁移评估迁移实施 第三步&#xff0c;软件功能验证操作系统验证终端登录 总结改进建议 关键字&#xff1a; 浪潮、 KOS、 X2Keyarch、…

第十五届全国大学生数学竞赛初赛试卷解析

参加了此次比赛&#xff0c;收获很多&#xff0c;两个半小时让我体会到了很多&#xff0c;所以想做个总结 第十五届全国大学生数学竞赛初赛试题 &#xff08;非数学A类,2023年&#xff09; 下面是答案解析&#xff0c;有兴趣的小伙伴可以做完对照一下。 直接使用洛必…

wireshark 抓包工俱使用一

一、场景一 查询某个Http请求的请求数据和响应数据 请求示例如下&#xff08;请求机器IP 172.20.2.164&#xff0c;目标地址&#xff1a;10.30.2.171&#xff09; 过滤条件分析&#xff0c;请求协议http&#xff0c;请求数据和响应数据&#xff08;http通信中请求和响应实际是两…

【Ubuntu】Ubuntu20.04下安装视频播放器vlc和录屏软件ssr

【Ubuntu】Ubuntu20.04下安装视频播放器vlc和录屏软件ssr 文章目录 【Ubuntu】Ubuntu20.04下安装视频播放器vlc和录屏软件ssr1. 安装视频播放器vlc2. 安装录屏软件ssr 1. 安装视频播放器vlc sudo apt-get install vlcvlc是一款比较简洁的视频播放器&#xff0c;如下所示 2. 安…