该封面图片中，背景由Sara Torda在Pixabay上发布，本人结合 Vue 图标制作成了封面。
本文为本人结合 Vue3 教程 | 菜鸟教程 相应内容学习时的一些想法和感触，文中的实例代码均来源于菜鸟教程。
Vue 与 “view” 的读音接近，它的语法与 Flask 中的 Jinja2 模板语言非常相近。Vue通过元素的 id来确定位置，通过createApp函数来创建应用，使用mount函数将应用挂载在对应 id 的元素中。
Hello,Vue!!#
例如以下代码，便是使用mount(#app)将HelloVueApp挂载到id 为 app 的 div 元素中，最终的运行结果为在页面上显示 “Hello Vue!!”
其中{{ }}用于输出对象属性和函数返回值，{{ message }}就是返回应用中的 message 值。
Hello Vue
Vue 的数据组织与方法#
data 选项#
data 本身是一个函数，是 createApp 函数中不可或缺的部分，其返回值为一个对象。该对象被 Vue 通过响应式系统进行包装，以$data的形式存储与实例中，其中的数据可以通过类似于document.write的方法进行编辑，如下：
结果如下图所示：
data数据可改变
方法#
Vue 中通过methods选项添加方法，如下所示：
与 Java 等面向对象语言感觉非常接近，也很容易上手，结果如下：
使用methods
模板#
文本插值#
前面提到 Vue 和 Jinja2 非常像，这一点在模板这里体现得淋漓尽致，例如以下的代码中：
在{{ message }}里，message 部分会被转换成具体的这个变量的值，当 message 这个变量的值发生实时变化，前端界面的信息也会发生实时变化，例如一个在 10s 后变量值变化并在前端发生变化的 script 代码如下：
原本页面显示为Hello Vue!!，经过 10s 后随着 message 的值的变化，显示内容变成了lalala~，就像这张 gif 图一样：
变量值改变，前端显示改变
这是数据与界面的一种单向绑定，界面元素的显示会随着变量值的变化而变化。这里还有一个需要注意的点，如果不想前端元素的内容发生改变，需要使用v-once标签，例如<span v-once>{{ message }}</span>这样的形式。
表达式#
在{{ }}中，JavaScript 的表达式也是可以被解析的，例如下面的代码：
显示结果为如下所示：
表达式的处理
指令#
指令通常带有v-前缀，上文中的v-once就是一种指令。它们常常用于当变量或者表达式的值发生变化时，将某些行为反映在前端界面上，指令有很多种，每一种可以实现不同的功能，例如下面的这几种：
- 显示文本（v-text）
在类似于<p>中使用v-text标签可以显示文本，对应着 data 中相应变量的变量值，例如以下例子：
显示结果为：
v-text指令
- html 插值（v-html）
利用v-html标签还可以实现将 html 代码进行解释和表现，下面的例子分别显示了对于同样一行代码使用文本插值与使用 html 输出，显示结果出现的不同：
显示结果为：
v-html指令
- 改变 html 元素内部的属性值（v-bind）
而对于 html 元素内的属性的值，Vue 则提供了v-bind标签用于处理属性值的变化，例如以下的代码是对 class 或对 id 的指定，use 为 true 则使用 class1，否则不使用。为了不牵扯其他的指令，我依旧使用延时完成。
实际效果：
v-bind指令
可以看出来 10 秒后 div 的背景颜色发生了改变，这是因为 use 的值变为 true，使得 class 的值变为 class1，从而使用了 class1 对应的样式。
- 判断是否插入元素（v-if）
例如下面的例子：
例子中v-if指令会根据seen的值来决定该元素是否会被显示。
- 监听 DOM 事件（v-on）
与 methods 搭配使用，处理前端的事件，例如以下代码：
实际效果：
v-on指令
不传参数的话可以省略括号。
- 双向数据绑定（v-model）
这条指令用于收集用户输入或用户选择，用于表单控件（input，textarea，select 等），例如如下代码：
双向绑定的意义在于，用户在页面上的输入会实时在 data 中修改，且 data 中的数据也会实时显示在用户界面上。
实际效果：
表达式的处理
- 两条指令的缩写
v-bind：
v-on: