數(shù)據(jù)

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

<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);

data屬性是我們?cè)谄渲写鎯?chǔ)應(yīng)用程序狀態(tài)的地方。這不僅包括我們希望應(yīng)用程序使用的任何數(shù)據(jù)，還包括有關(guān)UI狀態(tài)的信息（例如，選項(xiàng)卡組中當(dāng)前活動(dòng)的部分，或者手風(fēng)琴是展開(kāi)還是折疊）。

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

修改模板

現(xiàn)在讓我們?cè)O(shè)置我們的模板來(lái)顯示來(lái)自我們data對(duì)像中的項(xiàng)目。因?yàn)槲覀円呀?jīng)告訴Vue我們希望它控製表格，所以我們可以在HTML中使用它的模板語(yǔ)法來(lái)告訴Vue如何渲染和操作它。

使用v-for屬性，我們可以為items數(shù)組中的每個(gè)項(xiàng)目渲染一段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ū)ο螅┑拿總€(gè)元素重複此標(biāo)記，允許我們?cè)谘h(huán)中引用每個(gè)元素——在本例中為item。由於Vue正在觀察data對(duì)象的所有屬性，因此它將隨著items內(nèi)容的變化而動(dòng)態(tài)地重新渲染標(biāo)記。我們只需向應(yīng)用程序狀態(tài)添加或刪除項(xiàng)目，Vue就會(huì)負(fù)責(zé)更新UI。

我們還需要添加輸入框，以便用戶(hù)填寫(xiě)項(xiàng)目的描述、單價(jià)和數(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屬性來(lái)設(shè)置輸入和項(xiàng)目模型上的屬性之間的雙向綁定。這意味著對(duì)輸入的任何更改都將更新項(xiàng)目模型上的相應(yīng)屬性，反之亦然。

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

事件和方法

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

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

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

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

$('.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"><??>

請(qǐng)注意，我們創(chuàng)建的任何方法都會(huì)自動(dòng)綁定到Vue實(shí)例本身，因此我們可以訪問(wèn)data對(duì)像中的屬性和其他方法，作為this的屬性。

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

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

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

計(jì)算屬性

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

我們可以為此使用另一個(gè)方法，但我認(rèn)為計(jì)算屬性更合適。與創(chuàng)建方法類(lèi)似，我們將一個(gè)包含函數(shù)的computed對(duì)像傳遞給我們的Vue實(shí)例，我們希望在模板中使用這些函數(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);

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

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)註意到的那樣，計(jì)算屬性可以像數(shù)據(jù)一樣對(duì)待；我們不必用括號(hào)調(diào)用它們。但是使用計(jì)算屬性還有另一個(gè)好處：Vue足夠聰明，可以緩存返回值，並且只有當(dāng)它依賴(lài)的數(shù)據(jù)屬性之一發(fā)生更改時(shí)，才會(huì)重新計(jì)算該函數(shù)。

如果我們使用方法來(lái)計(jì)算總計(jì)，則每次重新渲染模板時(shí)都會(huì)執(zhí)行計(jì)算。因?yàn)槲覀兪褂玫氖怯?jì)算屬性，所以只有在項(xiàng)目的數(shù)量或價(jià)格字段發(fā)生更改時(shí)才會(huì)重新計(jì)算總計(jì)。

過(guò)濾器

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

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

正如您可能已經(jīng)猜到的那樣，要?jiǎng)?chuàng)建過(guò)濾器，我們只需將具有該鍵的對(duì)像傳遞給我們的Vue實(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)建了一個(gè)非常簡(jiǎn)單的名為currency的過(guò)濾器，它調(diào)用value.toFixed(2)並返回結(jié)果。我們可以將其應(yīng)用於模板中的任何輸出，如下所示：

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

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

總結(jié)

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

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

兩個(gè)庫(kù)的大?。ㄒ訩B為單位）幾乎相同。當(dāng)然，您可以通過(guò)自定義構(gòu)建來(lái)精簡(jiǎn)jQuery，但是即使對(duì)於像我們的發(fā)票示例這樣的相對(duì)簡(jiǎn)單的項(xiàng)目，我認(rèn)為開(kāi)發(fā)的便捷性和代碼的可讀性也證明了這種差異是合理的。

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

關(guān)於用Vue替換jQuery的常見(jiàn)問(wèn)題解答(FAQs)

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

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

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

雖然jQuery多年來(lái)一直是一個(gè)可靠的工具，但Vue.js提供了一種更現(xiàn)代、更全面的構(gòu)建Web應(yīng)用程序的方法。 Vue.js是基於組件的，這促進(jìn)了可重用性和可維護(hù)性。它還有一個(gè)更強(qiáng)大的生態(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()生命週期鉤子來(lái)代替jQuery的$(document).ready()。類(lèi)似地，您將使用Vue的axios或fetch來(lái)代替jQuery的$.ajax()來(lái)進(jìn)行HTTP請(qǐng)求。

我可以在一個(gè)項(xiàng)目中同時(shí)使用jQuery和Vue.js嗎？

雖然從技術(shù)上講可以同時(shí)使用jQuery和Vue.js，但通常不建議這樣做?；旌鲜褂脙烧呖赡軙?huì)導(dǎo)致代碼混亂和潛在衝突，因?yàn)檫@兩個(gè)庫(kù)都試圖以自己的方式管理DOM。最好完全使用其中一個(gè)。

如何在Vue.js中處理事件，與jQuery相比？

在jQuery中，您通常使用.click()、.on()或.bind()等方法將事件監(jiān)聽(tīng)器附加到元素。在Vue.js中，您使用v-on指令（或其簡(jiǎn)寫(xiě)@）來(lái)監(jiān)聽(tīng)DOM事件並在觸發(fā)時(shí)運(yùn)行一些JavaScript。

Vue.js中的數(shù)據(jù)綁定與jQuery相比如何工作？

jQuery沒(méi)有內(nèi)置的數(shù)據(jù)綁定。您手動(dòng)選擇元素並更新其內(nèi)容。相反，Vue.js具有強(qiáng)大的數(shù)據(jù)綁定係統(tǒng)。您可以使用v-model指令在表單輸入、textarea和select元素上創(chuàng)建雙向數(shù)據(jù)綁定。

如何在Vue.js中動(dòng)畫(huà)元素，與jQuery相比？

jQuery具有內(nèi)置的動(dòng)畫(huà)方法，如.fadeIn()、.slideUp()等。另一方面，Vue.js提供轉(zhuǎn)換組件，在將元素動(dòng)畫(huà)進(jìn)出DOM時(shí)允許更大的靈活性。

如何在Vue.js中發(fā)出HTTP請(qǐng)求，與jQuery相比？

在jQuery中，您通常使用$.ajax()方法發(fā)出HTTP請(qǐng)求。 Vue.js沒(méi)有內(nèi)置的此方法，但是您可以使用現(xiàn)代API（如fetch）或axios等庫(kù)來(lái)發(fā)出HTTP請(qǐng)求。

Vue.js如何處理反應(yīng)性，與jQuery相比？

jQuery沒(méi)有內(nèi)置的反應(yīng)性系統(tǒng)。當(dāng)您的數(shù)據(jù)更改時(shí)，您會(huì)手動(dòng)更新DOM。另一方面，Vue.js具有反應(yīng)性數(shù)據(jù)系統(tǒng)。當(dāng)您更改數(shù)據(jù)時(shí)，視圖會(huì)自動(dòng)更新。

如何用Vue.js組件替換jQuery插件？

許多jQuery插件都可以用Vue.js組件替換。 Vue.js擁有豐富的生態(tài)系統(tǒng)，提供了數(shù)千個(gè)可用的開(kāi)源組件。您還可以創(chuàng)建自己的自定義組件。這提高了代碼的可重用性和可維護(hù)性。

請(qǐng)注意，我已根據(jù)您的要求對(duì)輸出進(jìn)行了改寫(xiě)，並保留了所有圖片的原始格式和位置。 由於我沒(méi)有訪問(wèn)CodePen，我無(wú)法提供實(shí)際的CodePen鏈接，請(qǐng)您自行創(chuàng)建並替換“[CodePen鏈接]”佔(zhàn)位符。

以上是如何用vue替換jQuery的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！