Vue3学习总结

学习Vue3,最好的地方是官网:https://cn.vuejs.org/guide/quick-start.html
我这里只是自己的总结,以加深自己的学习记忆。如果其他人想学习Vue3,建议直接去官网学习。
1、已创建好的Vue3工程再次启动的命令:npm run dev。Vue3的代码至少分成两部分,一个是<–script steup>这里写类JS代码 <–script>,一个是<–template> 这里写类HTML语法<–template>。这里的script和tempate前的–是多余的,因为不写这个符号,就会被变成CSDN网页脚本,无法呈现。
2、文本绑定:mustache语法是一种数据与表现分离的语法,用两个大括号来表示。vue3用的就是mustache语法,它在HTML中用两个大括号来括住JS传递来的文本
3、所有的Vue3指令,都是在HTML属性中,用v-开头的特殊属性
4、属性绑定:使用v-bind:命令来实现属性绑定,如果是绑定单个属性,命令为v-bind:attr=“attr”,也可以写为v-bind:attr,也可以简写为:。如果是通过绑定一个映射表来一次性绑定多个属性,命令为v-bind=“map”,其中,map是一个映射表。
5、事件绑定:使用v-on:命令来实现事件绑定。如v-on:click=“doSomething”,可以用@符号来代替v-on:,如@click=“doSomething”
6、可以用[ ]来实现动态的属性或者事件绑定。
v-bind:[attrs]=“myattr”,当attrs值等于id时,则其等同于v-bind:id=“myattr”
v-on:[event] = “doSomething”,当event等于onclick时,则等同于v-on:click= “doSomething”
7、vue3中所有的数据绑定,都支持表达式。什么是表达式:即可以作为return返回值的语句。如:
{{ number + 1 }}

{{ ok ? ‘YES’ : ‘NO’ }}

{{ message.split(‘’).reverse().join(‘’) }}

<–div :id=“list-${id}”><–/div> (这里的–也是故意额外加的)

8、我跳过了响应式基础的学习,回头记得学
9、计算属性:使用computed属性,可以给template传递一个经过计算后的值,当这个值放在缓存中,当这个值不发生改变时,则JS不会再次执行computed,这样就能提高运行速度。函数也能提供经过计算后的值,但是不论传递的值有无改变,函数每次都会运行,速度会比computed慢。
计算属性的Vue语法是:
const this_value = computed( ()=>),()=>的括号中不要放任何值,=>后用{}跟一串代码,或者是一个函数。

10、class属性是一个特殊属性,因此vue3对这个属性的绑定做了增强。
可以用大括号括住class名称,然后在class名称后加一个冒号以及布尔值,来控制该class是否绑定。(普通v-bind=““的引号不能省略)
可以用中括号来一次绑定多个class,且在中括号中可以使用表达式。当然使用大括号也可以绑定多个class,区别在于大括号里的可以用冒号+布尔值来决定该class是否绑定。中括号可以用表达式来决定该class是否绑定。
下面两种写法,效果是一样的。
<-div :class=”{class1:isActive, class2:isError}”> 66 <-/div>
<-div :class=“[isActive ? class1 : ’ ', isError ? class2 : ’ ']}”> 66 <-/div>

11、绑定CSS样式,是通过绑定style属性来实现的,语法为v-bind:style=“myStyle”.其中,myStyle是在vue中自定义的样式
如果有多个样式,则用中括号括起来。

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

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

相关文章

使用java自带的队列进行存取数据ArrayBlockingQueue 多线程读取ExecutorService

场景&#xff1a; 防止接收数据时处理不过来导致阻塞&#xff0c;使用ArrayBlockingQueue队列存储数据后&#xff0c;以多线程的方式处理数据 保证系统性能。 package com.yl.demo.main4;import java.text.SimpleDateFormat; import java.util.Date; import java.util.concurr…

ArchLinux部署waydroid

在Arch Linux系统上部署Waydroid运行Android APP 文章目录 在Arch Linux系统上部署Waydroid运行Android APP1. 安装要求2. 本机环境3. 安装 Waydroid4. 网络配置5.注册Google设备6. 运行效果图 Waydroid是Anbox配合Haliun技术开发的LXC Android容器&#xff0c;可在GUN/Linux系…

华三云课堂CAS5.0忘记admin密码?

当忘记修改后的管理平台 admin 账户密码&#xff0c;无法登录管理平台。 处理步骤&#xff1a; (1) SSH 连接服务器。 (2) 执行/var/lib/h3class/bin/reset-admin-pwd.sh 命令。 (3) 重置后的密码为 Cloud1234

src漏洞挖掘--验证码篇

图片验证码 验证码前端检测 验证码由客户端JS生成并且仅仅在客户端用JS验证&#xff0c;通过抓包看数据传输是否有验证码字段或者是关闭JS看能否通过验证。 测试方法&#xff1a;当我们开始抓包&#xff0c;输入任意验证码&#xff0c;页面提示验证码错误&#xff0c;且没有抓…

《AM-Bi-LSTM: Adaptive Multi-Modal Bi-LSTM for Sequential Recommendation》

系列论文研读目录 文章目录 系列论文研读目录1.2.3.4.5.6.7.8.9.10. 文章链接 1. 2. 3. 4. 5. 6. 7. 8. 9. 10.

【Python中GDAL和OGR的优缺点】

GDAL&#xff08;Geospatial Data Abstraction Library&#xff09;和OGR&#xff08;OpenGIS Simple Features Reference Implementation&#xff09;在地理信息系统&#xff08;GIS&#xff09;和遥感领域都扮演着重要角色&#xff0c;它们各自具有一些优点和缺点。以下是对G…

如何远程调用运维人员电脑桌面

要远程调用运维人员的电脑桌面&#xff0c;可以通过以下几种方法和工具&#xff1a; 一、使用第三方远程控制软件&#xff1a; 要远程访问操作和维护人员的桌面&#xff0c;您可以使用专业的远程桌面软件按照以下步骤操作。以下是使用 Splashtop 的一般指南&#xff0c;但对于…

ME11-创建采购信息记录

ME11 创建采购信息记录 创建Info Record时&#xff0c;工厂不是必输项。因为采购组织可以对应多个工厂&#xff0c;所以可以针对一个工厂设定Info Record&#xff0c;也可以不固定。 计划交货时间维护供应商收到采购订单后&#xff0c;把货送到工厂的时间。 标准数量一般维护为…

MacOS查看端口占用

在macOS系统中&#xff0c;可以使用lsof和netstat命令来查看端口占用情况。 使用lsof命令 lsof -i :端口号替换端口号为你想要检查的端口。例如&#xff0c;要查看端口8080的占用情况&#xff0c;可以使用&#xff1a; lsof -i :8080使用netstat命令 首先&#xff0c;你需要…

工作中经常听到的云、边、端到底是什么意思?

工作中经常听到的云、边、端到底是什么意思&#xff1f; 在数字化和智能化飞速发展的今天&#xff0c;“云”、“边”、“端”这三个词频频出现在我们的生活和工作中。它们代表着不同的数据处理和计算模式&#xff0c;极大地改变了我们的生活方式。那么&#xff0c;它们分别是…

《Linux运维总结:基于x86_64架构CPU使用docker-compose一键离线部署zookeeper 3.8.4容器版分布式集群》

总结&#xff1a;整理不易&#xff0c;如果对你有帮助&#xff0c;可否点赞关注一下&#xff1f; 更多详细内容请参考&#xff1a;《Linux运维篇&#xff1a;Linux系统运维指南》 一、部署背景 由于业务系统的特殊性&#xff0c;我们需要面对不同的客户部署业务系统&#xff0…

邮件攻击案例系列四:某金融企业遭遇撒网式钓鱼邮件攻击

案例描述 2023 年 3 月末&#xff0c;某知名投资公司业务经理李先生先后收到两封看似是来自邮件服务商和公司网络安全部门发出的邮件&#xff0c;标题是“紧急&#xff1a;邮箱安全备案更新通知”。邮件内容称&#xff0c;由于最近公司内部系统升级&#xff0c;所有员工必须重…

【Python机器学习】朴素贝叶斯——使用朴素贝叶斯过滤垃圾邮件

使用朴素贝叶斯解决一些现实生活中的问题时&#xff0c;需要先从文本内容中得到字符串列表&#xff0c;然后生成词向量。 使用朴素贝叶斯对电子邮件进行分类的过程&#xff1a; 1、收集数据&#xff1a;提供文本文件 2、准备数据&#xff1a;将文本文件解析成词条向量 3、分析…

Kubernetes 面试题及答案整理,最新面试题

Kubernetes中Pod是什么,它与容器有什么区别? Pod是Kubernetes中的基本运行单元,可以包含一个或多个紧密相关的容器。它们共享相同的网络命名空间、IP地址和端口空间,可以访问相同的存储资源。Pod作为单个应用的最小单元,确保其中的容器在同一个运行环境中并且相互之间的网…

【Windows】Mountain Duck(FTP服务器管理工具)软件介绍

软件介绍 Mountain Duck是一款基于Cyberduck开发的应用程序&#xff0c;它允许用户通过FTP、SFTP、WebDAV、S3和OpenStack Swift等协议连接到云存储和远程服务器&#xff0c;并在本地文件浏览器中以熟悉的方式访问和管理这些文件。 功能特点 支持多种协议: Mountain Duck支持…

面向对象程序设计(C++)模版初阶

1. 函数模版 1.1 函数模版概念 函数模板代表了一个函数家族&#xff0c;该函数模板与类型无关&#xff0c;在使用时被参数化&#xff0c;根据实参类型产生函数的特定类型版本&#xff0c;可以类比函数参数&#xff0c;函数模版就是将函数参数替换为特定类型版本 1.2 函数模版格…

BUG 太多?苹果罕见“重新推送”ios18 beta 4测试版

在刚刚过去的周末&#xff0c;苹果公司面向开发者&#xff0c;重新发布了 iOS / iPadOS 18 Beta 4 更新&#xff0c;内部版本号从 22A5316j 变为 22A5316k&#xff0c;目前尚不清楚两个 Beta 4 版本更新之间的区别。 此次更新包大小仅为251M左右&#xff0c;是 更新。 对于已经…

精品PPT | 微信云原生大数据平台构建及落地实践.pptx

一、大数据上云概述 1.为什么大数据要上云 2.微信大数据平台架构演进 二、大数据上云基础建设 1.统一编排 2.Pod 设计及大数据配套能力 3.计算组件云环境适配 三、稳定性及效率提升 1.K8S 集群稳定性与弹性配额 2.可观测性与智能运维

基于OpenCV C++的网络实时视频流传输——Windows下使用TCP/IP编程原理

1.TCP/IP编程 1.1 概念 IP 是英文 Internet Protocol &#xff08;网络之间互连的协议&#xff09;的缩写&#xff0c;也就是为计算机网络相互连接进行通信而设计的协议。任一系统&#xff0c;只要遵守 IP协议就可以与因特网互连互通。 所谓IP地址就是给每个遵循tcp/ip协议连…

[QT开发_音乐播放器项目笔记01]

目录 一&#xff1a;常用类 26 QByteArray 是 Qt 框架中的一个类&#xff0c;用于处理字节数组。它提供了动态大小的字节数组&#xff0c;可以用于存储和操作二进制数据&#xff0c;比如文件内容、网络数据等。 QT项目记录&#xff1a; 一&#xff1a;常用类 26 QByteArray…