从基础到组件的Vue.js 2.0学习教程详解

序

最近一直在分享Vue的技术。虽然不是深层次的代码底层架构，但如果真的说底层架构，我不会从基础到组件做Vue.js 2.0，而是从底层到底层分享Vue。相信这次能来看我分享的朋友，在工作发展层面都面临着一些问题。让我们把Vue-router和Vuex放在一边进行这个分享。很多朋友认为Vuex和路由器难，错！

Vue 2.0简介

我对Vue 2.0和it前端框架的理解，不算底层原理的时候本质是什么，就是基本方法和一些API的介绍。随着现代数据量的巨大，业务逻辑变得更加复杂。随着数据展现场景的不同，jquery、angular1.0等一系列框架已经不能满足开发需求。如何用数据驱动管理数据，我的理解是前端连接，然后用json数据来传递所有的信息。

我们操作dom分析数据，就是用屠龙刀切菜，用数据驱动改变数据，这叫精细工作，好工作。以及如何通过组件更好地将一个复杂的页面划分为代码简化、易于维护、可重用、可扩展性强的组件集合！

如果是，你如何划分这一页

将头部分成一部分。(使用prop: {[img]}分割标题图。)输入框的划分。图案验证码和图案输入框。消息组件和消息输入框。协议服务的弹出窗口。按钮的分区。语音验证码的分类。这样你会发现一个小登录分为六个组件，可能给你的感觉就是点太细了，所以我也觉得点太细了，那我为什么要分这么细，也就是增强复用性和广泛性。

那如何解决这个组件过于细分的问题呢？我们可以合并这些东西。乍一看，唯一可以合并的是中间注册制。我们将这些精细的组件2、3、4、5、7合并到登录中。Vue组件。在这个层面上，我们只需要将四个输入框的内容所传递的数据进行公开，这样就可以对整个页面进行拆解。对于每页的代码，

组件从基础开始

Vue如何做好项目的问题是模板中的整体组织，如何用好的组织体系方便地展示复杂的逻辑操作。我个人认为新Vue中的所有选项都遵循模板的组织体系，而不是通过新Vue操纵整体。如果是房子，模板就是地基，新Vue里的选项是水泥和石头。

1.模板语法

如果你能使用javascript表达式，你就能使用表达式。我觉得表情给人最清晰的感觉，结合模板正确使用表情是最清晰的。

P @click='show=false'/p以上可以让人一目了然，我不需要低头去理解我要把数据换成什么，这样你就可以通过为这一行模板语法编写javascript表达式来理解一切。

2.修饰符

修饰符是由半宽句点表示的特殊后缀。它们用于指示指令应该以特殊的方式绑定。

在修饰语中，我们如何灵活使用修饰语来减少代码量，并且不要忘记添加。组件事件的原生。例如，编写用于组织事件和防止默认事件的代码非常方便，例如@ touchmove.prevent.stop。

虽然在大多数情况下计算属性更合适，但有时需要自定义观察器。这就是为什么Vue通过watch选项提供了一种更通用的方法来响应数据变化。当您想要响应数据更改时，执行异步操作或昂贵的操作非常有用。

基于这个官方的理解，我将总结一下我个人的整体理解。给出计算和观察的总结，记住这些总结，在做项目时考虑这些总结，并选择你的应用方法

Computed :监控多个数据或一个数据，以维护并返回一个状态值。如果一个或多个数据发生变化，将重新计算整个函数体，并再次返回状态值。手表：只有一个监测数据。只要这个数据发生变化，就会返回两个参数，第一个是当前值，第二个是变化前的值。每当发生变化时，都会触发函数体中的逻辑行为，进行逻辑后续操作。其实我觉得计算属性也不算太难。计算和观察并不难。如果在浅层次上容易理解，如果在深层次上与很多小伙伴存在问题，就会被滥用和混杂。这些计算属性，虽然最终的结果可以实现，但就像条条大路通罗马。你走的是最远的路，可能很难回头。

上面我会举几个简单的例子，但我想说的是，两个基础非常重要。

如何结合三大牛B的特点：

v-if v-else-if v-else模板的计算vs手表v-的外包装模具