Laravel虚拟用户.js教程：从jQuery到虚拟用户.js

就JavaScript库而言，没有比jQuery更流行的库了。当浏览器兼容性对开发人员来说是一个重大问题时，它使用CSS选择器进行DOM遍历（现在仍然如此）。事实上，jQuery非常通用，我认为这将是一个很好的方法，可以深入了解为什么我喜欢使用基于组件的JavaScript用Vue编写ui。在这个Vue教程中，我们将首先介绍如何使用jQuery构建UI，然后使用Vue重写它。这个项目非常典型，因为它的表单需要能够使用JavaScript动态添加多个输入。假设我们有一个在线签出表单，允许用户购买多张票证，每张票证都需要一个名称和电子邮件地址：首先在jQuery中构建这个表单是一个很好的切入点，我们可以在Vue中做同样的事情。许多开发人员都熟悉jQuery，它与构建动态接口必须采用的截然不同的方法形成了极好的对比，我在代码笔上创建了jQuery版本和Vue版本的一个工作示例。jQuery版本我们可以用jQuery构建这个UI。例如，我们可以用HTML标记中的一组输入创建表单，然后当用户添加更多的输入时，让jQuery通过动态地向DOM添加更多的输入来接管表单。我们也可以使用 tag as a row template and add one by default on DOMContentLoaded，这是我们将要采用的方法。jQuery HTML模板使用脚本模板作为行更符合我们的方式可能在Vue中生成组件。下面是HTML标记的外观： 1 2 3 4 5 6 7jQuery Checkout UI 8 910body {11margin: 3em12}1314button {15cursor: pointer;16}1718.unit-price {19margin-right: 2rem;20color: #999;21}22232425262728293031323334353637383940414243Pay444546474849505152535455566162636465667273747576777879808182838485 我们使用bootstrap4 beta版来进行布局。我们已经定义了一些占位符jQuery将填充$(document).ready()上的数据，但是很难从标记中判断将要发生什么。您必须将HTML和JavaScript并排进行比较，以了解所需的功能。几个月后再回到这个项目，需要相当多的脑力开销才能弄清楚到底发生了什么事。在我们的app.js文件中，我们将用JavaScript填充单张票的单价和显示在结帐按钮上的总价。每次用户单击\"添加与会者\"时，我们都会向占位符容器 from the template. To populate the attendee list of repeated form inputs, we use a 标记添加一个新行作为客户端模板。浏览器将忽略脚本，因为>，这意味着它将不会被执行。靠近结束的标记使用最新版本的jQuery和app.js，我们将在那里开始处理动态UI更新。jQuery JavaScript Init 要启动jQuery版本，让我们通过计算总数来初始化表单，默认情况下添加一行，并根据数据设置单价： 1// app.js 2 3$(document).ready(function () { 4 5var> 6cost: 9.99 7}; 8 9/**10* Get the attendee count11*/12function getAttendeeCount() {13return $(\".attendee-list .row.attendee\").length;14}1516function addAttendee() {17$(\".attendee-list\").append(19);20}2122function syncPurchaseButton() {23// Total up the count for the checkout button total24$(\"#checkout-button span.amount\").html(25\"$\" + data.cost * getAttendeeCount()26);27}2829//30// Initialize the form31//3233// Set up the unit cost of one ticket34$(\"#unit-price\").html(\"$\" + data.cost + \" ea.\");3536// Add one attendee by default on init37addAttendee();38syncPurchaseButton();39}); 代码的第一部分为数据设置一个对象文字，其中包含一个price属性。价格是单张票的单价。您可能想动态设置一张票的价格，但出于我们的目的，它只是硬编码的。我们有几个助手函数，包括使用DOM查询获取与会者计数。使用DOM是使用jQuery确定此值的唯一准确方法。第二个助手函数使用我们的标记中的脚本模板向列表中添加一个新的与会者。 syncPurchaseButton()函数使用getAttendeeCount()计算并用签出总额填充\"购买\"按钮。如果您想要相同的购买总额在模板中的任何其他地方，您都需要使用类选择器来同步DOM中的所有实例，但在这种情况下，我们只针对一个实例。如果此时加载页面，表单将由一个参与者初始化，即单价，签出按钮中的总数：使用jQuery添加与会者接下来，让我们讨论添加和删除与会者的功能。jQuery具有出色的事件处理能力，包括触发自定义事件。让我们从添加新与会者所需的代码开始： 1function addAttendee() { 2$(\".attendee-list\").append(> 4); 5 6// Sync remove button UI 7syncRemoveButtons(); 8} 910function syncRemoveButtons() {11// If only one attendee, hide the first remove button12// otherwise, show all remove buttons13if (getAttendeeCount() === 1) {14$(\".attendee-list .attendee .remove-attendee\").first().hide();15} else {16$(\".attendee-list .attendee .remove-attendee\").show();17}18}1920function syncPurchaseButton() {21// Total up the count for the checkout button total22$(\"#checkout-button span.amount\").html(23\"$\" + data.cost * getAttendeeCount()24);25}2627// Events28$(\".add-attendee\").on(\"click\", function (event) {29event.preventDefault();30addAttendee();31$(this).trigger(\"attendee:add\");32}).on(\"attendee:add\", function () {33syncPurchaseButton();34syncRemoveButtons();35}); syncRemoveButtons()确保用户在只剩下一个输入时无法删除输入，但当存在多行时，用户可以删除任何一行。我们现在在addAttendee()函数中调用syncRemoveButtons()，这意味着如果您刷新页面，删除按钮是隐藏的，因为与会者计数只有一个。添加与会者的事件处理程序调用addAttendee()函数，然后触发attendee:add自定义事件。在自定义事件处理程序中，我们同步总价，以便签出按钮准确，然后调用syncRemoveButtons()更新删除按钮状态如前所述。随着jQuery UI的增长，同步状态可能会失控。我们必须显式地管理状态并在它从事件更改时进行同步，而且我们必须采用特定的方式使状态与每个应用程序同步st和一组与会者。我们添加了一个空的与会者，因此窗体默认情况下将使用一组输入进行呈现。如果要删除与会者并使其成为空数组，您将看不到任何名称和电子邮件输入。整个过程都被包装在一个立即调用的函数表达式（IIFE）中，以将我们的实例排除在全局范围之外。在jQuery版本中计算总价，我们通过将总价与事件上的DOM同步来计算总价，以删除或添加参与者。在Vue中，您可能会猜到，我们使用数据，然后视图会自动对这些更改做出反应。我们可以执行以下操作，这仍然比查询DOM要好得多： ***42*** 但是，在模板中放置太多的逻辑会降低它们的表达能力和维护难度。相反，我们可以使用计算属性： ***43*** 我们定义了两个计算属性。第一个属性是票数，它是根据与会者的长度来计算的。其次，我们定义了***44***计算属性，它使用第一个计算属性乘以单位成本和数量。现在，我们可以更新checkout按钮以使用计算属性。请注意计算属性名称的描述性：如果刷新浏览器，按钮中会自动显示计算的签出总数。添加与会者时，computed属性将自动更新并反映在DOM中。使用Vue添加与会者我们准备好查看如何使用Vue使用事件添加与会者。在jQuery中，我们使用了DOM事件处理程序： ***46*** 在Vue中，我们在模板中连接事件。在我看来，它使HTML更容易阅读，因为我们有一种表达方式来知道哪些事件与给定的元素相关联。您可以使用>： ***47*** 或速记> ***48*** 使用任何一种样式都可以，但也可以使用良好的形式来始终坚持相同的方法。我更喜欢速记风格。单击按钮时，我们会将一个新对象推送到模板中的***49***数组中。我想向您展示这种风格，这样您就可以理解，只需在属性中运行一些JavaScript即可。大多数情况下，最好使用事件处理程序，因为通常，事件有更复杂的逻辑关联： ***50*** Vue接受主Vue对象（和组件）上的***51***属性，这将允许我们定义事件处理程序方法： ***52*** 我们阻止默认操作并将新对象推送到***53***数组上。现在，如果您添加了与会者，您将看到添加了新的输入，***54***与行计数匹配：请注意，处理程序接收到一个事件对象，我们可以使用它来阻止默认值。由于通常会阻止默认事件操作或停止传播，Vue提供了与点（.）一起使用的事件修饰符作为属性的一部分： ***55*** 您的方法将重点放在数据上，并且Vue会使用事件属性修饰符自动处理DOM事件。使用Vue删除与会者删除与会者是非常重要的与添加它们类似，但不是向数组中添加对象，而是需要使用另一个事件处理程序基于数组索引删除对象： ***56*** 我们使用数组索引引用要删除的正确与会者。如果您还记得在我们的***57***循环中，我们定义了一个索引： ***58*** 在我们的Vue实例中，我们定义了***59***方法，该方法使用***60***从基于索引的数组中删除一个项目： ***61*** 使用***62***事件处理程序，您现在可以添加和删除与会者了！我们还希望满足业务需求，即在添加多个与会者时仅显示\"删除\"按钮。我们不想允许用户删除所有输入。我们可以使用内置的***63***条件指令来实现： ***64*** 我们使用***65***计算属性在数量大于1时显示\"删除\"按钮。我们还可以使用***66***条件隐藏按钮。我建议您阅读这些文档，以了解它们如何工作的细微差别。在我们的示例中，我们使用***67***来显示和隐藏使用CSS的按钮。如果您用***68***将其切换出来并检查DOM，您将看到Vue从DOM中删除元素。完成的Vue版本这里是最终的Vue版本： ***69*** 我们现在在两个版本中都有相同的功能！我的目标是演示如何从基于DOM的工作流转移到修改数据，并将UI更新作为这些更改的副作用。 Vue版本的标记在传递组件功能方面比jQuery更具表现力版本。无法确定哪些元素将在jQuery版本中附加事件处理。此外，我们无法预测UI对HTML标记更改的反应。下一步是什么？如果您对Vue还没有太多的经验，我建议您从头到尾阅读本指南。很像Laravel的文档，指南读起来像一本书。该文档将引导您了解开始使用Vue所需的所有知识。 Vue还发布了一份正式的样式指南，您在开始使用Vue后应该阅读。

Laravel虚拟用户.js教程：从jQuery到虚拟用户.js

CSS无头WordPress到底有多合适？

CSS制作带有粘性页眉和页脚的表格变得更容易了

CSS技巧编年史XXXX

CSS使用子资源完整性保护您的网站

CSS联合的可能性

CSS在开放细节元素上添加背景

CSS容器查询的聚宝盆

CSS target=blank

CSS查看WCAG 2.5.5以获得更好的目标尺寸

CSS Trickz：Netlify随需应变构建器的实验