vue3 - 150

目录

      • vue优势
      • 使用方式
      • 编写vue代码
      • 指令
      • 响应式数据
      • 其他

vue优势

功能全面生态好,语法简洁效率高,免去 DOM 操作苦,开发重任一肩挑!

使用方式

1.通过cdn引入来将 Vue 应用到整个页面
在这里插入图片描述
2.或通过官方脚手架 create-vue来创建完整的vue应用
在这里插入图片描述

编写vue代码

单文件组件 - template,script,style,

指令

可替代dom操作
v-text:为标签设置纯文本内容,
在这里插入图片描述
v-html:可以生成标签结构
在这里插入图片描述
v-if:可以根据数据判断是否要渲染这个元素
在这里插入图片描述
v-for:渲染列表数据
在这里插入图片描述
v-on:设置事件
在这里插入图片描述

响应式数据

设置视图(组件的数据)动态更新,可以使用vue中提供的方法,将数据设置为响应式,

对于对象值可以使用reactive
在这里插入图片描述
对于不可变的原始值可以使用ref将其包裹为响应式数据
在这里插入图片描述
当这些响应式数据发生变化时,它会自动传递到模板的对应位置,组件将自动重新渲染,

其他

使用computed计算属性缓存数据
在这里插入图片描述
使用侦听器在数据变化时执行指定操作
在这里插入图片描述
可以使用官方路由管理工具 Vue Router 和状态管理工具 Pinia 进行路由和状态管理

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

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

相关文章

AI可以成为重新点燃数字化转型的催化剂

你是如何陷入困境的 数字化转型对很多人来说意味着很多事情。是为了变得更有效率吗?升级工具?向客户提供新的数字产品?采用数据驱动策略?改变内部文化?我们并不总能看到这些能够团结组织的统一目标。这种缺乏重点常常…

迄今为止最全- 前端性能优化

简介 当我们说前端性能优化的时候,指的可能是不同场景的性能优化。前端涉及性能优化的场景主要有: 项目构建性能优化 页面性能优化 加载时性能优化 运行时性能优化 构建性能主要指构建速度,优化方法和打包工具直接相关,主要…

【React】redux开发者工具redux-devtools-extension的安装和使用

前言 redux-devtools-extension: 是一个用于Redux的开发者工具扩展。适合用于需要调试和监控Redux应用的状态管理。特点是可以提供实时的状态查看、行动日志和错误检测等 安装 chrome安装redux-devtools-extension 项目中安装并引入redux-devtools-extension yarn add re…

十一、Redis持久化-RDB、AOF

Redis提供了两种持久化数据的方式。一种是RDB快照,另一种是AOF日志。RDB快照是一次全量备份,AOF日志是连续的增量备份。RDB快照是以二进制的方式存放Redis中的数据,在存储上比较紧凑;AOF日志记录的是对内存数据修改的指令文本记录…

解双曲型非线性方程的Harden-Yee算法(TVD格式)

解双曲型非线性方程的TVD格式Harden-Yee算法 算法如图 该算法可以很好地压制震荡,并且耗散很小。具体算法如图所示 import matplotlib import math matplotlib.use(TkAgg) import numpy as np import matplotlib.pyplot as plt def Phiy(yy,epsi):#phi(y)if a…

2024 年中国大学生程序设计竞赛全国邀请赛(郑州)暨第六届CCPC河南省大学生程序设计竞赛 problem K. 树上问题

//先找一个美丽的树&#xff0c;然后遍历树找节点,分析是否符合条件。 //画几个图&#xff0c;思考下。 #include<bits/stdc.h> using namespace std; #define int long long const int n1e611; int a,b,c[n],d,l,r,k,w,an; vector<int>t[n]; void dfs(int x,int…

【吃透Java手写】5-RPC-简易版

【吃透Java手写】RPC-简易版-源码解析 1 RPC1.1 RPC概念1.2 常用RPC技术或框架1.3 初始工程1.3.1 Productor-common&#xff1a;HelloService1.3.2 Productor&#xff1a;HelloServiceImpl1.3.3 Consumer 2 模拟RPC2.1 Productor2.2 模拟一个RPC框架2.2.1 HttpServer2.2.2 Http…

如何通过香港站群服务器高效实现网站内容的快速更新?

如何通过香港站群服务器高效实现网站内容的快速更新? 在当今激烈的数字市场竞争中&#xff0c;网站内容的快速更新对于吸引用户和保持竞争优势至关重要。而利用香港站群服务器实现这一目标&#xff0c;则具备诸多优势。下面将详细探讨如何通过香港站群服务器高效实现网站内容…

ARM架构安全特性之隔离技术

安全之安全(security)博客目录导读 目录 一、保护代码和数据 二、TrustZone 三、安全世界之间的隔离 四、Secure-EL2扩展 五、保护主流计算工作负载 六、领域管理扩展(RME) 七、内存密集型可信应用程序 八、Arm动态TrustZone技术 强制执行明确定义的安全边界是安全工程…

华为eNSP Pro模拟器最新版R001C10(普通账号可用)

eNSP Pro 最新版 R001C10下载&#xff1a;&#xff08;支持AP、AC、m-lag等&#xff09; eNSP-Pro_V100R001C10_Software_X8664_qemu_release.tar.gz eNSP-Pro_V100R001C10_Software_X8664_VirtualBox_release.tar.gz 好消息&#xff01;华为终于开放了普通账号使用权限&#…

智能制造数字工厂未来三年规划方案(80页ppt下载)

一、资料介绍 智能制造数字工厂未来三年规划方案是一份全面而深入的战略性文件&#xff0c;旨在指导我们公司在未来三年内实现智能制造领域的跨越式发展。这份80页的PPT资料&#xff0c;以“智能制造、智能制造系统、数字化工厂、数字孪生工厂、智能工厂和数字化车间”为核心关…

日志的基本用法

目标 1. 掌握如何设置日志级别 2. 掌握如何设置日志格式 3. 掌握如何将日志信息输出到文件中 1. logging模块 Python中有一个标准库模块logging可以直接记录日志 1.1 基本用法 import logging logging.debug("这是一条调试信息") logging.info("这是一条…