_
2023/5/11 18:36:463870

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 ,那么这节课的任务咱们就完成了。

视频讲解