VUE的快速使用

使用步骤

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><h1>{{message}}</h1>  </div><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';createApp({data(){return{message:"hello world"}}}).mount("#app");</script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述
引入官方提供的VUE组件,然后填写信息。

用 createApp 创建了一个 Vue 应用实例,并且通过 mount 把它挂载到一个 HTML 元素上。

通过过 data 方法,定义了应用的数据,并通过模板语法 {{ }} 来显示这些数据。

在这里插入图片描述
这样子 一个简单的VUE使用就完成了。

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

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

相关文章

ctfshow-web入门-命令执行(web56、web57、web58)

目录 1、web56 2、web57 3、web58 1、web56 命令执行&#xff0c;需要严格的过滤 新增过滤数字&#xff0c;只能采用上一题临时文件上传的方法&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><…

技术周总结2024.06.17~06.23(Doris数据库)

文章目录 一、06.18 周二1.1&#xff09; 问题01&#xff1a; doris数据表写入使用 stream load好还是 inser into好 一、06.18 周二 1.1&#xff09; 问题01&#xff1a; doris数据表写入使用 stream load好还是 inser into好 对于Doris数据表的写入操作&#xff0c;通常推荐…

2024-6-29 石群电路-33

2024-6-29&#xff0c;星期六&#xff0c;17:23&#xff0c;天气&#xff1a;雨转多云&#xff0c;心情&#xff1a;晴。经历了两周的雨天&#xff0c;今天终于见点儿阳光啦&#xff0c;虽然有点热&#xff0c;但是心情更好了&#xff0c;上午去给用了三年的电脑做了清灰换硅脂…

【python - 数据】

一、序列 序列&#xff08;sequence&#xff09;是一组有顺序的值的集合&#xff0c;是计算机科学中的一个强大且基本的抽象概念。序列并不是特定内置类型或抽象数据表示的实例&#xff0c;而是一个包含不同类型数据间共享行为的集合。也就是说&#xff0c;序列有很多种类&…

Ubuntu22.04 源码安装 PCL13+VTK-9.3+Qt6,踩坑记录

Ubuntu 22.04LTS;cmake-3.25.0;VTK-9.3;PCL-1.13;Qt6.6 PCL可以通过 apt 命令直接安装(sudo apt install libpcl-dev),apt 命令安装的 VTK 是简略版,没有对 Qt 支持的包,所以笔者使用源码安装 PCL 和 VTK。 1. 安装 VTK 1) 安装 ccmake 和 VTK 依赖项: sudo apt-g…

Stylized Modular Character (Female)(程式化的模块化角色(女性)“运动型”)

一套程式化的角色模块化部件。 在这样的插槽中定制&#xff1a; 头 躯干 手 裤子 靴子 头发 每个插槽都有 2 到 5 个在 URP 中工作的 PBR 材料的选项。 该项目基于官方 Unity Standard Assets 包中的 Ethan 默认角色。 不包含动画。 皮肤网格的 SSS 是由自发光贴图伪造的。 如果…

怎样查看自己的Windows电脑最近弄了哪些内容

一、需求说明 有时候我们的电脑别人需要使用&#xff0c;你不给他使用又不行&#xff0c;且你也不在电脑身边&#xff0c;你只能告诉他自己的电脑密码让他操作&#xff0c;此时你并不不知道他操作了哪些内容。 还有一个种情况是自己不在电脑旁边&#xff0c;且电脑没有锁屏&…

Pytest集成Allure生成测试报告

# 运行并输出报告在Report文件夹下 查看生成的allure报告 1. 生成allure报告&#xff1a;pycharm terminal中输入命令&#xff1a;产生报告文件夹 pytest -s --alluredir../report 2. pycharm terminal中输入命令&#xff1a;查看生成的allure报告 allure serve ../report …

傻瓜交换机多网段互通组网、设备无法配置网关案例

记录一下&#xff1a; 一、傻瓜交换机多网段互通组网 1、客户在核心交换机上创建了VLAN10&#xff0c;VLAN20。 VLAN10&#xff1a;IP192.168.10.254 VLAN20&#xff1a;IP192.168.20.254 在核心交换机下挂了一台傻瓜交换机&#xff0c;傻瓜交换机接入了一台OA服务器IP&#…

压缩pdf在线工具,压缩pdf大小的软件

如何有效地压缩PDF文件大小却是个问题&#xff0c;为了获得最佳的压缩效果&#xff0c;我们必须依赖专业的压缩工具&#xff0c;采用错误的方法可能会对文件内容产生负面影响&#xff0c;甚至导致文件无法打开&#xff0c;今天&#xff0c;我将分享一些独特的压缩技巧&#xff…

小程序接口报错ERR_CERT_COMMON_NAME_INVALID

收到 ERR_CERT_COMMON_NAME_INVALID 错误&#xff0c;可能是因为使用了不受信任的证书或自签名证书。以下是一些可能的解决方法&#xff1a; 1. 检查域名配置&#xff1a; • 确保 manifest.json 中的合法域名配置正确。 • 确认微信小程序后台也添加了对应的域名。 2. 使用…

C++进阶之哈希

一、unordered系列关联式容器 在C98中&#xff0c;STL提供了底层为红黑树结构的一系列关联式容器&#xff0c;在查询时效率可达到&#xff0c;即最差情况下需要比较红黑树的高度次&#xff0c;当树中的节点非常多时&#xff0c;查询效率也不理想。最好的查询是&#xff0c;进行…

【python012】Python根据页码处理PDF文件的内容

在日常工作和学习中&#xff0c;需要从PDF文件中提取特定页面的内容&#xff0c;以便进行知识、材料压缩等。 2.欢迎点赞、关注、批评、指正&#xff0c;互三走起来&#xff0c;小手动起来&#xff01; 3.欢迎点赞、关注、批评、指正&#xff0c;互三走起来&#xff0c;小手动起…

MyBatis Plus条件构造器使用

1Wrapper&#xff1a; 条件构造抽象类&#xff0c;最顶端父类 1.1 AbstractWrapper&#xff1a; 用于查询条件封装&#xff0c;生成 sql 的 where 条件 1.2 QueryWrapper&#xff1a; Entity 对象封装操作类&#xff0c;不是用lambda语法 1.3 UpdateWrapper&#xff1a; Update…

【工具分享】Nuclei

文章目录 NucleiLinux安装方式Kali安装Windows安装 Nuclei Nuclei 是一款注重于可配置性、可扩展性和易用性的基于模板的快速漏洞验证工具。它使用 Go 语言开发&#xff0c;具有强大的可配置性、可扩展性&#xff0c;并且易于使用。Nuclei 的核心是利用模板&#xff08;表示为简…

前端学习笔记(2406261):jquery使用checkbox控制页面自动刷新

文章目录 需求登录页面主页面 API用户登录login获取数据getdata 代码登录页面主页面 关于后端 需求 这是一个物联网的演示项目&#xff0c;web端能够实时显示后台数据的变化&#xff0c;其流程非常简单&#xff1a; 用户登录登录成功后显示主界面面主界面进入后自动显示数据数…

仓库管理系统19--盘存管理

原创不易&#xff0c;打字不易&#xff0c;截图不易&#xff0c;多多点赞&#xff0c;送人玫瑰&#xff0c;留有余香&#xff0c;财务自由明日实现 1、什么是盘存 盘存也叫盘库&#xff0c;盘库是指对一个仓库、库房或者商店的库存进行全面清点和核对的过程。在盘库过程中&am…

L03_Redis知识图谱

这些知识点你都掌握了吗?大家可以对着问题看下自己掌握程度如何?对于没掌握的知识点,大家自行网上搜索,都会有对应答案,本文不做知识点详细说明,只做简要文字或图示引导。 Redis 全景图 Redis 知识全景图都包括什么呢?简单来说,就是“两大维度,三大主线”。 Redis …

IDEA中导入Maven项目

IDEA中导入Maven项目 方式1&#xff1a;使用Maven面板&#xff0c;快速导入项目 打开IDEA&#xff0c;选择右侧Maven面板&#xff0c;点击 号&#xff0c;选中对应项目的pom.xml文件&#xff0c;双击即可 说明&#xff1a;如果没有Maven面板&#xff0c;选择 View > Appe…

qt 开发笔记 动态链接库应用

1.概要 1.1 需求 库有两种&#xff0c;动态库和静态库&#xff0c;这里说的是动态库&#xff1b;动态库的加载方式有两种&#xff0c;一直是静态的一种是动态的&#xff0c;这里的静态加载是指静态加载动态&#xff0c;是一种加载动态库的方式。也有一种动态加载的方式&#…