前言
之前已经学习过来 HTML
、 CSS
以及 JavaScript
的相关知识,也算是基本了解了关于这前端三件套的一些基本用法。今天就来了解下,当前前端开发中最炙手可热的当红辣子鸡 - Vue
。本文主要介绍 Vue
的一些入门知识和最经典的 Vue
入门 Hello World
程序,如果你想了解的是更高级的使用技巧,那么完全可以忽略。
Vue 简介
Vue 是什么
Vue
是一套用于构建用户界面的 渐进式框架,不同于其他框架, Vue
被设计为可以自底向上逐层应用,核心库只关注视图层,具有易上手,与第三方库整合方便等优点。此外, Vue
还支持多种现代化的工具链以及类库,使得它能够为复杂的单页应用提供驱动。
Vue 的特点
- 采用组件化模式,从而提高了代码复用率,更容易维护。
- 声明式编码,程序员无需直接操作
DOM
,从而提高开发效率。 - 利用虚拟
DOM
+ 优秀Diff
算法,最大化复用DOM
节点。
Vue 的安装
Vue 的安装主要有两种方式,一种是通过在文件中直接用 <script>
标签引入的方式,另一种则是则是使用 npm
的方式,接下来我们就来看看两种方式是如何进行安装的。
标签引入的方式
假设我们创建了一个 HTML 文件,那么我们此时只需要引入其中以下两个版本中其中一个就可以了。而两者的区别顾名思义,所谓开发环境版本,就是我们日常开发学习所使用的版本,它包含了完整的警告和提示模式,方便我们定位错误,提高我们的开发效率。而生产环境版本,则是对开发环境进行了精简,剔除了其中的警告,尽可能优化了尺寸和速度,针对上线生产所用,有助于生产环境效率的提升。针对生产环境版本,更加推荐大家链接到一个明确的版本号和构建文件,从而避免新版本对老版本中特性造成破坏,影响用户体验。
- 开发环境版本
<script src="https://unpkg.com/vue@next"></script>
- 生产环境版本
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.33/vue.cjs.js"></script>
- npm 安装
以上的两种方式更适合于我们日常学习和小型应用开发,而如果我们要使用 Vue 构建大型应用时,官方更加推荐我们使用 NPM 进行安装,它能够更好的配合类似 webpack
、 Rollup
等打包器的使用,而且 Vue 也提供了配套的工具来进行单文件组件的开发,而安装的方式也很简单,只要我们的电脑上安装了 Node.js,那我们就可以通过命令行来进行最新稳定版 Vue 的安装了,安装的命令如下。
npm install vue@next
Vue 入门实例
首先,我们创建一个 .html
文件,用于交互。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
接着我们引入 Vue3
的相关包,这里引入的方式和之前 JavaScript
中介绍的引入的方式一样,直接在 head
部分进行引入即可。
<!-- 引入 Vue3 -->
<script src="https://unpkg.com/vue@next"></script>
然后就是在 body
标签中添加模板用于将数据渲染到 DOM
的系统。
const app = {
data() {
return {
message: 'Hello World!'
}
}
}
Vue.createApp(app).mount('#app')
最后得到我们的完整文件如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 3 入门实例</title>
<!-- 引入 Vue3 -->
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
const app = {
data() {
return {
message: 'Hello World!'
}
}
}
Vue.createApp(app).mount('#app')
</script>
</body>
</html>
将文件用浏览器打开,在页面中应该就会显示如下信息了。
以上就是一个最简单的 Vue
入门小案例,如何在网页中打印 Hello World!
。虽然看起来十分简单,和我们用 HTML
中的字符串模板来实现相同的效果也十分类似,但实际上 Vue
在背后做了许多我们看不见的工作。
总结
以上就是今天的所有内容了,主要从两个方面着手,一方面从 Vue
的定义、特点、安装来对 Vue
进行了介绍,另一方面则用一个最简单经典的 Hello World!
入门小案例来向大家简单介绍下 Vue
的使用方式。