【Vue】Vue的安装

news/2024/10/30 13:37:09/

🏆今日学习目标: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了~
在这里插入图片描述


总结

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


http://www.ppmy.cn/news/33076.html

相关文章

CAD 2023安装包下载及详细安装教程

[软件名称]: CAD 2023 [软件大小]: 2.71 GB [安装环境]: Win11/Win 10 [软件安装包下载]:https://pan.quark.cn/s/3b79a839e513 AutoCAD 2023 中文版是一款计算机辅助设计 (CAD) 软件&#xff0c;用于精确的二维和三维绘图、设计和建模&#xff0c;包括实体、曲面、网格对象、…

LInux指令之文件目录类

文章目录一、帮助指令二、文件目录类ls指令cd指令 &#xff08;切换目录&#xff09;mkdir指令&#xff08;创建目录&#xff09;rmdir指令&#xff08;删除目录&#xff09;touch指令&#xff08;创建空文件&#xff09;cp指令(拷贝文件)rm指令mv指令cat指令(查看)more指令les…

【基础算法】单链表的OJ练习(6) # 复制带随机指针的链表 #

文章目录&#x1f347;前言&#x1f34e;复制带随机指针的链表&#x1f351;写在最后&#x1f347;前言 本章的链表OJ练习&#xff0c;是最后的也是最难的。对于本题&#xff0c;我们不仅要学会解题的思路&#xff0c;还要能够通过这个思路正确的写出代码&#xff0c;也就是思路…

vue基于vant封装可精确到秒的时间选择器

前言 在移动开发中&#xff0c;时间选择的控件比比皆是&#xff0c;但却鲜有类似的组件可以精确到秒级别的&#xff0c;官方可能是考虑到小屏幕手机的显示问题&#xff0c;也可能是使用的场景寥寥无几&#xff0c;但是少不代表没有&#xff0c;所以最近花了点时间基于 vant 组件…

102.【Redis】

Resies集群前言(一)、Nosql概述1、为什么要用NoSQL &#xff1f;2、什么是Nosql3、Nosql特点4、Nosql的四大分类5、阿里巴巴数据结构演进(二)、Redis入门1.概述2.Redis能干什么?3、Redis的特点4、window安装Redis5、Linux安装Redis6、redis-benchmark性能测试7、Redis基础知识…

激光雷达烧坏手机摄像头,到底发生了什么?

作者 | 洪泽鑫 编辑 | 王博用手机对着激光雷达拍照或录像&#xff0c;可能会把你的手机摄像头干废。 本月初&#xff0c;有用户在社交平台小红书上称&#xff0c;“夜拍蔚来ET5和银河&#xff0c;发现排出来的照片有两个贼亮的看不到的星&#xff0c;发现是手机摄像头被激光雷达…

C++ | 对比inline内联函数和宏的不同点

文章目录一、前言二、宏的优缺点分析1、概念回顾2、宏的缺点3、宏的优点三、inline内联函数1、概念2、特性①&#xff1a;空间换时间&#x1f381;趣味杂谈&#xff1a;庞大的游戏更新包3、特性②&#xff1a;inline实现机制4、特性③&#xff1a;inline的声明与定义反汇编观察…

滑动窗口编程题集合(leetcode)

滑动窗口是双指针的一种应用&#xff0c;形象点说就是维护一个窗口&#xff0c;在窗口滑动的过程中进行窗口内数据的更新&#xff0c;并判断是否符合答案。初始时两个指针均指向开头&#xff0c;然后右指针依次向右滑动&#xff0c;在滑动的过程中需要收缩的时候进行左指针的移…