🏆今日学习目标: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了~
总结
以上就是今天的学习内容啦~
如果有兴趣的话可以订阅专栏,持续更新呢~
咱们下期再见~