- 前置知识
- 下载VSCode
- 编写第一个HelloWorld
- 直接引入Vue3.x源码
但是你还是需要会下面最基本的知识:
1、HTML: 超文本标记语言,用来写网页的基本结构。 2、CSS : 层叠样式表,用来让你的页面更加生动和好看。 3、JavaScript : 简称”JS”,解释性或即时编译型的高级编程语言。
只要你会上面这三个知识,我这里说的是会,不用精通,就可以学习这门课程。
下载VSCode因为是零基础,所以在编写代码的时候,你需要下载一个编码工具。我工作中一直在使用VSCode,所以这里也向你推荐用VSCode来进行编码。
编写第一个HelloWorld安装好VSCode,我们就可以直接开始编码了。我们通过最简单的例子,先来熟悉一下Vue3框架的特性。你可以在任何位置新建一个文件夹,比如我这里在D
盘,新建一个VueTest
文件夹,然后把这个文件夹拖动到VSCode当中就可以了,然后在VSCode中新建立一个Demo1.html的文件。
打开Demo1.html
后,可以直接输入html,然后会出现选项,直接选择html:5,就可以快速生成html的基本结构。
DOCTYPE html>
Document
当然,你也可以直接输入!
号,然后回车,也会给我们输出同样的结果。根据自己的喜好,自行选择就好。
Vue官方提供直接引入的CDN服务地址,只要用标签,就可以直接引入Vue3,并且使用它。
(其实学习期间,你并不需要会使用Vue-cli、Vite这些构建工具,来构建项目)
引入Vue3的框架之后,我们就可以写Vue的代码了。现在 有了这个层,接着在下面写 你这时候可能还看不太懂这段代码,但是你需要跟着我把程序敲出来。为了方便你学习。我在这里给出 写完代码后,你可以直接打开 如果能在页面上出现Hello World这文字,本文的练习就算完成了。标签中,加入一个
id="app"
。
标签和Vue的语法,代码如下:
Vue.createApp({
template: '
index.html
的全部代码,DOCTYPE html>
Hello World
Vue.createApp({
template: '
Demo1.html
就会显示在浏览器的网页上。当你看到了结果,我再给你一行行解释一下这个代码。创建一个Vue实例,简单理解就说,我要使用Vue了
Vue.createApp({
template是模板的意思,就是在JS里写html代码
template: '