【Vue】Vue的安装

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

🏆今日学习目标:Vue3的安装

😃创作者:颜颜yan_

✨个人格言:生如芥子,心藏须弥

⏰本期期数:第一期

🎉专栏系列:Vue3


前言


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了~


01eb1ec5082d42f7b9d6326b271fcdd2.png


总结


以上就是今天的学习内容啦~

如果有兴趣的话可以订阅专栏,持续更新呢~

咱们下期再见~


acf7179ececd4e35aaa810fc8c693797.gif

相关文章
|
3天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
34 1
|
14天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
2月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
45 1
vue学习第一章
|
2月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
32 1
|
2月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
32 1
|
2月前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
33 1
|
2月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能

热门文章

最新文章