Vue 简单的语法

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

贪吃蛇小游戏代码

框架区 package 结果;import java.awt.Color; import java.awt.EventQueue; import java.awt.Font; import java.awt.Frame; import java.awt.Graphics; import java.awt.Image; import java.util.ArrayList; import java.util.List; import java.util.Random;import javax.s…

每日一题----昂贵的婚礼

#include <iostream> #include <algorithm> #include <cstring> #include <queue> #include <vector> using namespace std; //本题酋长的允诺也算一个物品,最后一定要交给酋长&#xff0c;那么等级不能超过酋长的等级范围const int N 150 * 15…

高效使用 PyMongo 进行 MongoDB 查询和插入操作

插入到集合中&#xff1a; 要将记录&#xff08;在MongoDB中称为文档&#xff09;插入到集合中&#xff0c;使用insert_one()方法。insert_one()方法的第一个参数是一个包含文档中每个字段的名称和值的字典。 import pymongomyclient pymongo.MongoClient("mongodb://l…

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

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

两万字图文详解!InnoDB锁专题!

前言 本文将跟大家聊聊 InnoDB 的锁。本文比较长&#xff0c;包括一条 SQL 是如何加锁的&#xff0c;一些加锁规则、如何分析和解决死锁问题等内容&#xff0c;建议耐心读完&#xff0c;肯定对大家有帮助的。 为什么需要加锁呢&#xff1f; InnoDB 的七种锁介绍 一条 SQL 是…

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…

那些让我苦笑不得的 Bug:编码之路的坎坷经历

文章目录 1. CSS 中的样式“消失”问题2. JavaScript 的变量命名引发的混乱3. 时间格式的困扰4. 数据库查询条件引发的错误结语 &#x1f389;欢迎来到Java学习路线专栏~那些让我苦笑不得的 Bug&#xff1a;编码之路的坎坷经历 ☆* o(≧▽≦)o *☆嗨~我是IT陈寒&#x1f379;✨…

了解一下知识付费系统的开发流程和关键技术点

知识付费系统的开发既涉及到前端用户体验&#xff0c;又需要强大的后端支持和复杂的付费逻辑。在这篇文章中&#xff0c;我们将深入探讨知识付费系统的开发流程和关键技术点&#xff0c;并提供一些相关的技术代码示例。 1. 需求分析和规划&#xff1a; 在着手开发知识付费系…

小学生加减乘除闯关运算练习流量主微信小程序开发

小学生加减乘除闯关运算练习流量主微信小程序开发 经过本次更新&#xff0c;我们增加了新的功能和特性&#xff0c;以提升用户体验和运算练习的趣味性&#xff1a; 能量石与激励视频&#xff1a;用户可以通过观看激励视频来获取能量石&#xff0c;这些能量石可以用于解锁收费…

ctfshow 文件上传 151-161

文件上传也好久没做了。。 手很生了 151 前端绕过 只能上传png文件 使用bp抓包&#xff0c;修改文件名后缀为php 上传成功&#xff0c;发现文件上传路径 使用蚁剑连接 找到flag 152 152 后端校验 跟上一关一样 表示后面即使执行错误&#xff0c;也不报错 抓包修改文件…

招投标系统软件源码,招投标全流程在线化管理

功能描述 1、门户管理&#xff1a;所有用户可在门户页面查看所有的公告信息及相关的通知信息。主要板块包含&#xff1a;招标公告、非招标公告、系统通知、政策法规。 2、立项管理&#xff1a;企业用户可对需要采购的项目进行立项申请&#xff0c;并提交审批&#xff0c;查看所…

TypeError: Cannot read properties of undefined (reading ‘0‘)

1、在使用<el-dropdown>会报这个错误 原因&#xff1a;使用v-if控制显隐&#xff0c;找不到该节点就会开始报错 解决&#xff1a;使用v-show就可以了

自定义控件封装

上边对两个控件整合时用函数指针是因为QSpinBox::valueChange有重载版本 自定义的接口放在类外 你设计的界面可以通过提升为调用这些接口 添加qt设计师界面类

winform窗体、控件的简单封装,重做标题栏

1标题栏封装中使用了以下技术&#xff1a; 知识点&#xff1a; 1.父类、子类的继承&#xff1b; 2.窗体之间的继承&#xff1b; 3.自定义控件的绘制&#xff1b; 4.多线程在窗体间的应用&#xff1b; 5.窗体和控件的封装&#xff1b; 6.回调函数&#xff08;委托&#xff09;&…

Redis快速入门(基础篇)

简介&#xff1a; 是一个高性能的 key-value数据库。 存在内存中 与其他 key-value 缓存产品有以下三个特点&#xff1a; Redis支持数据的持久化&#xff0c;可以将内存中的数据保持在磁盘中&#xff0c;重启的时候可以再次加载进行使用。 Redis不仅仅支持简单的key-value类…

自动备份pgsql数据库

bat文件中的内容&#xff1a; PATH D:\Program Files\PostgreSQL\13\bin;D:\Program Files\7-Zip set PGPASSWORD**** pg_dump -h 8.134.151.187 -p 5466 -U sky -d mip_db --schema-only -f D:\DB\backup\%TODAY%-schema-mip_db_ali.sql pg_dump -h 8.134.151.187 -p 5466…

BUUCTF 面具下的flag 1

BUUCTF:https://buuoj.cn/challenges 题目描述&#xff1a; 下载附件&#xff0c;得到一张.jpg图片。 密文&#xff1a; 解题思路&#xff1a; 1、将图片放到Kali中&#xff0c;使用binwalk检测出隐藏zip包。 使用foremost提取zip压缩包到output目录下 解压zip压缩包&…

python自动化第一篇—— 带图文的execl的自动化合并

简述 最近接到一个需求&#xff0c;需要为公司里的一个部门提供一个文件上传自动化合并的系统&#xff0c;以供用户稽核&#xff0c;谈到自动化&#xff0c;肯定是选择python&#xff0c;毕竟python的轮子多。比较了市面上几个用得多的python库&#xff0c;我最终选择了xlwings…