亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

目錄
靜態(tài)模板
開始使用Mavo
定義Mavo應用程序
屬性屬性
表達式和MavoScript
自我評估功能
使用元元素保存中間值
結論
后記
致謝
首頁 web前端 css教程 讓Mavo在構建交互式Web應用程序中發(fā)光

讓Mavo在構建交互式Web應用程序中發(fā)光

Apr 18, 2025 am 09:50 AM

Let Mavo Shine in Building Interactive Web Applications

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

Mavo由麻省理工學院CSAIL的Haystack小組開發(fā),由Lea Verou領導。

我們將共同構建一個外語學習用的抽認卡應用程序。這是一個功能齊全的CRUD應用程序,允許您:

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

以下是我們完成的應用程序的外觀:

在本教程中,我將引導您完成構建應用程序的整個過程。

在某些步驟的結尾,我將提供一些建議,讓您嘗試使用Mavo——學習更多知識——并對我們正在構建的應用程序進行一些增強。

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

靜態(tài)模板

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

假設我們在以下HTML代碼中:

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

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

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

開始使用Mavo

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

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

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

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

定義Mavo應用程序

要在HTML結構上啟用Mavo功能,我們必須在包含Mavo應用程序的元素上使用mv-app屬性(甚至可以是元素,都可以!)。其值為應用程序的ID,在頁面中應唯一。如果我們不帶值使用mv-app,并且同一元素上沒有idname屬性,則會自動生成諸如mavo1、mavo2等名稱。

但是,強烈建議您命名Mavo應用程序,因為該名稱在許多地方都會使用。

考慮到<main></main>元素代表我們的Mavo應用程序,讓我們向其添加mv-app屬性,并為我們的應用程序指定ID“flashcards”:

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

屬性屬性

是時候告訴Mavo哪些應用程序元素是重要的,即我們希望哪些元素可編輯并保存。

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

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

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

請記住,property屬性的值應類似于idclass屬性那樣描述元素:

...

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

...

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

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

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

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

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

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

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

mv-multiple屬性

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

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

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

讓我們在我們的應用程序中使用mv-multiple屬性,將我們孤單的抽認卡轉換為抽認卡集合:

  ...    
  <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><p mv-multiple></p></main>,并且在檢查元素或樣式使其明顯之前,通常會長時間不被發(fā)現(xiàn)。現(xiàn)在切換應用程序到編輯模式。請注意,在抽認卡下方,現(xiàn)在有一個添加抽認卡按鈕。讓我們試一試:使用該按鈕創(chuàng)建一些抽認卡?,F(xiàn)在我們可以直接在應用程序中動態(tài)添加新元素,即使HTML中沒有相應的元素。但這還不是全部!

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

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

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

mv-storage屬性

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

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

什么?!我們的數(shù)據(jù)去哪兒了?Mavo不是應該保存它嗎?發(fā)生了什么?

實際上,我們從未告訴Mavo是否在哪里存儲我們的數(shù)據(jù)!

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

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

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

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

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

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

mv-autosave屬性

現(xiàn)在我們每次需要保存數(shù)據(jù)時都必須單擊保存按鈕嗎?這可能更安全,可以防止破壞寶貴的數(shù)據(jù),但這通常會很不方便。我們可以自動保存數(shù)據(jù)嗎?當然!為了在每次更改數(shù)據(jù)時自動保存數(shù)據(jù),我們可以在Mavo根元素上使用mv-autosave屬性。其值為節(jié)流保存的秒數(shù)。讓我們向應用程序的根元素添加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)在我們的應用程序的主要部分看起來像這樣:

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

我們幾乎完成了應用程序的alpha版本?,F(xiàn)在輪到您使應用程序變得更好。別擔心,您擁有所需的所有知識。

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

?提示!

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

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

如果您決定不按組組織抽認卡,而是只用對應于各種主題的標簽標記它們,那也沒問題。使用標簽的解決方案也是合適的。為了練習,也嘗試完成這種方法。

mv-bar屬性

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

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

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

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

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

嘗試這些功能:添加一些抽認卡,嘗試將它們導出到文件中。然后刪除現(xiàn)有抽認卡并從先前導出的文件中導入抽認卡。

表達式和MavoScript

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

為此,我們需要學習一些關于Mavo的新知識。

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

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

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

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

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

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

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

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

...
  [source]

    ...

...

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

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

...
  [flashcard]

    ...

...

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

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

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

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

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

...
[count(flashcard)]

  ...

...

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

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

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

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

自我評估功能

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

假設在我們的應用程序中,我們有兩個用于自我評估的按鈕:差和好。我們希望每次最終用戶單擊按鈕時會發(fā)生什么?好吧,這個想法很簡單:

  • 單擊“差”按鈕將表示用戶尚未學習該單詞,我們希望我們的應用程序將相應的抽認卡移動到列表的開頭,以便他們可以在啟動應用程序后盡快看到它。
  • 單擊“好”按鈕將表示用戶已經(jīng)學習了該單詞,相應的抽認卡需要移動到列表的末尾,讓他們使用他們尚未學習的其他抽認卡。

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

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

...

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


...

mv-action屬性

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

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

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

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

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

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

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

...

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

...

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

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

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

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

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

使用元元素保存中間值

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

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

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

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

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

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

...

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

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

...

我們完成了!恭喜!?

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

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

結論

那么到目前為止我們學習了什么呢?讓我們回顧一下。為了將任何靜態(tài)HTML頁面轉換為Mavo應用程序,我們需要:

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

后記

所以我們構建了我們的應用程序。它已經(jīng)完美了嗎?當然不是,沒有什么東西是完美的!有很多東西可以改進,還有很多功能可以添加(在Mavo的幫助下,我們甚至可以使我們的應用程序多語言化?。@^續(xù),進一步增強它,不要猶豫嘗試新的東西!

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

致謝

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

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

以上是讓Mavo在構建交互式Web應用程序中發(fā)光的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章!

本站聲明
本文內(nèi)容由網(wǎng)友自發(fā)貢獻,版權歸原作者所有,本站不承擔相應法律責任。如您發(fā)現(xiàn)有涉嫌抄襲侵權的內(nèi)容,請聯(lián)系admin@php.cn

熱AI工具

Undress AI Tool

Undress AI Tool

免費脫衣服圖片

Undresser.AI Undress

Undresser.AI Undress

人工智能驅動的應用程序,用于創(chuàng)建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用于從照片中去除衣服的在線人工智能工具。

Clothoff.io

Clothoff.io

AI脫衣機

Video Face Swap

Video Face Swap

使用我們完全免費的人工智能換臉工具輕松在任何視頻中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的代碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

功能強大的PHP集成開發(fā)環(huán)境

Dreamweaver CS6

Dreamweaver CS6

視覺化網(wǎng)頁開發(fā)工具

SublimeText3 Mac版

SublimeText3 Mac版

神級代碼編輯軟件(SublimeText3)

熱門話題

Laravel 教程
1597
29
PHP教程
1488
72
CSS教程,用于創(chuàng)建加載旋轉器和動畫 CSS教程,用于創(chuàng)建加載旋轉器和動畫 Jul 07, 2025 am 12:07 AM

創(chuàng)建CSS加載旋轉器的方法有三種:1.使用邊框的基本旋轉器,通過HTML和CSS實現(xiàn)簡單動畫;2.使用多個點的自定義旋轉器,通過不同延遲時間實現(xiàn)跳動效果;3.在按鈕中添加旋轉器,通過JavaScript切換類來顯示加載狀態(tài)。每種方法都強調(diào)了設計細節(jié)如顏色、大小、可訪問性和性能優(yōu)化的重要性,以提升用戶體驗。

解決CSS瀏覽器兼容性問題和前綴 解決CSS瀏覽器兼容性問題和前綴 Jul 07, 2025 am 01:44 AM

處理CSS瀏覽器兼容性和前綴問題需理解瀏覽器支持差異并合理使用廠商前綴。1.了解常見問題如Flexbox、Grid支持不一,position:sticky失效,動畫表現(xiàn)不同;2.查閱CanIuse確認特性支持情況;3.正確使用-webkit-、-moz-、-ms-、-o-等廠商前綴;4.推薦使用Autoprefixer自動添加前綴;5.安裝PostCSS并配置browserslist指定目標瀏覽器;6.構建時自動處理兼容性;7.老項目可用Modernizr檢測特性;8.不必追求所有瀏覽器一致,確

使用CSS剪輯路徑創(chuàng)建自定義形狀 使用CSS剪輯路徑創(chuàng)建自定義形狀 Jul 09, 2025 am 01:29 AM

使用CSS的clip-path屬性可以裁剪元素為自定義形狀,如三角形、圓形缺口、多邊形等,無需依賴圖片或SVG。其優(yōu)勢包括:1.支持circle、ellipse、polygon等多種基本形狀;2.可響應式調(diào)整,適配移動端;3.易于動畫化,可結合hover或JavaScript實現(xiàn)動態(tài)效果;4.不影響布局流,僅裁剪顯示區(qū)域。常見用法如圓形裁剪clip-path:circle(50pxatcenter)和三角形裁剪clip-path:polygon(50%0%,1000%,00%)。注意

顯示:內(nèi)聯(lián),顯示:塊和顯示:內(nèi)聯(lián)塊之間有什么區(qū)別? 顯示:內(nèi)聯(lián),顯示:塊和顯示:內(nèi)聯(lián)塊之間有什么區(qū)別? Jul 11, 2025 am 03:25 AM

Themaindifferencesbetweendisplay:inline,block,andinline-blockinHTML/CSSarelayoutbehavior,spaceusage,andstylingcontrol.1.Inlineelementsflowwithtext,don’tstartonnewlines,ignorewidth/height,andonlyapplyhorizo??ntalpadding/margins—idealforinlinetextstyling

造型與CSS不同訪問的鏈接 造型與CSS不同訪問的鏈接 Jul 11, 2025 am 03:26 AM

設置訪問過鏈接的樣式能提升用戶體驗,尤其在內(nèi)容密集型網(wǎng)站中幫助用戶更好導航。1.使用CSS的:visited偽類可定義已訪問鏈接樣式,如顏色變化;2.注意瀏覽器出于隱私限制僅允許修改部分屬性;3.顏色選擇應與整體風格協(xié)調(diào),避免突兀;4.移動端可能不顯示該效果,建議結合其他視覺提示如icon輔助標識。

如何使用CSS創(chuàng)建響應式圖像? 如何使用CSS創(chuàng)建響應式圖像? Jul 15, 2025 am 01:10 AM

要使用CSS創(chuàng)建響應式圖片,主要可通過以下方法實現(xiàn):1.使用max-width:100%和height:auto讓圖片在保持比例的同時自適應容器寬度;2.結合HTML的srcset和sizes屬性智能加載適配不同屏幕的圖片源;3.利用object-fit和object-position控制圖片裁剪與焦點展示。這些方法共同確保圖片在不同設備上清晰、美觀地呈現(xiàn)。

什么是常見的CSS瀏覽器不一致? 什么是常見的CSS瀏覽器不一致? Jul 26, 2025 am 07:04 AM

不同瀏覽器對CSS解析存在差異,導致顯示效果不一致,主要包括默認樣式差異、盒模型計算方式、Flexbox和Grid布局支持程度及某些CSS屬性行為不一致。1.默認樣式處理不一致,解決方法是使用CSSReset或Normalize.css統(tǒng)一初始樣式;2.舊版IE的盒模型計算方式不同,建議統(tǒng)一使用box-sizing:border-box;3.Flexbox和Grid在邊緣情況或舊版本中表現(xiàn)有差異,應多測試并使用Autoprefixer;4.某些CSS屬性行為不一致,需查閱CanIuse并提供降級

揭開CSS單元的神秘面紗:PX,EM,REM,VW,VH比較 揭開CSS單元的神秘面紗:PX,EM,REM,VW,VH比較 Jul 08, 2025 am 02:16 AM

CSS單位的選擇取決于設計需求和響應式要求。1.px用于固定尺寸,適合精確控制但缺乏彈性;2.em是相對單位,受父元素影響易導致級聯(lián)問題,rem則基于根元素更穩(wěn)定,適合全局縮放;3.vw/vh基于視口大小,適合響應式設計,但需注意極端屏幕下的表現(xiàn);4.選擇時應根據(jù)是否需要響應式調(diào)整、元素層級關系及視口依賴程度來決定,合理搭配使用可提升布局靈活性與維護性。

See all articles