本教程將深入探討Mavo：一種便捷易用的方法，只需編寫HTML和CSS，無需一行JavaScript代碼或服務(wù)器後端，即可創(chuàng)建複雜、響應(yīng)式、持久化的Web應(yīng)用程序。

Mavo由麻省理工學(xué)院CSAIL的Haystack小組開發(fā)，由Lea Verou領(lǐng)導(dǎo)。

我們將共同構(gòu)建一個外語學(xué)習(xí)用的抽認卡應(yīng)用程序。這是一個功能齊全的CRUD應(yīng)用程序，允許您：

• 創(chuàng)建、刪除、更新抽認卡，並通過拖放重新排列。
• 導(dǎo)入和導(dǎo)出抽認卡。
• 評估您對抽認卡上單詞的掌握程度。

以下是我們完成的應(yīng)用程序的外觀：

在本教程中，我將引導(dǎo)您完成構(gòu)建應(yīng)用程序的整個過程。

在某些步驟的結(jié)尾，我將提供一些建議，讓您嘗試使用Mavo——學(xué)習(xí)更多知識——並對我們正在構(gòu)建的應(yīng)用程序進行一些增強。

準備好了嗎？讓我們開始吧！ ?

靜態(tài)模板

為了說明Mavo如何增強標準HTML，我們將首先創(chuàng)建一個純靜態(tài)HTML頁面，然後使用Mavo將這個靜態(tài)HTML轉(zhuǎn)換為一個功能齊全的Web應(yīng)用程序。

假設(shè)我們在以下HTML代碼中：

<h1>抽認卡</h1>
<main><p>單詞或短語</p>
  <p>翻譯</p>
</main>

在該代碼中，<main></main>元素表示單個抽認卡。

讓我們添加一些樣式，使我們的HTML看起來更像一個實際的抽認卡應(yīng)用程序。您可以查看源代碼並在此處使用它。

開始使用Mavo

現(xiàn)在，我們只有靜態(tài)模板。是時候添加功能了，這樣它才能真正像抽認卡應(yīng)用程序一樣工作。 Mavo閃亮登場！

為了使用Mavo，我們首先需要在頁面的部分包含其JavaScript和CSS文件：

 ...
  <link href="https://get.mavo.io/mavo.css" rel="stylesheet">
  ...

您可能需要支持舊版瀏覽器，或者希望能夠閱讀代碼？您可以通過回答幾個問題來自定義您正在使用的Mavo版本和構(gòu)建版本。

定義Mavo應(yīng)用程序

要在HTML結(jié)構(gòu)上啟用Mavo功能，我們必須在包含Mavo應(yīng)用程序的元素上使用mv-app屬性（甚至可以是或元素，都可以！ ）。其值為應(yīng)用程序的ID，在頁面中應(yīng)唯一。如果我們不帶值使用<code>mv-app ，並且同一元素上沒有id或name屬性，則會自動生成諸如mavo1 、 mavo2等名稱。

但是，強烈建議您命名Mavo應(yīng)用程序，因為該名稱在許多地方都會使用。

考慮到<main></main>元素代表我們的Mavo應(yīng)用程序，讓我們向其添加mv-app屬性，並為我們的應(yīng)用程序指定ID“flashcards”：

<main mv-app="flashcards">
  ...
</main>

屬性屬性

是時候告訴Mavo哪些應(yīng)用程序元素是重要的，即我們希望哪些元素可編輯並保存。

現(xiàn)在我們有兩個這樣的元素，它們是<p>元素。讓我們向這些元素添加<code>property屬性，以告訴Mavo它們包含數(shù)據(jù)。具有property屬性的元素稱為屬性。

我們可以將property屬性放在任何HTML5元素上，Mavo知道如何使其可編輯。例如，對於<input>，您可以編輯其內(nèi)容，但<time></time>允許您通過適當(dāng)?shù)娜掌?時間選擇器編輯其日期/時間。

您還可以通過插件擴展這組規(guī)則，並以新的方式（例如，富文本）使元素可編輯。

請記住， property屬性的值應(yīng)類似於id或class屬性那樣描述元素：

 ...

  <p property="source">單詞或短語</p>
  <p property="translation">翻譯</p>

...

如果您已經(jīng)有充分描述元素的class 、 id或itemprop屬性，則可以使用不帶值的property ，例如property="source" 。

您注意到我們的應(yīng)用程序中有什麼變化嗎？頁面頂部出現(xiàn)了一個帶有編輯按鈕的Mavo工具欄。編輯按鈕允許用戶在閱讀和編輯模式之間切換?，F(xiàn)在我們的應(yīng)用程序處於閱讀模式。這意味著我們無法編輯頁面上的數(shù)據(jù)。

Mavo工具欄是完全可定制的，幾乎所有由Mavo生成的UI都是如此：您可以更改其位置、刪除其默認樣式、添加自定義按鈕元素或使用您自己的HTML元素，等等。

我們稍後在本教程中將看到一個這樣的自定義示例。

訪問Mavo網(wǎng)站的此部分以了解更多信息。

現(xiàn)在讓我們通過單擊編輯按鈕切換到編輯模式。發(fā)生了什麼變化？編輯按鈕的文本變?yōu)?strong>正在編輯，以指示我們處於編輯模式。如果您將鼠標懸停在段落上，Mavo會通過將它們突出顯示為黃色來告知您可以單擊以編輯它們。開始吧！單擊文本並編輯它。哇！我們可以直接在頁面上更改內(nèi)容！

假設(shè)除了單詞及其翻譯之外，抽認卡還應(yīng)包含一個單詞在句子中用法的示例。通過向抽認卡添加相應(yīng)的元素來增強應(yīng)用程序。

mv-multiple屬性

目前，我們的應(yīng)用程序中只有一個抽認卡。這沒什麼用！對於一個有效的抽認卡應(yīng)用程序，我們需要能夠添加、刪除和重新排列抽認卡。我們該如何做到這一點？我們可以通過向代碼中添加更多<main></main>元素來創(chuàng)建更多抽認卡，但是最終用戶如何創(chuàng)建和刪除抽認卡呢？

幸運的是，Mavo提供了一些使這變得輕而易舉的東西： mv-multiple屬性，它告訴Mavo某些元素可以被複製。它將其使用的元素轉(zhuǎn)換為可編輯的項目集合，並生成（可定制的）UI用於添加、刪除和重新排列項目。

如果在沒有property屬性的元素上使用mv-multiple ，Mavo會自動向其添加property="collection" （或collection2 、 collection3等，以便名稱唯一）。但是，建議您也使用property屬性，為您的集合命名，並確保在HTML更改時保留其數(shù)據(jù)。

讓我們在我們的應(yīng)用程序中使用mv-multiple屬性，將我們孤單的抽認卡轉(zhuǎn)換為抽認卡集合：

 ...    
  <main mv-app="flashcards" mv-multiple>
    <p property="source">單詞或短語</p>
    <p property="translation">翻譯</p>
  </main>

也可以將屬性名稱指定為mv-multiple的值，例如mv-multiple="flashcards" 。

mv-multiple屬性位於將被複製的元素上，而不是集合的容器上。人們常常犯的一個錯誤是使用<main mv-multiple></main>而不是<main></main>

，並且在檢查元素或樣式使其明顯之前，通常會長時間不被發(fā)現(xiàn)?，F(xiàn)在切換應(yīng)用程序到編輯模式。請注意，在抽認卡下方，現(xiàn)在有一個添加抽認卡按鈕。讓我們試一試：使用該按鈕創(chuàng)建一些抽認卡。現(xiàn)在我們可以直接在應(yīng)用程序中動態(tài)添加新元素，即使HTML中沒有相應(yīng)的元素。但這還不是全部！

請注意，<main></main>上的property屬性實際上並沒有使整個<main></main>元素可編輯，而是充當(dāng)分組元素。當(dāng)您在包含其他屬性的元素上使用property屬性時，就會發(fā)生這種情況。嘗試將鼠標懸停在抽認卡上，並註意出現(xiàn)在其右上角的三個按鈕，用於通過拖放句柄添加、刪除和重新排列元素。通過將鼠標懸停在任何項目欄按鈕上，我們可以理解它們對應(yīng)哪個抽認卡：Mavo會突出顯示它。是不是很神奇？

您可以自定義Mavo生成的任何UI元素，例如，您可以通過使用mv-drag-handle類創(chuàng)建您自己的拖動句柄。

Mavo添加到集合中每個項目的按鈕也可以通過鍵盤訪問。甚至重新排序：您可以將焦點放在拖動句柄上，並使用箭頭鍵移動項目。

mv-storage屬性

現(xiàn)在我們已經(jīng)有了基本的UI，讓我們嘗試以下操作：

• 切換到編輯模式（如果您尚未這樣做）。
• 編輯第一個抽認卡的源單詞和翻譯。再添加幾個抽認卡。
• 將應(yīng)用程序切換回閱讀模式。
• 最後……刷新頁面。

什麼？ ！我們的數(shù)據(jù)去哪兒了？ Mavo不是應(yīng)該保存它嗎？發(fā)生了什麼？

實際上，我們從未告訴Mavo是否或在哪裡存儲我們的數(shù)據(jù)！

為此，我們需要使用mv-storage屬性。我們有什麼選擇？好吧，Mavo為我們打開了巨大的可能性，而Mavo插件則打開了更多可能性！

在我們的應(yīng)用程序中，我們將數(shù)據(jù)存儲在瀏覽器的localStorage中，這是最簡單的選項之一，因此它非常適合我們的第一個Mavo應(yīng)用程序。我們只需要在具有mv-app屬性的元素（也稱為Mavo根）上添加值為local的mv-storage屬性。

<main mv-app="flashcards" mv-storage="local">
  ...
</main>

看看Mavo工具欄。注意到什麼了嗎？出現(xiàn)另一個按鈕——保存按鈕。

嘗試再次編輯應(yīng)用程序數(shù)據(jù)。請注意，保存按鈕現(xiàn)在已突出顯示。將鼠標懸停在保存按鈕上，Mavo將突出顯示具有未保存數(shù)據(jù)的屬性。是不是很酷？

單擊保存按鈕並刷新頁面（無需在刷新頁面之前切換到閱讀模式）。您的數(shù)據(jù)還在嗎？太好了！我們離我們的目標又近了一步——一個功能齊全的抽認卡應(yīng)用程序。

mv-autosave屬性

現(xiàn)在我們每次需要保存數(shù)據(jù)時都必須單擊保存按鈕嗎？這可能更安全，可以防止破壞寶貴的數(shù)據(jù)，但這通常會很不方便。我們可以自動保存數(shù)據(jù)嗎？當(dāng)然！為了在每次更改數(shù)據(jù)時自動保存數(shù)據(jù)，我們可以在Mavo根元素上使用mv-autosave屬性。其值為節(jié)流保存的秒數(shù)。讓我們向應(yīng)用程序的根元素添加mv-autosave="3" ：

<main mv-app="flashcard" mv-autosave="3" mv-storage="local">
  ...
</main>

如果mv-autosave="3" ，Mavo最多每三秒鐘只能保存一次。這對於保留更改歷史記錄的後端（例如， GitHub 、 Dropbox ）尤其有用，以防止洪氾，這會使該歷史記錄毫無用處。

要禁用節(jié)流並立即保存，我們可以使用mv-autosave="0"或僅使用mv-autosave ，這也會從UI中刪除保存按鈕（因為在這種情況下它沒有用處）。

再次更改數(shù)據(jù)並查看保存按鈕?？吹搅藛?？一開始，它被突出顯示，但在3秒鐘後——它沒有被突出顯示。我們所有的數(shù)據(jù)現(xiàn)在都自動保存了！

因此，現(xiàn)在我們的應(yīng)用程序的主要部分看起來像這樣：

<main mv-app="flashcards" mv-autosave="3" mv-storage="local"><p property="source">單詞或短語</p>
        <p property="translation">翻譯</p>
      </main>

我們幾乎完成了應(yīng)用程序的alpha版本。現(xiàn)在輪到您使應(yīng)用程序變得更好。別擔(dān)心，您擁有所需的所有知識。

增強應(yīng)用程序，以便抽認卡可以由最終用戶組織到與各種主題相關(guān)的不同組中，例如，用戶可以將所有與服裝相關(guān)的抽認卡收集到一個組中，將所有與廚房用具相關(guān)的抽認卡收集到另一個組中，等等。

?提示！

有很多方法可以實現(xiàn)這個目標，這取決於您決定遵循什麼。但是，我希望您在繼續(xù)之前考慮一些問題：

1. 您將使用什麼HTML元素作為分組元素？如果用戶可以看到抽認卡組的名稱（主題名稱）並可以將組折疊到標題，那將很方便。
2. 您將向該元素添加哪些Mavo屬性（如果有的話）？該元素將是屬性還是集合？
3. 最終用戶能否添加新主題、刪除和重新排列它們、更改主題標題以及在不同主題之間移動抽認卡？

如果您決定不按組組織抽認卡，而是只用對應(yīng)於各種主題的標籤標記它們，那也沒問題。使用標籤的解決方案也是合適的。為了練習(xí)，也嘗試完成這種方法。

mv-bar屬性

由於我們的應(yīng)用程序在本地存儲數(shù)據(jù)，因此默認情況下，應(yīng)用程序的用戶將無法與其他用戶共享他們的卡片。如果我們允許他們導(dǎo)出他們的抽認卡和導(dǎo)入其他人的抽認卡，那不是很好嗎？謝天謝地，這些功能已經(jīng)在Mavo中實現(xiàn)，我們可以很容易地將它們添加到我們的應(yīng)用程序中！

mv-bar屬性控制將顯示哪些按鈕（如果有的話）在工具欄中。它通常在Mavo根（具有mv-app屬性的元素）上指定。按鈕由它們的id（非常邏輯）表示：edit、import、export等。

由於我們只想向默認集合添加幾個按鈕，因此我們可以使用所謂的相對語法，它允許我們向默認集合添加和刪除按鈕，而無需顯式列出所有內(nèi)容。我們只需要以with關(guān)鍵字開頭mv-bar屬性的值即可。

通過這樣做，我們將得到以下內(nèi)容：

<main mv-app="flashcards" mv-autosave="3" mv-bar="with import export" mv-storage="local">
          ...
</main>

嘗試這些功能：添加一些抽認卡，嘗試將它們導(dǎo)出到文件中。然後刪除現(xiàn)有抽認卡並從先前導(dǎo)出的文件中導(dǎo)入抽認卡。

表達式和MavoScript

現(xiàn)在讓我們向我們的應(yīng)用程序添加一些統(tǒng)計信息，例如抽認卡的數(shù)量！聽起來很有趣嗎？我希望如此。 ?

為此，我們需要學(xué)習(xí)一些關(guān)於Mavo的新知識。

我們可以動態(tài)地引用我們在任何地方定義的任何屬性的值在我們的Mavo應(yīng)用程序中（包括在HTML屬性中），方法是將它的名稱放在方括號中，像這樣： [propertyName] 。這是一個簡單的表達式的示例，它允許我們動態(tài)計算事物，並在它們發(fā)生變化時做出反應(yīng)。

Mavo的表達式語法稱為MavoScript 。它類似於電子表格公式，允許我們執(zhí)行計算和其他操作（使用數(shù)字、文本、列表等），但旨在更易於閱讀並適應(yīng)嵌套關(guān)係。您可以在文檔中了解有關(guān)Mavo表達式和MavoScript的更多信息。

現(xiàn)在讓我們嘗試一下，在抽認卡屬性內(nèi)部添加[source]表達式，例如，在兩個屬性之間：源和翻譯。

 ...
  <p property="source">單詞或短語</p>
  [source]
  <p property="translation">翻譯</p>
...

我們的應(yīng)用程序發(fā)生了什麼變化？抽認卡源屬性的值現(xiàn)在在頁面上顯示了兩次。

切換到編輯模式並嘗試更改源屬性的值。您看到了嗎？在您更改屬性值時，頁面內(nèi)容會更新！這就是我之前說Mavo允許我們開發(fā)響應(yīng)式Web應(yīng)用程序的原因。

這確實很酷，但不幸的是，在我們的例子中，它並沒有什麼用處：我們無法使用此表達式來計算抽認卡的數(shù)量——我們總是只有一個值。

如果我們將[source]表達式放在抽認卡屬性外部會怎樣？我們將得到如下內(nèi)容：

 ...
  [source]

    ...

...

這與之前的案例有何不同？要查看差異，如果您尚未這樣做，請?zhí)砑右恍┏檎J卡?，F(xiàn)在，我們不是一個值，而是一個逗號分隔的值列表：所有抽認卡的源屬性。這正是我們一直在尋找的：列表中項目的數(shù)量對應(yīng)於應(yīng)用程序中抽認卡的數(shù)量。

說得通嗎？是的，但是如果我們計算抽認卡的數(shù)量，而不是其源屬性的值的數(shù)量，豈不是更合乎邏輯？畢竟，即使在我們填寫其源或翻譯之前，添加的抽認卡也存在。我建議您執(zhí)行以下操作：讓我們用[flashcard]替換[source]表達式：

 ...
  [flashcard]

    ...

...

注意到區(qū)別了嗎？我們?nèi)匀挥幸粋€列表，但其值不是簡單值，而是對象，即包含與每個抽認卡相關(guān)的所有數(shù)據(jù)的複雜值。好消息是這些對象的數(shù)目等於抽認卡的數(shù)目，因為每個抽認卡都有一個，即使它完全為空。所以，現(xiàn)在我們每個抽認卡都有一個對象，但是我們?nèi)绾斡嬎闼鼈儊K顯示總數(shù)呢？

現(xiàn)在讓我們熟悉MavoScript函數(shù)，並找到可以讓我們計算抽認卡數(shù)量的函數(shù)。記住，我們有一個抽認卡列表，所以我們需要找到一個可以讓我們計算列表中項目數(shù)量的函數(shù)。它來了—— count()函數(shù)就是這樣做的！

但是我們?nèi)绾卧诒磉_式中使用函數(shù)呢？我們需要注意哪些規(guī)則？是的，有幾個：

1. 表達式用方括號表示。
2. 不要嵌套括號。

讓我們嘗試使用count()函數(shù)來計算抽認卡的數(shù)量：

 ...
[count(flashcard)]

  ...

...

這正是我們所追求的——現(xiàn)在我們的應(yīng)用程序中有一些統(tǒng)計數(shù)據(jù)了！是不是很酷？

我希望您已經(jīng)熱身並準備好繼續(xù)嘗試Mavo了。

改進應(yīng)用程序，以便不僅顯示應(yīng)用程序中抽認卡的總數(shù)的統(tǒng)計信息，而且還顯示每個主題中抽認卡的數(shù)量的統(tǒng)計信息（如果有的話）。

?提示！
想要根據(jù)某些條件過濾列表嗎？ where運算符將有所幫助。

自我評估功能

我們已經(jīng)有一個應(yīng)用程序，可以讓我們創(chuàng)建、編輯和存儲多個抽認卡。但是我們?nèi)绾胃櫸覀円呀?jīng)學(xué)習(xí)了哪些抽認卡，以及哪些抽認卡需要更多練習(xí)呢？任何值得尊敬的抽認卡應(yīng)用程序都需要自我評估功能。讓我們研究一下我們?nèi)绾翁砑铀?/p>

假設(shè)在我們的應(yīng)用程序中，我們有兩個用於自我評估的按鈕：差和好。我們希望每次最終用戶單擊按鈕時會發(fā)生什麼？好吧，這個想法很簡單：

• 單擊“差”按鈕將表示用戶尚未學(xué)習(xí)該單詞，我們希望我們的應(yīng)用程序?qū)⑾鄳?yīng)的抽認卡移動到列表的開頭，以便他們可以在啟動應(yīng)用程序後儘快看到它。
• 單擊“好”按鈕將表示用戶已經(jīng)學(xué)習(xí)了該單詞，相應(yīng)的抽認卡需要移動到列表的末尾，讓他們使用他們尚未學(xué)習(xí)的其他抽認卡。

“您確定我們可以在沒有JavaScript的情況下做到這一點嗎？”你可能會問。是的！ Mavo非常強大，能夠為我們提供所需的所有工具！

現(xiàn)在我們知道了我們將要實現(xiàn)的內(nèi)容，讓我們首先設(shè)置UI，然後繼續(xù)下一步。我們的標記看起來像這樣：

 ...

  ...
  <h2>評估自己</h2>
    <button>差</button>
    <button>好</button>


...

mv-action屬性

Mavo操作允許我們創(chuàng)建我們自己的控件，這些控件以自定義方式修改數(shù)據(jù)，當(dāng)用戶與它們交互時。聽起來很有希望，對吧？

要定義自定義操作，我們需要在Mavo應(yīng)用程序內(nèi)的相應(yīng)元素上使用mv-action屬性。每次單擊該元素時都會執(zhí)行該操作。這正是我們一直在尋找的。

對於<form>元素，當(dāng)表單<em>提交</em>時會執(zhí)行自定義操作。 <code>mv-action屬性的值是一個表達式。我們可以使用MavoScript為我們提供的任何表達式函數(shù)和語法，以及一些其他函數(shù)來促進數(shù)據(jù)操作，例如add() 、 set() 、 move()或delete() 。重要的是要注意，與以反應(yīng)方式計算的普通表達式不同，這些表達式僅在每次觸發(fā)操作時才計算。

Mavo期望mv-action屬性的值是一個表達式，因此無需將其括在括號中： mv-action="expression" 。此外，如果我們包含它們，它們將被視為表達式的部分。

因此，我們需要移動集合內(nèi)的抽認卡，而Mavo有一個合適的函數(shù)可以讓我們做到這一點—— move()函數(shù)。它的第一個參數(shù)指的是我們正在移動的項目，第二個參數(shù)是它在集合中的位置。請記住，集合的元素從0開始編號。

想要了解有關(guān)move函數(shù)（及其變體）以及自定義操作的更多信息，請參閱文檔。

讓我們實現(xiàn)我們前面討論的大綱的第一點：在自我評估時，最終用戶單擊“差”按鈕，相應(yīng)的抽認卡將移動到集合的開頭，即成為第一個。所以在代碼中，我們有：

 ...

  ...
  <button mv-action="move(this, 0)">差</button>
  ...

...

請注意，在mv-action屬性中，我們在屬性內(nèi)部引用抽認卡屬性，因為我們希望處理當(dāng)前抽認卡。

如果我們嘗試實現(xiàn)大綱的第二點，我們將面臨一個問題。您能否建議這究竟是什麼問題？

讓我們記住，如果最終用戶單擊“好”按鈕，相應(yīng)的抽認卡將移動到集合的末尾，即成為最後一個。為了使抽認卡成為集合中的最後一個，我們需要知道集合中項目的數(shù)量。

謝天謝地，我們之前已經(jīng)解決了這項任務(wù)並實現(xiàn)了相應(yīng)的功能。但是我們能否使用該解決方案來解決我們當(dāng)前的問題呢？不幸的是，我們不能：正如我們已經(jīng)知道的，我們只能在抽認卡屬性外部引用抽認卡的集合（並評估其大?。?。但在我們的例子中，我們需要在其中進行：我們需要為其編寫表達式的“好”按鈕在抽認卡屬性內(nèi)部。

那我們該怎麼辦呢？我很高興你問。 Mavo有解決方案。

使用元元素保存中間值

因此，一方面，我們知道[count(flashcards)]表達式會在外部評估抽認卡屬性時為我們提供抽認卡的數(shù)量。另一方面，我們需要在其中使用該值抽認卡屬性。

為了解決這個難題，我們需要在我們的代碼中評估抽認卡的數(shù)量，並以某種方式保存結(jié)果，以便能夠在應(yīng)用程序的其他地方使用它，準確地說是在抽認卡屬性內(nèi)部。對於這種情況，在Mavo中，有所謂的計算屬性。

為了保存中間結(jié)果以便我們可以引用它，我們需要代碼中的HTML元素。建議為此使用<meta>元素，如下所示：<meta content="[expression]" property="propertyName"> 。使用此元素的優(yōu)點是它在編輯模式外部是隱藏的，在語義上和視覺上都是如此。

請記住，默認情況下不會保存計算屬性。

現(xiàn)在讓我們在我們的應(yīng)用程序中添加flashcardCount計算屬性。記住，我們必須將其放在抽認卡屬性外部，但是然後我們可以從任何地方引用它：

 ...
<meta content="[count(flashcard)]" property="flashcardCount">
    ...

...

只剩下一個步驟來完成自我評估功能的實現(xiàn)：如果最終用戶單擊“好”按鈕，相應(yīng)的抽認卡將移動到集合的末尾，即成為最後一個。讓我們在應(yīng)用程序的代碼中添加相關(guān)的操作：

 ...
<meta content="[count(flashcard)]" property="flashcardCount">
  ...
  <button mv-action="move(this, flashcardCount)">好</button>

...

我們完成了！恭喜！ ?

還有另一種解決該任務(wù)的方法：借助$all特殊屬性。如果$all屬性位於集合內(nèi)部，則它代表集合本身。因此，在這種情況下無需使用任何計算屬性。嘗試自己實現(xiàn)該解決方案。

只剩下最後一件事我們需要修復(fù)。還記得我們向應(yīng)用程序添加了一些統(tǒng)計數(shù)據(jù)的部分嗎？還記得我們構(gòu)建的用於評估應(yīng)用程序中抽認卡數(shù)量的表達式嗎： [count(flashcard)] ？相反，我們現(xiàn)在可以使用（也應(yīng)該使用）我們定義的計算屬性。在應(yīng)用程序中進行相應(yīng)的更改。

結(jié)論

那麼到目前為止我們學(xué)習(xí)了什麼呢？讓我們回顧一下。為了將任何靜態(tài)HTML頁面轉(zhuǎn)換為Mavo應(yīng)用程序，我們需要：

1. 在頁面的部分包含Mavo JavaScript和CSS文件。
2. 向Mavo根元素添加mv-app屬性。
3. 通過向它們添加property屬性來告訴Mavo我們的應(yīng)用程序的哪些元素是重要的。
4. 將mv-multiple屬性放在將被複製並轉(zhuǎn)換為集合的元素上。
5. 通過向Mavo根添加mv-storage屬性來告訴Mavo在哪裡存儲我們的數(shù)據(jù)。
6. 決定Mavo是否應(yīng)該自動保存我們的數(shù)據(jù)。如果是，則向Mavo根添加mv-autosave屬性。我們還知道：
7. Mavo工具欄是完全可定制的。 mv-bar屬性控制將顯示哪些按鈕。
8. 表達式允許我們在其他元素中顯示屬性的當(dāng)前值並執(zhí)行計算。表達式的值（和類型）取決於表達式在代碼中所處的位置。 Mavo的表達式語法稱為MavoScript。
9. 自定義操作允許創(chuàng)建以自定義方式修改數(shù)據(jù)的控件。要在Mavo應(yīng)用程序內(nèi)的相應(yīng)元素上定義自定義操作，請設(shè)置mv-action屬性。
10. 值為表達式的屬性稱為計算屬性。為了保存中間結(jié)果以便能夠在應(yīng)用程序的其他地方引用它，建議使用<meta>元素。

後記

所以我們構(gòu)建了我們的應(yīng)用程序。它已經(jīng)完美了嗎？當(dāng)然不是，沒有什麼東西是完美的！有很多東西可以改進，還有很多功能可以添加（在Mavo的幫助下，我們甚至可以使我們的應(yīng)用程序多語言化！）。繼續(xù)，進一步增強它，不要猶豫嘗試新的東西！

到目前為止，我們對Mavo的了解只是冰山一角，還有很多東西。我鼓勵您仔細閱讀文檔，檢查示例（在Mavo網(wǎng)站上，或在CodePen上：由Lea Verou製作和一些由我自己製作），並創(chuàng)建新內(nèi)容！祝你好運！ ?

致謝

我要感謝兩位偉大的人。首先，我要衷心感謝Lea Verou，她不僅激勵我撰寫本教程（並幫助我實現(xiàn)它），而且還一直激勵我，她使Web開發(fā)世界變得更美好。我從未見過如此有天賦的人，我很高興有機會和她一起做一些事情！

我還感謝James Moore。他在Udemy上的“JavaScript初學(xué)者函數(shù)式編程”課程中使用的示例促使我製作我自己的抽認卡學(xué)習(xí)應(yīng)用程序版本。他是一位很棒的老師！

以上是讓Mavo在構(gòu)建交互式Web應(yīng)用程序中發(fā)光的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！