1.本教程的前提条件
最开始学习vue，并不需要太多的前置知识，只需要知道最基本html、JavaScript、css就行了，甚至不需要熟练掌握，只要了解或者稍微写过点html、JavaScript、css就行了。
2.特点
这个教程是面向vue的初学者，尽量做到最简化、最快上手，我会根据我的工作经验，只讲解工作中用的比较多的功能。如果同一个功能vue支持两种或多种写法，我会只讲解工作中用得最多、用着最方便的写法。目的就是让初学者可以快速学会基础知识，可以写出来自己的项目。
题外话就到这里，现在开始第一个vue3页面的编写
首先，作为初学者，我们先采用通过script标签直接引入vue3的方式，来体验一下vue的特点
我们先写一个最基本、最简单的html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>vue3</title>
</head>
<body>
</body>
</html>
我们从cdn地址来引入vue3的代码
<script src="https://www.unpkg.com/vue@next"></script>
我们需要有一个div，来显示我们用vue编写的内容
在body标签下面写一个div，id叫做app，
<div id="app"></div>
这个id名称可以随便起，符合html的规范就行
然后我们再创建一个script，里面就可以开始写我们的第一行vue3代码了
<script>
const vueApp= Vue.createApp({
template: ` <div>hello world!</div> `,
})
vueApp.mount('#app')
</script>
这里调用了vue的createApp方法，给它传递了一个对象参数，template就是模板的意思，它是一个字符串，可以理解为这里面就是我们的html内容
vueApp就是createApp函数返回的一个对象，通过这个对象，调用mount方法，mount是挂载的意思，可以理解为把一段html代码放到指定的容器里，这里我们通过调用mount的传递的参数，指定了把内容放到id为app的div里。
完整的代码是
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>vue3</title>
</head>
<body>
<div id="app"></div>
<script src="https://www.unpkg.com/vue@next"></script>
<script>
const vueApp= Vue.createApp({
template: ` <div>hello world!</div> `,
})
vueApp.mount('#app')
</script>
</body>
</html>
在浏览器里打开就能看到效果
第一段vue3的代码就完成了。
网友评论