01. [初识]Vue3教程简介与Hello World编写

在教程开始前,首先强调的是本Vue3教程是从零基础开始的,也就是说,你并不需要会Vue2。

前置知识

但是你还是需要会下面最基本的知识:

  1. HTML: 超文本标记语言,用来写网页的基本结构。
  2. CSS : 层叠样式表,用来让你的页面更加生动和好看。
  3. JavaScript : 简称”JS”,解释性或即时编译型的高级编程语言。

只要你会上面这三个知识,我这里说的是会,不用精通,就可以学习这门课程。

下载VSCode

因为是零基础,所以在编写代码的时候,你需要下载一个编码工具。我工作中一直在使用VSCode,所以这里也向你推荐用VSCode来进行编码。

VSCode下载地址:visualstudio

下载时,需要选择你对应的系统版本。下载完成后,进行安装,这里不做过多讲解,如果你实在不会安装,请自行百度搜索相关VSCode安装教程。

编写第一个HelloWorld

安装好VSCode,我们就可以直接开始编码了。我们通过最简单的例子,先来熟悉一下Vue3框架的特性。你可以在任何位置新建一个文件夹,比如我这里在D盘,新建一个VueTest文件夹,然后把这个文件夹拖动到VSCode当中就可以了,然后在VSCode中新建立一个Demo1.html的文件。

打开Demo1.html后,可以直接输入html,然后会出现选项,直接选择html:5,就可以快速生成html的基本结构。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

当然,你也可以直接输入!号,然后回车,也会给我们输出同样的结果。根据自己的喜好,自行选择就好。

直接引入Vue3.x源码

Vue官方提供直接引入的CDN服务地址,只要用<script>标签,就可以直接引入Vue3,并且使用它。(其实学习期间,你并不需要会使用Vue-cli、Vite这些构建工具,来构建项目)

<script src="https:[email protected]"></script>

引入Vue3的框架之后,我们就可以写Vue的代码了。现在<body>标签中,加入一个<div>层,并给他一个id="app"

<div id="app"></div>

有了这个层,接着在下面写<script>标签和Vue的语法,代码如下:

<script>
    Vue.createApp({
        template: '<div>Hello World</div>'
    }).mount("#app")
</script>

你这时候可能还看不太懂这段代码,但是你需要跟着我把程序敲出来。为了方便你学习。我在这里给出index.html的全部代码,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
    <script src="https:[email protected]"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    Vue.createApp({
        template: '<div>Hello World</div>'
    }).mount("#app")
</script>
</html>

写完代码后,你可以直接打开Demo1.html就会显示在浏览器的网页上。当你看到了结果,我再给你一行行解释一下这个代码。

Vue.createApp({   //创建一个Vue实例,简单理解就说,我要使用Vue了
    template: '<div>Hello World</div>'   // template是模板的意思,就是在JS里写html代码
}).mount("#app")   //这个模板需要放一个位置,也就是说挂载,挂载到`id=app`的DOM上

如果能在页面上出现Hello World这文字,本文的练习就算完成了。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » 01. [初识]Vue3教程简介与Hello World编写

发表评论

前端开发相关广告投放 更专业 更精准

立即查看 联系我们