【Vue】Vue的安装

🏆今日学习目标:Vue3的安装
😃创作者:颜颜yan_
✨个人格言:生如芥子,心藏须弥
⏰本期期数:第一期
🎉专栏系列:Vue3


文章目录

  • 前言
  • Vue3安装
    • 独立版本
    • CDN安装
  • 第一个Vue程序
  • 总结


前言

Vue是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。


Vue3安装

独立版本

安装vue3可以在官网下载vue,然后本地使用script标签进行引用。vue官网和下载vue如下👇
vue官网
下载vue

CDN安装

可以借助 script 标签直接通过 CDN 来使用 Vue:
Staticfile CDN:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

unpkg:

<script src="https://unpkg.com/vue@next "></script>

这里我们使用了 unpkg,但你也可以使用任何提供 npm 包服务的 CDN, unpkg会保持和 npm 发布的最新的版本一致。通过 CDN 使用 Vue 时,不涉及“构建步骤”。这使得设置更加简单,并且可以用于增强静态的 HTML 或与后端框架集成。

第一个Vue程序

接下来,我们来编写第一个Vue程序吧~

首先创建一个html文件,在head中使用script标签引入vue,在body中添加一个div,添加id为app,使用 {{}}进行数据绑定,添加一个数据message

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello</title>
    <script src="https://unpkg.com/vue@next "></script>
</head>
<body>
    <div id="app">{{message}}</div>
</body>
</html>

接着使用createApp创建vue的应用,这个方法接收一个对象,使用mount方法进行挂载,将Vue的应用绑定到app上。

<script>
    Vue.createApp({
        data(){
            return{
                message:'Hello Vue'
            }
        }
    }).mount("#app")
</script>

保存运行,我们就可以在页面上看到Hello Vue了~
在这里插入图片描述


总结

以上就是今天的学习内容啦~
如果有兴趣的话可以订阅专栏,持续更新呢~
咱们下期再见~
在这里插入图片描述

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

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

相关文章

元数据管理实践数据血缘

元数据管理实践&数据血缘 什么是元数据&#xff1f;元数据MetaData狭义的解释是用来描述数据的数据&#xff0c;广义的来看&#xff0c;除了业务逻辑直接读写处理的那些业务数据&#xff0c;所有其它用来维持整个系统运转所需的信息&#xff0f;数据都可以叫作元数据。比如…

训练自己的GPT2-Chinese模型

文章目录效果抢先看准备工作环境搭建创建虚拟环境训练&预测项目结构模型预测续写训练模型遇到的问题及解决办法显存不足生成的内容一样文末效果抢先看 准备工作 从GitHub上拉去项目到本地&#xff0c;准备已训练好的模型百度网盘&#xff1a;提取码【9dvu】。 gpt2对联训…

10.0自定义SystemUI下拉状态栏和通知栏视图(六)之监听系统通知

1.前言 在进行rom产品定制化开发中,在10.0中针对systemui下拉状态栏和通知栏的定制UI的工作开发中,原生系统的下拉状态栏和通知栏的视图UI在产品开发中会不太满足功能, 所以根据产品需要来自定义SystemUI的下拉状态栏和通知栏功能,首选实现的就是下拉通知栏左滑删除通知的部…

【12】SCI易中期刊推荐——计算机信息系统(中科院4区)

🚀🚀🚀NEW!!!SCI易中期刊推荐栏目来啦 ~ 📚🍀 SCI即《科学引文索引》(Science Citation Index, SCI),是1961年由美国科学信息研究所(Institute for Scientific Information, ISI)创办的文献检索工具,创始人是美国著名情报专家尤金加菲尔德(Eugene Garfield…

SpringCloudAlibaba配置中心: nacos-config

nacos-config配置中心 本项目代码与笔记已存放在Gitee仓库 地址&#xff1a; 代码&#xff0c;笔记 文章目录nacos-config配置中心1.1 快速开始1.2 搭建nacos-config服务1.3 Config相关配置1.3.1 支持profile粒度的配置示例&#xff1a;1.3.2 支持命名空间分类配置(按环境规类…

【批处理】- 批处理自动安装Mysql与Redis

前言 在全新环境中安装MySQL与Redis操作是挺麻烦的&#xff0c;于是就想使用脚本来自动安装&#xff0c;使用批处理进行一步到位的安装&#xff0c;后面还能使用工具进行打包成exe可执行文件&#xff0c;一键安装&#xff0c;最后能够更好的部署项目到windows系统的服务器。 …

READ: Large-Scale Neural Scene Rendering for Autonomous Driving

READ: Large-Scale Neural Scene Rendering for Autonomous Driving &#xff1a;面向自动驾驶的大规模神经场景绘制 门卷积 https://www.jianshu.com/p/09fc8490104d https://blog.csdn.net/weixin_44996354/article/details/117409438摘要&#xff1a;论文提出了一种大规模神…

vue2前端实现html导出pdf功能

1. 功能实现方案 1.html转换成canvas后生成图片导出pdf&#xff08;本文选用&#xff09; html转canvas插件&#xff1a;html2canvas是一款将HTML代码转换成Canvas的插件&#xff1b;canvas生成pdf&#xff1a;jsPDF是一个使用Javascript语言生成PDF的开源库 2.HTML代码转出…

【剑指offer】10~11.斐波那契数列(C# 实现)

文章目录前言关于编译环境10- I. 斐波那契数列10- II. 青蛙跳台阶问题11. 旋转数组的最小数字结语前言 &#x1f340; 大家好&#xff0c;我是哈桑。这是自己的 C# 做题记录&#xff0c;方便自己学习的同时分享出来。 关于编译环境 注意&#xff0c;笔者使用的编译环境是 .NET …

Java学习星球,Java学习路线

目录一、Java学习路线二、学习计划三、为何会有Java学习星球&#xff1f;四、加入星球后&#xff0c;你可以得到什么&#xff1f;五、如何加入Java学习星球&#xff1f;六、打卡挑战大家好&#xff0c;我是哪吒&#xff0c;一个靠着热情攀登至C站巅峰的中年男子&#xff0c;CSD…

全网最火爆,Python接口自动化测试-接口数据 RSA 加密和签名实现(超详细)

目录&#xff1a;导读前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09;前言 在工作中&#xff0…

算法基础---数学知识

文章目录 质数 试除法判定质数试除法分解质因数朴素筛法求质数埃氏筛法求质数线性筛法求质数约数 试除法求所有约数试除法求所有约数之和约数个数和约数之和欧几里得算法一、质数 1.试除法判定质数--O(sqrt(N)) 原理&#xff1a;把从[2,n-1]中的每一个自然数作为除数来除n&a…

基于 Apache Flink 的实时计算数据流业务引擎在京东零售的实践和落地

摘要&#xff1a;本文整理自京东零售-技术研发与数据中心张颖&闫莉刚在 ApacheCon Asia 2022 的分享。内容主要包括五个方面&#xff1a; 京东零售实时计算的现状实时计算框架场景优化&#xff1a;TopN场景优化&#xff1a;动线分析场景优化&#xff1a;FLINK 一站式机器学…

【Linux】写一个基础的bash

头文件#include<stdio.h> #include<stdlib.h> #include<unistd.h> #include<sys/wait.h> #include<sys/stat.h> #include<string.h> #include<pwd.h> #include<dirent.h>分割输入的命令串字符串或参数内容为空则退出strtok( ,…

【MySQL】数据类型

目录 一、数据类型分类 二、数值类型 bit&#xff1a; tinyint&#xff1a; ​编辑 smallint&#xff1a; memdiumint&#xff1a; int&#xff1a; bigint&#xff1a; float&#xff1a; ​编辑 decimal&#xff1a; 三、文本类型 char&#xff1a; 字符的概念&a…

出入了解——Vue.js

个人简介&#xff1a;云计算网络运维专业人员&#xff0c;了解运维知识&#xff0c;掌握TCP/IP协议&#xff0c;每天分享网络运维知识与技能。座右铭&#xff1a;海不辞水&#xff0c;故能成其大&#xff1b;山不辞石&#xff0c;故能成其高。个人主页&#xff1a;小李会科技的…

技术掉:PDF显示,使用pdf.js

PDF 显示 场景&#xff1a; 其实直接显示 pdf 可以用 iframe 标签&#xff0c;但产品觉得浏览器自带的 pdf 预览太丑了&#xff0c;而且无法去除那些操作栏。 解决方案&#xff1a;使用 pdf.js 进行显示 第一步&#xff1a;引入 pdf.js 去官网下载稳定版的 pdf.js 文件 然后…

ElasticSearch-第二天

目录 文档批量操作 批量获取文档数据 批量操作文档数据 DSL语言高级查询 DSL概述 无查询条件 叶子条件查询 模糊匹配 match的复杂用法 精确匹配 组合条件查询(多条件查询) 连接查询(多文档合并查询) 查询DSL和过滤DSL 区别 query DSL filter DSL Query方式查…

使用Python突破某网游游戏JS加密限制,进行逆向解密,实现自动登录

兄弟们天天看基础看腻了吧 今天来分享一下如何使用Python突破某网游游戏JS加密限制&#xff0c;进行逆向解密&#xff0c;实现自动登录。 逆向目标 目标&#xff1a;某 7 网游登录主页&#xff1a;aHR0cHM6Ly93d3cuMzcuY29tLw接口&#xff1a;aHR0cHM6Ly9teS4zNy5jb20vYXBpL…

Vue的命令式和声明式的概念

1.命令式框架(jQuery) 这里有个小例子&#xff1a; 1.获取id为app的div标签 2.设置他的文本内容是hello&#xff0c;world 3.为其绑定点击事件 4.当点击时候弹出提示ok 1.首先我们通过$来活动app的标签 $(#app)//获取id为app的标签 2.然后通过text来讲内容设置为hello&am…