简单的 Vue 入门

由于最近实在是没事干(指在网络上),且空余的时间只集中于那么几天,所以打算再开一个坑。上一个投票系统的坑大概又被拖了,原因是那些示例代码和数据参考都存储在一个 HDD 内,但我并没有一个可用的显示器来打开自己的组装电脑(至于我的显示器发生了什么,见下图)。这应该算是一个恰当的咕咕理由吧(逃

那么就先不去缅怀死者了。这个 Vue 入门教程,我无法承诺会写得很透彻或者很好懂,只是按照我当初为初学者时的心态以及一系列的经历来还原阐述,应该对新手算是比较友好的吧。且本篇教程所介绍的内容并不会非常深入,大部分时候你甚至可能看到长篇的纯文字,因此请做好一定的准备。

**为什么我不去看官方的教程而要来看这?**的确,我当初入门时也是凭借着官方的文档,一步一步摸索和理解来的,但此过程实在是太过于扭曲。在这里,我没有说想要做到“比官方晦涩的文档叙述得更清楚易懂”,而是差不多分享一些学习上的心得以及我个人对某些概念的主观理解。

由此看来,这篇文章以及在这之后的一系列文章都不是一个纯粹的教程,但是如果你愿意,当作教程来看似乎也没有什么坏处。但请注意,如果你对某种概念的解释存在疑惑,请以官方或专业人士的解释为准。

引入

那么从现在开始我们讲 Vue。

首先我们要思考为什么会有 Vue?当我还是一个 Web 初学者的时候,我曾经对很多大型网站的一些特殊的“现象”产生了疑惑。例如,为什么他们的网页地址末尾都没有 .html?为什么我擅自添加上一个 .php 就直接返回了 404 Not Found?难道这些网页都不是文件吗?再如,有些网页不需要刷新就可以跳转到其它的页面,以我当时的水平,我觉得这是不可能做到的。

但是 Vue 做到了,其他框架也做到了。你可以把这些前端框架统一理解成一种新型的构建网站的方式。语言虽然是相同的,但实际上一系列的流程和原理上的实现都已经偏离了它们原本的写法,我习惯于将这种“原本的写法”称为 Vanilla。

我们来举一个略微复杂一点的例子,请看如下代码

var el = document.getElementById("submit-btn")
el.addEventListener("click", function(e) {
    e.preventDefault();
    // Ajax process
})

这种写法可以理解为是去改变一个按钮原有的行为方式,然后换成另外一个函数来执行。随着互联网的发展,JQuery 等一系列的工具产生了,那么以上流程我们就可以写成这个样子

$("#submit-btn").on("click", function(e) {
    // The same code as above
})

变简洁了...?

从最原本的 addEventListener,到后来的 $on() 等新元函数,我们的开发者贡献了许多。而这一系列工具的语法与用途的集合,当然也是他们灵感发挥的结果。

我究竟想要表达什么呢?

最初我们想要指定一个元素,必须重复地引用 document.getElementById(),而这个函数具有很大的局限性——它只能选择带有独特 ID 的元素。在这个时候,我们的程序员想到了封装,甚至有些人直接使用 const el = document.querySelector 这种方法。

而 JQuery 中则将其极端简化成了一个 $ 函数,并将所有的对元素的选择方式从函数指定转移到了符号指定。同时对于传统的 addEventListener,JQuery 将其转变为 $ 函数返回的对象上的一个 on 函数,更加贴近英文的语法进而也更容易理解。

关于函数指定和符号指定

函数指定是指类似于 getElementById 这种,在函数诞生之初就一定明确地规定了这个函数只能用来选择 ID,因而在它的参数里面不需要出现 #(表示 ID)符号。

符号指定是将所有的 getElementByX 函数隐藏起来,转而使用一个统一的函数,在字符串上面做手脚。例如用 . 指定 class,用 # 指定 id,同时也引入了其它原先只存在于 CSS 里的选择器。通过这个统一的函数对字符串做解析,最终决定该以何种方式处理这个字符串所指定的内容。

上述所有的改动,包括其所独有的“链式调用结构”($ 函数返回的对象及其所拥有的大部分函数所返回的对象属于同一类型,进而可以重复调用),都是创新意识所缔造的。而它们存在的根本目的,则是简化而让其更加容易理解——仅仅通过贴近人类语言的语法就能够清楚地体现这一点。

我们要学习的 Vue,则是比此强大得多的机构。还是拿事件监听来举例子,Vanilla 写法中我们需要用到一个个用起来很蹩脚用多了很繁杂的函数,JQuery 写法中我们可以将其简化为更容易理解的形式,而在 Vue 中它完全可以和 HTML 结构融合在一起。请看下面的例子:

<template>
    <!-- ... -->
    <button v-on:click="clickFunc"/>
</template>

<script>
// ...
export default {
    // ...
    methods: {
        clickFunc(e) {
            e.preventDefault();
            // ...
        }
    },
    // ...
}
</script>

这就是 Vue 中对上述功能的实现。

虽然此刻的你作为初学者似乎无法理解这一切,但也没必要理解——你只需要知道,在这里 v-on:click 就相当于是在 addEventListener('click'),等号后面所跟的 clickFunc 是处理这个事件的函数,这个函数早已在下方的代码中预先写好了,通过深入学习你可以发现这个函数可以来自于任何地方。

它创新之处在哪里?我们几乎已经脱离了 JavaScript 的束缚。我们不需要再去用 JavaScript 选择这个元素,而是直接在这特定的元素上面做出改动,而 JavaScript 只管用来实现就好了!如果你还是不能理解,你可以尝试多思考一阵子,在以后的学习中,你会慢慢懂得这种写法的优势。

综上所述,Vue 的确改变了前端开发的方式,在让代码变得更加简单易懂,有条理的同时,也引入了许许多多更加强大的功能,有些功能使用 Vanilla 写起来甚至是难如登天。

其实不仅仅是 Vue,而是所有现存的前端框架。它们都做到了这些工作,只是各有各自的特点和优势。Vue 是其中之一,其特点是简洁、轻量、快速、组件化、数据驱动等。针对我们不同的需求可以采用不同的框架,进而构建出不同的开发模式。

第一章 部署与基本概念

在学习 Vue 之前,需要有一定的前端基础。实际上,是当你写 Vanilla 厌烦,忍不住去尝试新事物时,更适合来学习 Vue。而如果你的前端知识掌握的并不是很完全,也可以顺着自己的感觉继续看下去,但也许会有一些概念百思不得解。

在正式开始之前,我们还需要布置一下我们的开发环境。这些开发环境都是可有可无的,即如果没有也可以正常进行开发。但就好比 IDE 和记事本的区别一样,虽然记事本照样能写代码,但是没有人用记事本写过代码,除非是那些极其简单的脚本。因此,介于我们的正常需求,在下文中列出的所有第三方软件都是当前业界流行*的,同时也是建议安装的。

首先我们需要安装 npm,这是前端最流行的包管理器。借助 npm,你可以安装所有你需要的开源库到你的项目中,并持续跟踪和管理这些库的版本等,同时你也可以将你的作品发布到 npm 中去。npm 依赖 Node 环境,而 Node 环境也是我们本地进行 Vue 调试所必不可少的。因此得出一个结论:我们要安装 npm 和 Node。

一般来说,npm 会伴随着 Node 安装,因此我们只需要安装 Node,以下介绍两种系统环境下的安装方式。

第一节 部署

Unix/Linux 系统一般方式

Unix 和 Linux 系统上,建议采用 nvm 进行安装。nvm 也是一个管理器,它用于管理 Node 的版本,也就是说借助它你可以在机器上安装不同版本的 Node(共存),从而实现更广泛的需求。nvm 在 GitHub 上已开源:https://github.com/nvm-sh/nvm

安装很简单。首先打开终端运行如下指令

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
# 或
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

这将会从 GitHub 上下载一个预先写好的安装脚本并执行。如果权限不足,可能导致安装不成功。在执行完毕并没有任何报错(如果权限不足是不会报错的)后,运行如下指令

command -v nvm

如果命令行没有任何返回的信息,代表安装失败。这时候,可以尝试将下面的代码

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

复制并粘贴到 ~/.bashrc,并执行 source ~/.bashrc,然后再次使用上述指令进行检测。

针对 macOS,失败的原因比较复杂。如果有需要,可以阅读英文的有关这方面的帮助信息

如果执行 command -v nvm 后返回 nvm 这三个字母,且执行 nvm 后不会提示 nvm: command not found,则代表安装成功。nvm 的功能很强大,在这里只介绍安装 Node 的方法。打开终端,执行如下指令

nvm install node

随后将会安装最新版(latest)的 Node。如果你想要查看现存的 Node 版本,可执行

nvm ls-remote

如果你想要安装特定版本的 Node,可执行

nvm install 版本号 # 版本号示例:6.14.4

nvm 不仅支持 Unix/Linux,还支持 Windows,点击此处进入相关 Repo。本教程中不会介绍 nvm-windows 的用法。

Windows

Windows 系统上,为了方便,通常采用 msi 安装器。打开 Node 官网 https://nodejs.org/en,点击绿色的下载按钮即可下载相关安装包。如果没有什么特殊需求,请点击标有 LTS 者。在安装时,可以按照自己的需求勾选一些额外的功能。但是基于本教程来看,仅需一路 Next。

安装向导结束后,键入 Win + R 打开运行,输入 cmd 并回车,打开命令提示符。在弹出的命令行窗口中输入 npm -v 并回车。若返回类似于

6.14.5

的版本号,则代表安装完成。若返回

'npm' 不是内部或外部命令,也不是可运行的程序
或批处理文件。

则代表安装失败。

以上是 npm 在三种系统上安装方式的信息,但这只是基础。接下来我们需要安装 Vue 开发必备的工具 Vue CLI。Vue CLI 在各种系统上的安装方式相同。

执行

npm install -g @vue/cli

然后静等(可能会很漫长🙂)即可。安装完成后,可以通过

vue --version

指令来判断版本和是否安装成功。

以上就是基础环境配置的环节,实际上非常简单,仅仅需要安装 Node 和 Vue CLI 两大工具,且两大工具被安装完毕后在不同的系统上具有通用性,在此之后几乎不需要担心因为操作系统差异而导致操作上的差异。

第二节 基本概念

接下来我们就要正式开始工作了!

首先我们需要找到一块风水宝地来安放我们的项目。在这里我们假设是文件夹 ~。如果你是 Windows 用户且对这个符号的意义疑惑不解的话,你可以将其理解为 C:\Users\用户名

那么首先我们

cd ~
# 注意!这条指令在 Windows 上执行会出错的。Windows 用户试试下面这条
cd %userprofile%

然后利用新安装的 Vue 初始化一个项目,我们把这个项目称为原型,即最初的样子。到了后期,随着我们的水平提高,我们将具备自己手动部署项目并拓展项目基础功能的能力,但实际上即使是后期也更习惯于用这种方便的方式。

vue create 项目名字
最后更新于: 2020/6/25
Based on VuePress