【愚公系列】《循序渐进Vue.js 3.x前端开发实践》003-走进 Vue 3的新世界:Vue 框架初体验

标题 详情
作者简介 愚公搬代码
头衔 华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,亚马逊技领云博主,51CTO博客专家等。
近期荣誉 2022年度博客之星TOP2,2023年度博客之星TOP2,2022年华为云十佳博主,2023年华为云十佳博主等。
博客内容 .NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎 👍点赞、✍评论、⭐收藏


🚀前言

随着前端技术的不断发展,各种框架应运而生,而 Vue.js 凭借其简洁、灵活的特性,成为了许多开发者的首选。如今,Vue 3 的推出为这个流行框架注入了更多活力与创新。在这个全新的版本中,不仅引入了组合式 API、改进的性能,还为开发体验带来了更多可能性。

在这篇文章中,我们将通过一次轻松的“初体验”之旅,带你领略 Vue 3 的独特魅力。无论你是前端小白,还是已有经验的开发者,都能通过这个介绍迅速上手,感受到 Vue 框架的强大与易用性。让我们一起走进 Vue 3 的新世界,开启前端开发的新篇章吧!

🚀一、Vue 框架初体验

Vue 的核心代码体积小,因此可以直接通过 CDN 引入,从而在网页的 <script> 标签中使用 Vue 来组织页面逻辑。Vue 还提供了配套的脚手架工具,通过组合这些工具,可以构建包含插件管理、编译、测试和发布的完整工具链,以创建大型项目。

在学习和测试 Vue 的功能时,我们将直接通过 CDN 引入 Vue 框架,这有助于我们更专注于框架本身的学习。本书中,我们将全部采用最新的 Vue 3.x 版本来编写示例。

CDN 的优势

CDN(Content Delivery Network,内容分发网络)是一种通过在多个地理位置部署服务器来提供快速、可靠和高效的数据传输服务的网络。在前端开发中,CDN 通常用于加速静态资源的加载速度,例如 JavaScript 库、CSS 样式表和图片等。通过将静态资源托管在 CDN 上,用户可以从离他们最近的服务器获取资源,从而减少延迟并提高加载速度。

对于 Vue 这样的轻量级框架,其核心代码体积小,适合通过 CDN 方式引入。使用 CDN 不仅可以节省服务器带宽和资源,还可以提高用户的访问速度和体验。

示例代码

以下是一个示例代码,演示如何通过 CDN 方式引入 Vue:

<!DOCTYPE html>
<html>
<head>
    <title>Vue CDN 示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        {
  { message }}
    </div>
    <script>
        const app = Vue.createApp({
     
            data() {
     
                return {
     
                    message: 'Hello, Vue!'
                };
            }
        });
        app.mount('#app');
    </script>
</body>
</html>

在上述示例中,通过<script>标签成功引入了Vue的CDN链接:https://cdn.jsdelivr.netnpm/vue。引入之后,我们可以在页面中利用 Vue 的功能,例如创建 Vue 实例、实现数据绑定等。本节将通过引入 Vue 框架来编写一些简单的前端功能页面。通过这些示例,我们将体验 Vue 框架的基本编程思路,并了解其如何简化前端开发流程。

🔎1.第一个 Vue 工程

在 VS Code 中启动第一个 Vue 项目

本节将向读者展示如何在 VS Code 编辑器中启动第一个 Vue 项目。VS Code 是一款功能强大的编辑器,其丰富的扩展功能主要通过插件实现。

安装 Vetur 插件

为了支持 Vue 语言,我们首先需要在 VS Code 中安装 Vetur 插件。Vetur 插件为 VS Code 增加了对 Vue 的支持,包括以下功能:

  • 代码高亮
  • 关键词提示
  • 代码块补全

这些功能显著增强了 Vue 的开发体验。

安装步骤

  1. 打开 VS Code 的插件管理模块。
  2. 在搜索框中输入 “Vetur”。
  3. 点击安装。

如图所示,按照上述步骤完成插件的安装。

在这里插入图片描述

🔎2.源码解读

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue3 Demo</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div style="text-align: center;" id="Application">
        <h1>{
  { count }}</h1>
        <button v-on:click="clickButton
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

愚公搬代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值