VUE专题 VUE起步知识提炼

Vue 介绍

Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。
Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。
另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

组件式编程

一个页面可以分解如下，组件化单个模块就提高了复用。

这个理念不是来源于vue, 把web组件式开发发扬光大的应该是react了,组件开发是一种朴素的开发思想,分而治之,大型系统拆分成一个个的小模块小组件,分配给不同的人。
虽然我并不会React。。。。。。。

如何理解组件思想

理解组件思想可以类比函数。也就是一般的方法，一样是为了复用和解耦，使得单个的情况下可以最大程度的作为通用个体去使用而不用考虑其他因素的影响。

对应关系借鉴一下别人做好的图如下：

VUE生命周期

生命周期介绍
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。
例如：
实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些 生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会。

它可以总共分为8个阶段：

1.beforeCreate:在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

2.created:实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

3.beforeMount:在挂载开始之前被调用：相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。

4.mounted: el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。
该钩子在服务器端渲染期间不被调用。

（这里符号被转义了 就放代码框里了↑）

5.beforeUpdate:数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。该钩子在服务器端渲染期间不被调用。

6.updated:由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。该钩子在服务器端渲染期间不被调用。

7.beforeDestroy:实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。

8.destroyed:Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

VUE → 页面

借鉴大佬的图

VUE页面结构

Vue页面基本结构分为三部分：

<template></template>
<script></script>
<style scoped></style>