Vue简介以及组件化的构建

疫情之下，在家学习以及网上课堂已经是必不可少的了，为了不耽误课程，我加入了逆战班开始学习。话不多说，下面向大家介绍一下Vue以及组件化的构建。
Vue简介
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue的安装
要使用Vue需要从外部引入或者下载之后在内部引入，下面是安装方法：

在用Vue构建大型应用时比较推荐使用NPM安装。

Vue的基本框架写法
Vue.js的核心是一个允许采用简洁语法来声明式的将数据渲染进DOM之中。

下面是在script标签之中。

其中 el 是Vue实例挂载的元素节点，值可以是 CSS 选择符,或实际 HTML 元素,或返回 HTML 元素的函数。data是你要渲染到DOM节点上的数据。
效果就是在页面上渲染出了HELLO Vue的字样。这样我们就成功地渲染出了一个简单的类似于字符串模板的Vue应用。
Vue可以将数据和DOM进行关联，所以所有的东西都是响应式的，只要修改data中message的值，DOM节点上的数据就会做出相应改变。

Vue常用的指令
指令前面都带有 ''v-"

1. v-text ：更新元素的textContent；
2. v-htm ：更新元素的innerHTML
3. v-bind ：响应并更新DOM特性；简写：: ；
   例如：v-bind:href v-bind:class
4. v-on 用于监听DOM事件；简写：@ ；
   例如：v-on:click @keyup；
5. v-for ：循环指令；
6. v-if ：条件渲染指令，动态在DOM内添加或删除DOM元素；
7. v-show ：条件渲染指令，为DOM设置css的style属性；
8. v-mode ：数据双向绑定；用于表单输入等；

组件化应用的构建
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。

在Vue中注册组件很简单。

这样的话，我们就创建了一个名为 todo-item的新组件；要引用组件的话只需要在html中直接引用自定义的DOM标签直接引用；

创建Vue实例
每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

当创建一个 Vue 实例时，你可以传入一个选项对象。这篇教程主要描述的就是如何使用这些选项来创建你想要的行为。作为参考，你也可以在 API 文档 中浏览完整的选项列表。

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。
多个组件相互嵌套可以组成一个完整的DOM结构，且多个组件之间不会影响；

数据与方法
每当一个Vue实例被创建，那么就会有一个相应的data对象中的所有的属性加入到Vue的响应式系统中，当这些属性值发生改变时，视图也会发生相应的"响应"，也就是匹配更新为新的值。

实例生命周期钩子
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
每个不同阶段的生命周期钩子都会在相应的阶段被调用。

以上是我的Vue基础入门总结，希望会对大家有帮助，在今后的逆战班学习中我还会了解到更多关于前端的知识，我还会再以后的博客中跟新。