性欧美牲交xxxxx视频欧美,巨大黑人极品videos精品

將jQuery替換為Vue.js用于基本項目并非難事，并且可以編寫出更好、更快的代碼。
Vue.js允許UI與驅(qū)動它的邏輯/數(shù)據(jù)清晰分離，使代碼更易于理解和測試。
Vue.js中的UI是聲明式的，這意味著開發(fā)者只需要關(guān)注他們想要看到的內(nèi)容，而無需關(guān)注如何操作DOM來實現(xiàn)它。
Vue.js和jQuery的大小相似，但Vue.js提供了更便捷的開發(fā)體驗和更易讀的代碼。
Vue.js可以創(chuàng)建模塊化、可重用的UI組件，這些組件可以組合成復雜的前端應(yīng)用程序。

我們將構(gòu)建的內(nèi)容

本文將構(gòu)建一個簡單的在線發(fā)票，使用Sparksuite提供的開源模板。希望這能比另一個待辦事項列表更有新意，并且具有足夠的復雜性來展示使用Vue的優(yōu)勢，同時又易于理解。

How to Replace jQuery with Vue

我們將通過提供項目、單價和數(shù)量輸入來使其具有交互性，并在其中一個值更改時自動重新計算“價格”列。我們還將添加一個按鈕，用于在發(fā)票中插入新的空行，以及一個“總計”字段，該字段將在我們編輯數(shù)據(jù)時自動更新。

我已經(jīng)修改了模板，以便單個（空）行的HTML如下所示：

<tr> class="item">
  <td><input type="text" v-model="item.description" /></td>
  <td><input type="number" v-model="item.price" /></td>
  <td><input type="number" v-model="item.quantity" /></td>
  <td><pre class="brush:php;toolbar:false"><code class="javascript">$('table').on('mouseup keyup', 'input[type=number]', calculateTotals);

.00

jQuery實現(xiàn)

首先，讓我們看看如何使用jQuery來實現(xiàn)這個功能。

function calculateTotals() {
  const subtotals = $('.item').map((idx, val) => calculateSubtotal(val)).get();
  const total = subtotals.reduce((a, v) => a + Number(v), 0);
  $('.total td:eq(1)').text(formatAsCurrency(total));
}

我們將監(jiān)聽器附加到表格本身，當“單位成本”或“數(shù)量”值更改時，將執(zhí)行calculateTotals函數(shù)：

function calculateSubtotal(row) {
  const $row = $(row);
  const inputs = $row.find('input');
  const subtotal = inputs[1].value * inputs[2].value;

  $row.find('td:last').text(formatAsCurrency(subtotal));

  return subtotal;
}

此函數(shù)查找表格中的所有項目行并循環(huán)遍歷它們，將每一行傳遞給calculateSubtotal函數(shù)，然后將結(jié)果相加。然后，將此總計插入到發(fā)票的相關(guān)位置。

<tr> class="item">
  <td><input type="text" v-model="item.description" /></td>
  <td><input type="number" v-model="item.price" /></td>
  <td><input type="number" v-model="item.quantity" /></td>
  <td><pre class="brush:php;toolbar:false"><code class="javascript">$('table').on('mouseup keyup', 'input[type=number]', calculateTotals);

.00

在上面的代碼中，我們獲取對行中所有輸入元素的引用，并將第二個和第三個相乘以獲得小計。然后，將此值插入到行中的最后一個單元格中。

function calculateTotals() {
  const subtotals = $('.item').map((idx, val) => calculateSubtotal(val)).get();
  const total = subtotals.reduce((a, v) => a + Number(v), 0);
  $('.total td:eq(1)').text(formatAsCurrency(total));
}

我們還有一個輔助函數(shù)，用于確保小計和總計都格式化為兩位小數(shù)，并在前面加上貨幣符號。

function calculateSubtotal(row) {
  const $row = $(row);
  const inputs = $row.find('input');
  const subtotal = inputs[1].value * inputs[2].value;

  $row.find('td:last').text(formatAsCurrency(subtotal));

  return subtotal;
}

最后，我們有一個“添加行”按鈕的點擊處理程序。我們在這里所做的是選擇最后一個項目行并創(chuàng)建一個副本?？寺⌒械妮斎朐O(shè)置為默認值，并將其插入為新的最后一行。我們還可以為用戶提供便利，并將焦點設(shè)置到第一個輸入，以便他們可以開始鍵入。

以下是完整的jQuery演示：CodePen鏈接

jQuery的缺點

那么，這段代碼有什么問題呢？或者說，什么地方可以改進？

您可能聽說過Vue和React等一些較新的庫聲稱是聲明式的而不是命令式的。當然，查看這段jQuery代碼，大部分代碼都是關(guān)于如何操作DOM的指令列表。每一部分代碼的目的——“是什么”——往往很難通過“怎么做”的細節(jié)來分辨出來。當然，我們可以通過將其分解成命名良好的函數(shù)來闡明代碼的意圖，但這段代碼仍然需要一些努力才能在一段時間后重新理解。

此類代碼的另一個問題是，我們將應(yīng)用程序狀態(tài)保存在DOM本身中。訂購項目的相關(guān)信息僅作為構(gòu)成UI的HTML的一部分存在。當我們只在一個位置顯示信息時，這似乎不是什么大問題，但是一旦我們開始需要在應(yīng)用程序中的多個位置顯示相同的數(shù)據(jù)，確保每個部分保持同步就會變得越來越復雜。沒有單一的事實來源。

雖然沒有什么可以阻止我們不將狀態(tài)保存在DOM之外并避免這些問題，但像Vue這樣的庫提供了促進創(chuàng)建良好架構(gòu)和編寫更簡潔、更模塊化代碼的功能和結(jié)構(gòu)。

轉(zhuǎn)換為Vue

那么，我們?nèi)绾问褂肰ue來重現(xiàn)此功能呢？

正如我前面提到的，Vue不需要我們使用模塊打包器、轉(zhuǎn)譯器或選擇單文件組件（.vue文件）來開始使用。像jQuery一樣，我們可以簡單地從CDN包含庫。讓我們從替換script標簽開始：

function formatAsCurrency(amount) {
  return `$${Number(amount).toFixed(2)}`;
}

接下來，我們需要創(chuàng)建一個新的Vue實例：

$('.btn-add-row').on('click', () => {
  const $lastRow = $('.item:last');
  const $newRow = $lastRow.clone();

  $newRow.find('input').val('');
  $newRow.find('td:last').text('<pre class="brush:php;toolbar:false"><code class="html"><??>

.00'); $newRow.insertAfter($lastRow); $newRow.find('input:first').focus(); });

這里我們只需要提供el選項，它是一個選擇器（就像我們使用jQuery一樣），用于標識我們想要Vue管理的文檔的哪個部分。

我們可以讓Vue負責從整個頁面（例如，對于單頁應(yīng)用程序）或單個

開始的任何內(nèi)容。對于我們的發(fā)票示例，我們將讓Vue控制HTML表格。

數(shù)據(jù)

讓我們還將三個示例行的相關(guān)數(shù)據(jù)添加到我們的Vue實例中：

<tr> class="item">
  <td><input type="text" v-model="item.description" /></td>
  <td><input type="number" v-model="item.price" /></td>
  <td><input type="number" v-model="item.quantity" /></td>
  <td><pre class="brush:php;toolbar:false"><code class="javascript">$('table').on('mouseup keyup', 'input[type=number]', calculateTotals);

.00

data屬性是我們在其中存儲應(yīng)用程序狀態(tài)的地方。這不僅包括我們希望應(yīng)用程序使用的任何數(shù)據(jù)，還包括有關(guān)UI狀態(tài)的信息（例如，選項卡組中當前活動的部分，或者手風琴是展開還是折疊）。

Vue鼓勵我們將應(yīng)用程序的狀態(tài)與它的表示（即DOM）分開，并集中在一個地方——單一的事實來源。

修改模板

現(xiàn)在讓我們設(shè)置我們的模板來顯示來自我們data對象中的項目。因為我們已經(jīng)告訴Vue我們希望它控制表格，所以我們可以在HTML中使用它的模板語法來告訴Vue如何渲染和操作它。

使用v-for屬性，我們可以為items數(shù)組中的每個項目渲染一段HTML：

function calculateTotals() {
  const subtotals = $('.item').map((idx, val) => calculateSubtotal(val)).get();
  const total = subtotals.reduce((a, v) => a + Number(v), 0);
  $('.total td:eq(1)').text(formatAsCurrency(total));
}

Vue將為我們傳遞給v-for構(gòu)造的數(shù)組（或?qū)ο螅┑拿總€元素重復此標記，允許我們在循環(huán)中引用每個元素——在本例中為item。由于Vue正在觀察data對象的所有屬性，因此它將隨著items內(nèi)容的變化而動態(tài)地重新渲染標記。我們只需向應(yīng)用程序狀態(tài)添加或刪除項目，Vue就會負責更新UI。

我們還需要添加輸入框，以便用戶填寫項目的描述、單價和數(shù)量：

function calculateSubtotal(row) {
  const $row = $(row);
  const inputs = $row.find('input');
  const subtotal = inputs[1].value * inputs[2].value;

  $row.find('td:last').text(formatAsCurrency(subtotal));

  return subtotal;
}

在這里，我們使用v-model屬性來設(shè)置輸入和項目模型上的屬性之間的雙向綁定。這意味著對輸入的任何更改都將更新項目模型上的相應(yīng)屬性，反之亦然。

在最后一個單元格中，我們使用雙大括號{{ }}來輸出一些文本。我們可以在大括號內(nèi)使用任何有效的JavaScript表達式，因此我們將兩個項目屬性相乘并輸出結(jié)果。同樣，由于Vue正在觀察我們的數(shù)據(jù)模型，因此對任一屬性的更改都將導致表達式自動重新計算。

事件和方法

現(xiàn)在我們已經(jīng)設(shè)置好模板來渲染我們的items集合，但是我們?nèi)绾翁砑有滦心兀坑捎赩ue將渲染items中的任何內(nèi)容，因此要渲染空行，我們只需要將具有我們想要的任何默認值的對象推送到items數(shù)組中即可。

要創(chuàng)建可以在模板中訪問的函數(shù)，我們需要將它們作為methods對象的屬性傳遞給我們的Vue實例：

function formatAsCurrency(amount) {
  return `$${Number(amount).toFixed(2)}`;
}

讓我們定義一個addRow方法，我們可以調(diào)用它來向我們的items數(shù)組添加新項目：

$('.btn-add-row').on('click', () => {
  const $lastRow = $('.item:last');
  const $newRow = $lastRow.clone();

  $newRow.find('input').val('');
  $newRow.find('td:last').text('<pre class="brush:php;toolbar:false"><code class="html"><??>

.00'); $newRow.insertAfter($lastRow); $newRow.find('input:first').focus(); });

請注意，我們創(chuàng)建的任何方法都會自動綁定到Vue實例本身，因此我們可以訪問data對象中的屬性和其他方法，作為this的屬性。

那么，現(xiàn)在我們有了方法，如何在點擊“添加行”按鈕時調(diào)用它呢？在模板中向元素添加事件監(jiān)聽器的語法是v-on:event-name：

const app = new Vue({
  el: 'table'
});

Vue還為我們提供了一個快捷方式，以便我們可以使用@代替v-on:，就像我在上面的代碼中所做的那樣。對于處理程序，我們可以指定Vue實例中的任何方法。

計算屬性

現(xiàn)在我們只需要在發(fā)票底部顯示總計即可。我們可能可以在模板本身中做到這一點：正如我前面提到的，Vue允許我們在花括號之間放置任何JavaScript語句。但是，最好將任何超過非?；镜倪壿嫷膬?nèi)容都保留在模板之外；如果我們將邏輯分開，則更清晰且更容易測試。

我們可以為此使用另一個方法，但我認為計算屬性更合適。與創(chuàng)建方法類似，我們將一個包含函數(shù)的computed對象傳遞給我們的Vue實例，我們希望在模板中使用這些函數(shù)的結(jié)果：

<tr> class="item">
  <td><input type="text" v-model="item.description" /></td>
  <td><input type="number" v-model="item.price" /></td>
  <td><input type="number" v-model="item.quantity" /></td>
  <td><pre class="brush:php;toolbar:false"><code class="javascript">$('table').on('mouseup keyup', 'input[type=number]', calculateTotals);

.00

現(xiàn)在我們可以在模板中引用此計算屬性：

function calculateTotals() {
  const subtotals = $('.item').map((idx, val) => calculateSubtotal(val)).get();
  const total = subtotals.reduce((a, v) => a + Number(v), 0);
  $('.total td:eq(1)').text(formatAsCurrency(total));
}

正如您可能已經(jīng)注意到的那樣，計算屬性可以像數(shù)據(jù)一樣對待；我們不必用括號調(diào)用它們。但是使用計算屬性還有另一個好處：Vue足夠聰明，可以緩存返回值，并且只有當它依賴的數(shù)據(jù)屬性之一發(fā)生更改時，才會重新計算該函數(shù)。

如果我們使用方法來計算總計，則每次重新渲染模板時都會執(zhí)行計算。因為我們使用的是計算屬性，所以只有在項目的數(shù)量或價格字段發(fā)生更改時才會重新計算總計。

過濾器

您可能已經(jīng)發(fā)現(xiàn)我們的實現(xiàn)中存在一個小錯誤。雖然單位成本是整數(shù)，但我們的總計和小計顯示時沒有顯示美分。我們真正想要的是始終將這些數(shù)字顯示為兩位小數(shù)。

與其修改計算小計和計算總計的代碼，Vue為我們提供了一種處理此類常見格式化任務(wù)的好方法：過濾器。

正如您可能已經(jīng)猜到的那樣，要創(chuàng)建過濾器，我們只需將具有該鍵的對象傳遞給我們的Vue實例：

function calculateSubtotal(row) {
  const $row = $(row);
  const inputs = $row.find('input');
  const subtotal = inputs[1].value * inputs[2].value;

  $row.find('td:last').text(formatAsCurrency(subtotal));

  return subtotal;
}

在這里，我們創(chuàng)建了一個非常簡單的名為currency的過濾器，它調(diào)用value.toFixed(2)并返回結(jié)果。我們可以將其應(yīng)用于模板中的任何輸出，如下所示：

function formatAsCurrency(amount) {
  return `$${Number(amount).toFixed(2)}`;
}

以下是完整的Vue演示：CodePen鏈接

總結(jié)

將兩個版本的代碼并排比較，Vue應(yīng)用程序的幾個方面很突出：

UI與驅(qū)動它的邏輯/數(shù)據(jù)之間的清晰分離：代碼更容易理解，并且更容易測試。
UI是聲明式的：您只需要關(guān)心您想看到的內(nèi)容，而無需關(guān)注如何操作DOM來實現(xiàn)它。

兩個庫的大小（以KB為單位）幾乎相同。當然，您可以通過自定義構(gòu)建來精簡jQuery，但是即使對于像我們的發(fā)票示例這樣的相對簡單的項目，我認為開發(fā)的便捷性和代碼的可讀性也證明了這種差異是合理的。

Vue還可以做很多我們在這里沒有介紹的事情。它的優(yōu)勢在于允許您創(chuàng)建模塊化、可重用的UI組件，這些組件可以組合成復雜的frontend應(yīng)用程序。如果您有興趣深入了解Vue，我建議您查看《Getting Up and Running with the Vue.js 2.0 Framework》。

關(guān)于用Vue替換jQuery的常見問題解答(FAQs)

jQuery和Vue.js的主要區(qū)別是什么？

jQuery是一個快速、小巧且功能豐富的JavaScript庫。它使HTML文檔遍歷和操作、事件處理和動畫等操作更加簡單，它易于使用的API可在多種瀏覽器中運行。另一方面，Vue.js是一個用于構(gòu)建用戶界面的漸進式JavaScript框架。與其他整體框架不同，Vue的設(shè)計從一開始就具有增量可采用性。核心庫僅關(guān)注視圖層，易于上手并與其他庫或現(xiàn)有項目集成。

為什么我應(yīng)該考慮用Vue.js替換jQuery？

雖然jQuery多年來一直是一個可靠的工具，但Vue.js提供了一種更現(xiàn)代、更全面的構(gòu)建Web應(yīng)用程序的方法。Vue.js是基于組件的，這促進了可重用性和可維護性。它還有一個更強大的生態(tài)系統(tǒng)，具有狀態(tài)管理、路由等工具。此外，Vue.js具有虛擬DOM，在某些情況下可以提高性能。

如何將jQuery代碼轉(zhuǎn)換為Vue.js？

將jQuery代碼轉(zhuǎn)換為Vue.js需要了解jQuery函數(shù)的等效Vue.js方法和屬性。例如，您將使用Vue的mounted()生命周期鉤子來代替jQuery的$(document).ready()。類似地，您將使用Vue的axios或fetch來代替jQuery的$.ajax()來進行HTTP請求。