_
2023/5/11 18:36:464288人

Vue3.x从零开始学-第一季 基础语法篇

大家好，我是小朱，欢迎大家和我一起来学习vue3的课程，这是一期入门基础课程。

这几年来vue在国内非常受欢迎，对前端开发的影响特别大。很多的互联联网大厂都在使用vue，比如阿里，百度，京东，美团等等简直随处可见。vue现在已经成为了一套很优秀的前端技术框架，在国内基于vue就繁衍出很多其他技术的框架，比如uniapp、weex。现在vue已经3.x版本，相较于vue2做了很多的补充，用法上也有了不少的差异。如果作为前端的你还不会vue，那你得抓紧了，赶紧一起来学习吧

  1. 前期准备和HelloWorld

前期的准备工作和简单的HelloWorld编写尝试。

前置知识和课程说明

在学习vue3.x之前呢，需要会下面最基本的技能：

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

只要你会上面这三个知识，不用特别精通，就可以一起来学习这套框架，vue其实是比较简单易懂的。

工具下载

熟悉一款的好的编码工具，可以提高我们编写代码的效率，加强我们的代码质量。在前端开发中很多小伙伴都比较喜欢使用VSCode ，所以我们这里也推荐大家使用VSCode来进行编码，它插件丰富，体积小巧界面简洁。

VSCode下载地址：https://code.visualstudio.com

下载时，需要选择你对应的系统版本。下载完成后，安装类似QQ，这里不做过多讲解，如果你实在不会安装，可以百度一下。

编写第一个HelloWorld

通过编写第一个HelloWorld例子，先来熟悉一下vue的特性。你可以在你电脑的任何位置新建一个文件夹，比如我创建了一个vueTest文件夹，然后把这个文件夹拖拽到我的vscode上，然后在vscode 中我们新建一个index.html的文件。打开index.html文件 输入html快速生成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://unpkg.com/vue@next"></script>

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

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

有了这个层，接着在下面写<script>标签和Vue的语法，使用Vue.CreateApp()方法来创建vue实例，它接受一个对象{}，然后在后面接着使用mount()方法把vue实例绑定到 id="app" 的div元素节点上。我们为它添加一个template属性，它接受的是一个字符串形式的html模板，我们写入一个 <div>Hello World</div>。

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

这时候我们就可以打开浏览器预览效果了，页面上就出现了一个Hello World ，那么这节课的任务咱们就完成了。

视频讲解