这是我参与「第四届青训营 」笔记创作活动的第5天 在大项目的框架选择中，我们组选了对新手更加友好的Vue，在此我记录下我学习Vue的过程。
什么是 Vue？
Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，有助于高效地开发用户界面。
Vue的核心功能
- 声明式渲染：Vue 基于标准 HTML 拓展了一套模板语法，使得我们可以声明式地描述最终输出的 HTML 和 JavaScript 状态之间的关系。
- 响应性：Vue 会自动跟踪 JavaScript 状态变化并在改变发生时响应式地更新 DOM。
声明式渲染
通过扩展于标准 HTML 的模板语法，我们可以根据 JavaScript 的状态来描述 HTML 应该是什么样子的。当状态改变时，HTML 会自动更新。
响应性
能在改变时触发更新的状态被认为是响应式的。在 Vue 中，响应式状态被保存在组件中。
API 风格
Vue 的组件可以按两种不同的风格书写：选项式 API 和组合式 API。
Attribute 绑定
在 Vue 中，mustache 语法 (即双大括号) 只能用于文本插值。为了给属性绑定一个动态值，需要使用 v-bind 指令：
<div v-bind:id="dynamicId"></div>
也可简写为：
<div :id="dynamicId"></div>
事件监听
可以使用 v-on 指令监听 DOM 事件：
<button v-on:click="increment">{{ count }}</button>
也可简写为：
<button @click="increment">{{ count }}</button>
表单绑定
可以同时使用 v-bind 和 v-on 来在表单的输入元素上创建双向绑定：
<input :value="text" @input="onInput">
为了简化双向绑定，Vue 提供了一个 v-model 指令：
<input v-model="text">
条件渲染
v-if 指令可以有条件地渲染元素：
<h1 v-if="awesome">Vue is awesome!</h1>
v-else 和 v-else-if 也可以用来表示其他的条件分支。
