vue 3 —— 笔记(模板语法,响应式变量)

模板语法:

Vue 使用一种基于 html 的模板语法,使我们能声明式将其组件实例绑定到呈现的 dom 上

文本插值

基础数据绑定形式 双大括号 会替换相应组件实例 msg 属性的值

原始html

 双大括号会将数据解释为纯文本 不是html 想插入html 使用 v-html 指令

 <div v-html="html"></div>let html = "<p>99999</p>";

属性绑定

双大括号不能在 html 属性中使用,想要响应式的绑定一个属性 使用 v-bind指令

简写  :id ='dhynameid'

动态绑定多个值   通过不带参数的 v-bind 可以将它们绑定到单个元素上

使用 javeScript 表达式

这些表达式 会作为 javescript, 当前组件实例为作用域解析执行

Vue3 模板语法基本上和 Vue2 是一样的,但是有一些新的改进和特性。

  1. 插值:在模板中使用双大括号 {{ }} 语法进行数据绑定,例如 {{ message }}。可以在插值语法中使用 JavaScript 表达式,例如 {{ message.toUpperCase() }}

  2. 指令:使用指令可以对元素进行动态绑定和操作。常用指令包括 v-if 控制元素显示与隐藏、v-for 遍历数组生成列表、v-model 实现双向数据绑定等。

  3. 事件绑定:通过 @ 符号可以绑定事件监听器,例如 @click="handleClick"。事件监听器可以接受参数,例如 @click="handleClick(args)"

  4. 属性绑定:使用 v-bind 或简写符号 : 可以动态绑定元素属性,例如 v-bind:src="imageSrc" 或 :src="imageSrc"

  5. 动态类名和样式:使用 v-bind:class 和 v-bind:style 可以动态绑定元素的类名和样式。也可以直接在标签上使用对象或数组的方式绑定类名和样式。

  6. 插槽:插槽是 Vue 提供的一种灵活的组件内容分发机制。使用 v-slot 或其简写符号 # 可以定义插槽,为组件提供灵活的内容分发方式。

响应式

声明响应式状态

可以使用 reactive() 创建一个响应式对象或数组  

响应式对象其实就是 JavaScript proxy ,其行为表现于一般对象相似

不同之处在于vue能够跟踪响应式对象属性的访问与更改操作

要在组件中使用 响应式变量 需要在setup函数中定义并返回 // setup 是一个用于组合式api的特殊钩子函数

<script setup>

可以构建工具简化改操作

DOM更新时机

当更改响应式状态后,DOM会自动更新。然而,DOM的更新不是同步的,相反,vue将

缓冲它们知道更新周期的下个时机,以确保无论你进行了多少次状态更改,每个组件只更新一次

若要等待一个状态改变后的DOM更新完成,可以使用 nextTick() 这个全局api

深层响应性

在vue中,状态都是默认深层响应式的,这意味着即使在更改深层次的i对象或数组,改动也能被检测

响应式代理 vs. 原始对象

只有代理对象是响应式的,更改原始对象不会触发更新,因此,使用 vue 的响应式系统的

最佳实践式 仅使用你声明对象的代理版本

 

对同一个对象调用总是返回同样的代理对象,而对一个已存在的代理对象调用reactive 会返回本身

 

 

Reactive() 的局限性

 reactive() api有两条限制性

  1. 仅对对象类型有效(对象,数组和map,set这样的集合类型),对基础类型无效
  2. Vue的响应式是通过属性访问进行追踪的,因此我们必须保持对象的相同引用,这意味着我们不可以随意替换一个响应式对象

将响应式对象的属性赋值或结构至本地变量是,或是该属性传入一个函数,会失去响应性

 

用 ref 定义响应式变量

 ref允许我们可以创建任何类型值的响应式           

 ref 将传入参数包装一个带.value属性的ref对象

 和响应式的对象属性类似,ref的.value也是响应式的 

 ref 被传递给函数或是从一般对象被结构时 不会丢失响应性

 ref 在模板中使用时,会自动解包,无需使用.value

 ref在对象中会解包 数组中不会

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

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

相关文章

mac 安装 python3

1、安装 brew install python2、配置 环境变量 打开 sudo vi ~/.bash_profile 添加 export PATH"/opt/homebrew/bin:$PATH"重载 source ~/.bash_profile ✗ source ~/.zshrc # 按需3、验证 方式 1 ls -l /opt/homebrew/bin/python3 方式 2 echo…

Unity和iOS 原生专题二 Unity和iOS原生交互相互传值的两个方案

一 、方案一 通过指针传值和使用 MonoPInvokeCallback 从C#层向C层注册回调函数 1.1 iOS调用Unity函数Unity 给iOS传值 第一步C#端 定义 C#调用 ios 原生函数标识 固定写法 /// <summary>/// 定义 C#调用 ios 原生函数标识 固定写法/// </summary>private const …

【SpringCloud】CircuitBreaker断路器之Resilience4J快速入门

【SpringCloud】CircuitBreaker断路器之Resilience4J快速入门 文章目录 【SpringCloud】CircuitBreaker断路器之Resilience4J快速入门1. 概述2. 服务熔断服务降级(CircuitBreaker)2.1 案例说明2.1.1 基于计数的滑动窗口2.1.2 测试2.2.1 基于时间的滑动窗口2.2.2 测试 3. 隔离(B…

前端单元测试的艺术:专业化策略与Vue项目高效实践指南

单元测试是软件开发中的基石&#xff0c;尤其对于前端领域&#xff0c;它为保证代码质量、提升开发效率、强化项目稳定性提供了不可或缺的支持。本文将深入剖析单元测试的核心理念&#xff0c;揭示其在前端开发中的独特价值&#xff0c;并提炼出一套专业且高效的实践策略&#…

git 基础知识(全能版)

文章目录 一 、git 有三个分区二、git 基本操作1、克隆—git clone2、拉取—git fetch / git pull3、查看—git status / git diff3.1 多人开发代码暂存技巧 本地代码4、提交—git add / git commit / git push5、日志—git log / git reflog6、删除—git rm ‘name’7、撤销恢…

阿里云服务器(Ubuntu22)上的MySQL8更改为大小写不敏感

因为windows上默认的mysql8.0是大小写不敏感的&#xff0c;部署到服务器上之后发现ubuntu默认的是大小写敏感&#xff0c;所以为了不更改代码&#xff0c;需要将mysql数据库设置为大小写不敏感的。 &#xff01;&#xff01;&#xff01;重要一定要做好数据库的备份&#xff0…

MyBatis特殊SQL的执行

文章目录 一、模糊查询二、批量删除三、动态设置表名四、添加功能获取自增的主键 一、模糊查询 /*** 通过用户名模糊查询用户信息* param mohu* return*/List<User> getUserByLike(Param("mohu") String mohu);<!--List<User> getUserByLike(Param(&q…

微服务与单体应用之间的调用问题

前言 本文转自 www.microblog.store,且已获得授权 一、问题背景 microblog.store微博客使用了微服务架构,并且docker容器化部署; 另有一个独立的单体应用,功能是: 作为ip地址解析中心; 微服务集群以及该单体应用都部署到同一台服务器上面,有需要的时候微服务集群里面某个微服务…

使用JavaScript日历小部件和DHTMLX Gantt的应用场景(一)

DHTMLX Suite UI 组件库允许您更快地构建跨平台、跨浏览器 Web 和移动应用程序。它包括一组丰富的即用式 HTML5 组件&#xff0c;这些组件可以轻松组合到单个应用程序界面中。 DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表&#xff0c;可满足项目管理应用…

「51媒体」城市推介会,地方旅游推荐,怎么做好媒体宣传

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 城市推介会和地方旅游推荐是城市形象宣传的重要组成部分&#xff0c;通过有效的媒体宣传可以提升城市的知名度和吸引力。&#xff1a; 一&#xff0c;活动内容层面&#xff1a; 突出亮点…

pyqt设置标签显示图片并设置大小

pyqt设置标签显示图片并设置大小 标签显示图片效果代码 标签显示图片 使用 QPixmap 加载图片进行图片大小设置把图片对象设置到标签上 效果 代码 from PyQt5.QtWidgets import QApplication, QLabel, QVBoxLayout, QWidget from PyQt5.QtGui import QPixmap import sys from…

某赛通电子文档安全管理系统 多处 SQL注入漏洞复现

0x01 产品简介 某赛通电子文档安全管理系统(简称:CDG)是一款电子文档安全加密软件,该系统利用驱动层透明加密技术,通过对电子文档的加密保护,防止内部员工泄密和外部人员非法窃取企业核心重要数据资产,对电子文档进行全生命周期防护,系统具有透明加密、主动加密、智能…

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK在相机图像中绑定元数据和块数据(C#)

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK在相机图像中绑定元数据和块数据&#xff08;C#&#xff09; Baumer工业相机Baumer工业相机NEOAPI SDK和元数据和块数据的技术背景Baumer工业相机通过NEOAPISDK在相机图像中绑定元数据和块数据功能1.引用合适的类文件2.通过NEOAPI…

采购数据分析驾驶舱分享,照着它抄作业

今天我们来看一张采购管理驾驶舱。这是一张充分运用了多种数据可视化图表、智能分析功能&#xff0c;从物料和供应商的角度全面分析采购情况的BI数据可视化报表&#xff0c;主要分为三个部分&#xff0c;接下来就分部分来了解一下。 第一部分&#xff1a;关键指标计算及颜色预…

从零入门区块链和比特币(第一期)

欢迎来到我的区块链与比特币入门指南&#xff01;如果你对区块链和比特币感兴趣&#xff0c;但不知道从何开始&#xff0c;那么你来对地方了。本博客将为你提供一个简明扼要的介绍&#xff0c;帮助你了解这个领域的基础知识&#xff0c;并引导你进一步探索这个激动人心的领域。…

2024.4.26力扣每日一题——快照数组

2024.4.26 题目来源我的题解方法一 TreeMap方法二 哈希表二分法 题目来源 力扣每日一题&#xff1b;题序&#xff1a;1146 我的题解 方法一 TreeMap 使用TreeMap记录每个snip_id下的修改记录。 在set时&#xff0c;判断snip_id下是否有修改记录&#xff0c;若无则将最后一次…

rabbitmq集群配置

1&#xff0c;配置环境变量 MY_POD_NAME&#xff1a;当前Pod的名称 RABBITMQ_ERLANG_COOKIE&#xff1a;设置Erlang Cookie用于节点间通信安全验证&#xff0c;值来自/nfs/rabbitmq/lib/.erlang.cookie文件内容 RABBITMQ_NODENAME&#xff1a;根据Pod名称动态生成了RabbitMQ…

【GO】命令行解析 os 与 flag

目录 OS解析命令 简单用法 进阶用法 flag命令解析 基础实例 1. 自定义数据类型 2. 创建多个 FlagSet 3. 整合环境变量和配置文件 os与flag 关键点解析 程序的作用 示例命令行调用 在 Go 语言中&#xff0c;命令行解析是一项基本且常用的功能&#xff0c;它允许开发者…

微信小程序简单实现购物车功能

微信小程序简单实现购物车结算和购物车列表展示功能 实现在微信小程序中对每一个购物车界面的商品订单&#xff0c;进行勾选结算和取消结算的功能&#xff0c;相关界面截图如下&#xff1a; 具体实现示例代码为&#xff1a; 1、js代码&#xff1a; Page({/*** 页面的初始数…

K8s: 公有镜像中心和私有镜像中心的搭建

公有镜像中心的搭建和使用 1 &#xff09;在 官方docker镜像中心推送 在 hub.docker.com 上注册账号 (国内一般访问不了&#xff0c;原因不多说) 找到 Create Repository 按钮就行仓库的创建 这样就在官方创建了一个仓库&#xff0c;比如地址为: xx/y-y xx 是我的账户名y-y 是…