VUE是一个出色的Web应用程序开发框架，它使我们在开发Web应用程序时能够使我们更有效。在学习VUE之前，您需要了解Web应用程序的开发。
什么是Web应用程序？当我们开发Web应用程序时，我们正在编写什么？
从用户的角度来看，Web应用程序是可以提供用户交互和当前信息的软件。
使用Web应用程序时，用户可以通过单击，输入，滑动，语音等与应用程序进行交互，以控制应用程序。用户可以通过滑动，单击和其他操作来控制更改和游戏操作。
因此，从用户角度来看，Web应用程序必须提供交互功能和信息显示。
从开发人员的角度来看，Web应用程序是使用网络浏览器和网络技术在Internet上执行任务的计算机程序。
从广义上讲，Web应用程序包括客户和后端程序。在这里，我们参考网页的前端程序。
传统的前端应用程序在浏览器中运行（不讨论Cross -End，Applet和其他字段）。
前端开发人员实现Web应用程序的能力需要创建和更改接口（DOM）的能力，以展示用户的预期接口和网络通信功能（AJAX，WebSocket）来控制和获取用户关心的数据。
因此，当前端开发人员开发Web应用程序时，它是为了获得和控制数据，然后根据用户交互显示接口上的信息。
如果您使用本地技术（HTML，JS，CSS）来开发Web应用程序，则将非常复杂。复杂性来自：
这大大提高了开发的门槛，因为解决上述问题并不容易。
如何解决上述两个问题？
首先，看看第一个问题。对于任何Web应用程序，其视图对应于数据。当我们检查产品详细信息时，我们需要首先请求相应产品的数据，然后在接口上显示一系列属性（缩略图，名称，描述，价格，销售等），不同的产品数据是不同，接口是不同的，但是接口的结构是相同的
我们不希望每次更改产品时都需要一系列DOM操作，但希望声明数据和界面之间的关系，例如
我们希望当数据更改时，接口可以自动更新渲染。
这样，我们只需要实现结构和接口与接口数据之间的关系，然后实现数据更改的逻辑以完成函数。
对于第二个问题，在大多数Web应用程序中，将有一些通用接口和逻辑，例如删除的pop -up窗口的辅助确认
如果应用程序中有很多删除场景，例如在论坛类型的应用中，我们可能需要在主页上删除帖子，我们需要在个人中心页面上删除我们的帖子。主页和个人中心页面。这是组件的问题。
该弹出窗口的取消窗口与确定的按钮的窗口相同，并且删除的逻辑是相同的。我们将可重复使用的接口和逻辑集称为组件。一个提示pop -up窗口是一个组件，一个按钮是一个组件，列表是一个组件，并且在上面想提及的产品显示框也是一个组件。
我们通过将属性传递给组件来控制其界面和行为，并通过回调，事件等与它进行通信。
组件有另一个好处。当我们将应用程序分为一个组件时，我们只需要关心一个组件的内部逻辑以及开发时与外部关系的关系，这可以使整个应用程序更易于维护和阅读。
总而言之，我们可以通过语句渲染视图 +组件来解决这两个问题。
目前，主流前端框架主要是在这两个方面进行，这极大地释放了生产力，使开发人员可以更多地关注业务逻辑，而无需关注复杂的DOM操作和可能导致其可能导致其的可能的错误。重用和合理的管理代码以降低代码的效率和质量。
让我们通过几个问答深入对前端框架的理解：
什么是前端框架？：前端框架是调节开发模式的JS库。规格主要包括组件。如何声明数据和视图之间的关系。
开发人员使用框架的开发是什么？主要是编写组件：实现组件视图的界面，并且通过组件语句的拨号周期钩函数实现业务逻辑。
为什么要使用框架？该框架简化了工作，可以减少开发大型应用程序的阈值。
该框架做了什么工作？DOM操作是根据数据和声明视图执行实际渲染的。更新数据后，将更新DOM；整个接口是根据开发人员实现的组件构建的。
是否有一个框架，也没有框架（框架的好处）？声明渲染可以避免DOM操作，并且只需要关心视图和数据之间的关系即可。框架组件调节项目组织方法，使代码更易于管理，而无需使代码混淆。
这是VUE的基本用法和概念，并更详细地检查官方文档。
使用VUE开发应用程序，该应用程序由VUE组件组成。我们使用VUE编写应用程序来编写每个VUE组件。VUE组件定义了与此视图相对应的视图单元和业务逻辑。
使用VUE开发应用程序，首先定义组件，然后将Vue的CreateApp称为渲染组件。
VUE将处理组件的组件，构建组件树，渲染接口和执行逻辑。
首先查看Vue如何在官方网站的示例中运行：
效果如下：
可以看出，Vue通过CreateApp方法创建了一个应用程序，并通过MOUNT方法安装到指定的DOM节点。
VUE组件是一个对象。您可以看到此组件包含模板（组件的查看模板）和数据（组件数据）。当然，组件对象还包含其他属性，它们将接触到一个属性。
当渲染组件时，VUE将根据数据数据替换模板中的变量，以呈现实际值的视图。示例中模板中的“计数器”变量被组件数据中的计数变量替换。
通常，应用程序接口中会有许多元素。当我们布置布局时，该应用程序将被一个一个一个一个盒子分为一个框。每个盒子仍然可以嵌套。相应地，VUE组件可能具有子类，子组件也可能具有子类。形式类似树的结构。
对于视图，最外面的盒子包含所有其他框。相应地，VUE组件树还具有根部成分。
这里的计数器是此应用程序的根组件（目前只有一个组件）。
执行vue.createapp（counter）.mount（'#counter'）之后;在此代码之后，VUE创建一个应用程序，解析组件并将相应的视图渲染到#Counter节点。在以下数据更改之后，将自动更新视图。
查看数据更改，然后更新视图的示例
效果如下
在上面的代码中，组件的生命周期钩子：已安装
组件在整个应用程序的操作过程中具有不同的阶段。它被称为生命周期。组件的生命周期中VUE的不同阶段将执行我们的语句挂钩。山钩方法是在安装组件后执行的（即DOM渲染）。
现在，我们已经学会了一个简单的情况，可以根据数据渲染视图更新视图并更新数据。这只是一个组件。实际项目中将有许多组件。
效果如下：
上面的代码显示了如何使用子组件：
上面的简单示例显示了如何渲染模板，如何更新数据以更新视图以及如何使用子类。VUE的基本用法如下列出。
通过V-BIND指令绑定属性，类和样式。
V-Bind是VUE模板语法中的指令。这些说明用于控制模板渲染，稍后将看到更多说明。
“ v-bind：”也可以简要介绍为“：”
V-ON事件在V-ON指令中呈现，事件的恢复写在组件的“方法”属性中。
单击按钮时，您将调整增加方法，以便增加计数器数据。计数的效果可以在接口上看到。
V-ON：您也可以将其简要为“@”。
V模型输入事件是一个相对特殊的事件。我们想要输入文本的许多方案都可以用来渲染接口，我们还希望控制代码中输入框的内容。这使用了双向绑定的概念，即输入框，内容与我们形成的数据绑定，我们可以更改数据的内容。
查看下面的示例：
该代码实现了此效果
输入输入框中输入的内容实时显示。单击“空”按钮后，上面显示器上的输入框和显示已变为空。
实现此效果的关键是将V-Model指令添加到输入输入框，以便VUE将输入的输入内容绑定到组件的文本数据，并且组件的文本数据更改将直接触发。更新输入。
V-IFV-IF指令用于控制是否呈现某个节点。下面的示例显示了其基本用法。当计数器是一个div时，呈现为“偶数”的内容，否则它将以“奇数”为单位。
是否显示V-ShowV-Show Control元素：
V-Show的元素将始终呈现并保留在DOM.V-Show只是CSS属性显示，仅切换元素。
v-if vs v-showv-if vs vs v-show
不同的行为：如果V-IF指令在符合条件时会导致DOM。V-Show从一开始就渲染了DOM。满足条件后，将CSS的显示属性设置为使元素显示。
不同的应用程序方案：一般而言，V-IF的开关开销较高，而V-Show具有更高的初始渲染开销。因此，如果您需要非常频繁地切换，则最好使用V-Show；如果条件在运行时很少更改，则最好使用V-IF。
通过V-For指令渲染列表：
注意：请勿同时使用V-IF和V-FOR，因为它将穿越列表并确定是否每次渲染时都需要渲染它。这种遍历操作实际上是冗余或完全不必要的一部分。
V-IF和V-FOR使用的解决方案应通过以下方式替换：
有关详细信息，请参阅官方网站：避免使用V-IF和V-For一起使用
在V-IF呈现奇怪数字甚至数字的情况下，我们使用“ Counter％2 === 0”表达式来确定展览奇数节点/偶数节点。一些实际项目中的v-if如果实际项目中的判断更为复杂，并且很难将其直接直接放入V-IF指令中。目前，我们可以使用计算属性。
计算属性根据数据计算另一个数据。否则它取决于数据更改，计算属性也将更改，这将触发视图更新。
在示例中，当计数器更改时，甚至更改时，以更新视图并显示赔率/偶数。
如果我们想在数据更改（例如pop -up提示，请求等）时进行一些操作。此时，可以使用手表属性，并指定数据更改的回调。
在下面的示例中，当计数器更改时，如果计数器均匀，则提示会弹出。
手表有两个选项：深层，直接，深层确定是否要在-Depth Monitoring中监视，即是否要收听多层次对象数据，立即决定是否立即执行。如果是真的，它将立即执行（初始）。仅在更改监视值时才能实现。默认值为false。
不同的应用程序方案用于根据数据属性或其他计算获得新值，并且计算值通常用于渲染中。
手表用于监视数据更改，然后做一些副作用。
在执行过程不同之后，依赖数据属性更改后，计算将不会重新计算新值。取而代之的是，它将在对面试进行判断时进行判断。如果未计算面试，请直接返回当前结果。
更改依赖项的数据后，将执行手表。
如上所述，我们可以通过将应用程序分为组件来改善项目的维护。下面介绍了组件的常见用法。
组件注册为全球注册和本地注册
在上一个组件示例中，显示了子组件的引入。其中，注册组件已部分注册，也就是说，仅在父级组件的“组件”属性中声明了子类的提交，并且可以使用子类。全局注册不需要父组件声明子类。
全球注册组件：
以上代码显示了全局注册组件。
全球注册组件的步骤：
它表明，在加载组件后，在应用程序操作期间，组件可能会经历各个阶段，例如安装，数据更新和破坏。它称为组件的生命周期。相应的生命周期挂钩将在每个阶段执行，用户可以在生命周期挂钩中处理业务逻辑。
例如，我们使用安装和破坏来解释其用法。
查看下面的示例
在示例中，父组件通过单击按钮来控制是否通过变量显示子组件来控制变量“ IsshowchildComponent”。
当您在控制台上看到子组件安装和破坏时，您会看到相应的生命周期钩。
Vue的生命周期挂钩的父亲和儿子的生命周期的生命周期钩执行顺序加载渲染过程
父亲Beforecreate->父亲创造了 - >父亲Beforemount-->儿子Beforecreate->儿子创建 - >儿子beforemount-->儿子山 - >父亲登上。
在Update-> son update--> suppeDed->父亲更新之前更新部门。
驱逐舰beforedestroy-> zi beforeDestroy->儿子被摧毁 - 被摧毁。
生命周期挂钩的使用通常会绑定事件，并在创建/安装的情况下启动计时器，并相应地将事件和停止计时器在BeforedEstroy中停止。
执行一些依赖新状态或依赖新DOMS的操作。例如，在聊天面板组件中，收到消息后更新数据，您需要在更新中判断。如果前面面板的列表正在滚动，也就是说，当您看到以前的新闻时，请及时提供“新闻”。如果列表在底部，它将自动卷起以显示最新消息。
有关更多生命周期的钩子，请参阅官方文件。
通常，在父组件引用子组件之后，它需要与子组件进行通信。例如，父组件需要控制子组件的显示内容，父组件需要监视子类的更改，等等。
与父亲和子女的交流有三种主要方法：
父亲和子女组成的交流首先查看父组件到子组件的示例以传递属性
在上面的示例中，父组件将两个属性传达到子组件“ className”和“ digit”。请注意className作为字符串常数，因此您可以在通过皮下组件时直接className =“ my-child”，并且数字是一个变量，因此必须传递V-Bind指令。
在子组件获取className属性之后，它将绑定到与其元素绑定的类。获得数字属性后，它是通过计算计算来计算的。
当父组件的计数器发生变化时，子组件的props属性也会发生变化，并且可以通过接口观察其更改。
父组件到子组件的步骤传递属性
当子组件声明属性时，除了数组的形式外，还可以通过对象表单的类型指定。
上面的示例表明属性数字是数值类型，className是字符串类型。
在声明道具类型后，如果父部件传输的属性类型不匹配，则将在控制台警告处提示。这可以避免一些意外的错误。
除了可以将属性传递给子组件的父组件外，子组件还可以向父组件投掷事件，因此父组件将知道子组件的更改并做出一些反应。
子组件触发事件的示例，父组件监视事件：
上面示例的效果是单击按钮增加了计数。当计数达到10的倍数时，它将在控制台上打印提示。
聆听子组件的父部件主管的步骤是
父权制组件的某些场景需要直接调用儿童组成部分。
请参阅下面的示例
上面的示例显示了亲本组件获得子组件参考的效果，并调用子组件显示方法
父组件有一个按钮。单击以显示子组件，并有一个用于子类的按钮。单击以隐藏子组件。
它需要3个步骤来实现此效果
兄弟组件通信事件布斯是典型的释放订阅模式。当状态发生变化时，可变的一方通过EventBus发布状态更改事件。关心该状态的组件可以通过订阅事件，在组件之间进行柔和的共享来了解最新状态。
在VUE项目中，您可以简单地实现一个VUE对象来实现EventBus：
然后使用实例提供的方法订阅该方法的使用。
此外，您可以解开事件的纽扣。
参考Vuex知识点总结了Vuex。
装载渲染过程的父亲beforecreate->父亲创建 - >父亲beforemount--> zi beforecreate-> zi创建 - > zi beforemount-> zi beforemount-> Zi ofered->>>>>>>父亲山山山山山山山山山山山山山山山山山山山山
更新过程父亲update--> zi theupdate-> zi> zi更新 - >父亲更新了
驱逐舰beforedestroy-> zi beforedestroy-> Zi被摧毁 - >父亲被摧毁
从上面的说明中，从开发人员的角度来看，VUE的组成部分是一个包含诸如模板，数据，道具，方法，手表的属性的对象包含这些属性的对象：
这两个主要问题将减少项目大型的维护。
因此，在实际开发中，我们可以使用单个文件组件来避免以上两个问题。
单文件组件常规文件后缀命名为.vue。示例如下：
演示
以上是单个文件组件的一个示例，该文件命名为demo.vue.您可以看到每个文件组件分为3个区域，模板，脚本和样式，它们位于标签，标签和标签中， 分别。
与本机VUE语法写作组件的区别是将组件放入标签和导出中，并将模板属性从组件对象放在标签上，并放置新标签。
请注意，这种中文语法不是合法的HTML或JS语法，因此不可能直接在浏览器中运行，因此编写组件仅是由于需要可读性和维护。
单个文件组件的操作需要施工过程将其分析为正常的VUE语法。
Vue-CLI脚手架支持这一施工过程。背面是通过脚手架在实际项目中开发应用程序。
请注意，将“范围”属性添加到样式标签中可以避免当前组件的CSS污染的整体情况。添加此属性后，Vue-Loader将在组件的每个元素中添加一个数据属性，编译CSS代码，添加此数据以添加此DataProperty Selector。
踏板车可以快速建立一个项目。通常，通过脚手架创建的项目包括包装构造的功能，各种资源（CS，图片，字体），预先编写的样式处理，本地调试支持和单元测试。我们的时间构建项目的时间大大提高了效率。
Vue-CLI是基于VUE框架的脚手架。这里是简单的使用。
首先安装nodejs：nodejs官方网站
然后安装Vue-CLI：输入控制台
然后输入命令创建一个项目
执行执行后，您将提示选择VUE2或VUE3
在此处选择VUE3，然后脚手架将下载资源和示例代码，安装依赖项，初始化项目。初始化完成后，您可以看到当前目录中添加了演示目录。当您使用编辑器打开它时，您会发现内部有多个目录。其中，有多个目录。其中，有多个目录。其中包括示例代码，src目录下方的main.js是入口文件，app.vue是应用程序根组件。
在演示目录中运行命令以启动本地调试服务
运行后，汇编的地址已成功提示，并显示了访问的访问
接下来，访问http：// localhost：8080在浏览器中，您可以看到页面。
单个文件组件在项目中使用。
在项目中，app.vue项目引用儿童组件helloworld.vue，helloworld.vue component显示了有关VUE的一些信息。将父组件介绍给sub -component的msg属性。属性值受到您的vue.js应用程序的欢迎。
我们可以更改文本：welcom到您的vue.js app =>欢迎我的vue.js应用程序，并将更改保存在编辑器中，然后发现页面也相应地更改了。
保存代码以实时查看页面上的更改，这也是脚手架提供的非常方便的调试能力。
接下来，您可以编写组件并启动项目！
原始：https：//juejin.cn/post/70971394171701006