インタラクティブなWebアプリケーションの構築でMavoを照らしましょう

このチュートリアルは、JavaScriptコードまたはサーバーバックエンドのラインなしでHTMLとCSSを作成することにより、複雑で応答性のある永続的なWebアプリケーションを作成するための便利で使いやすい方法であるMavoに飛び込みます。

Mavoは、MITのCsailのHaystack Groupによって開発され、Lea Verouが率いています。

外国語学習のためのフラッシュカードアプリケーションを共同で構築します。これは、完全に機能的なCRUDアプリケーションであり、次のことを可能にします。

• フラッシュカードを作成、削除、更新し、ドラッグアンドドロップで再配置します。
• フラッシュカードをインポートおよびエクスポートします。
• フラッシュカードでの単語の習得のレベルを評価します。

完了したアプリケーションの外観は次のとおりです。

このチュートリアルでは、アプリケーションを構築するプロセス全体を説明します。

いくつかのステップの終わりに、Mavoを使用してみてください - 詳細を学び、私たちが構築しているアプリをいくつか強化するためのアドバイスをします。

準備ができて？始めましょう！ ？

静的テンプレート

Mavoが標準のHTMLを強化する方法を説明するために、最初に純粋な静的HTMLページを作成し、Mavoを使用してこの静的HTMLを完全に機能的なWebアプリケーションに変換します。

次のHTMLコードにあるとします。

<h1 id="フラッシュカード">フラッシュカード</h1>
<main><p>単語やフレーズ</p>
  <p>翻訳する</p>
</main>

このコードでは、<main></main>要素は単一のフラッシュカードを表します。

HTMLを実際のフラッシュカードアプリケーションのように見せるために、いくつかのスタイルを追加しましょう。ソースコードを表示して、ここで使用できます。

Mavoを始めましょう

これで、静的テンプレートのみがあります。 Flashcardアプリのように機能するように、機能を追加する時が来ました。 Mavoは素晴らしいデビューを果たします！

Mavoを使用するには、最初にする必要があります部分的にはJavaScriptおよびCSSファイルが含まれています。

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

古いブラウザをサポートする必要があるかもしれませんし、コードを読み取ることができますか？バージョンをカスタマイズして、いくつかの質問に答えることで使用しているビルドができます。

Mavoアプリケーションを定義します

HTML構造でMavo機能を有効にするには、MAVOアプリケーションを含む要素にmv-app属性を使用する必要があります（または要素、すべて大丈夫です！ ）。その値はアプリケーションのIDであり、ページで一意である必要があります。値なしで<code>mv-appを使用し、同じ要素にidまたはname属性がない場合、 mavo1 、 mavo2などの名前が自動的に生成されます。

ただし、名前は多くの場所で使用されるため、Mavoアプリケーションに名前を付けることを強くお勧めします。

考慮する<main></main>この要素はMavoアプリケーションを表します。MV mv-app属性を追加し、アプリケーションのID「フラッシュカード」を指定しましょう。

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

属性属性

どのアプリケーション要素が重要であるか、つまり編集可能で保存したい要素をMavoに伝える時が来ました。

今、私たちはそのような2つの要素を持っています<p>要素。これらの要素に<code>property属性を追加して、Mavoにデータが含まれていることを伝えましょう。 property属性を持つ要素は、プロパティと呼ばれます。

propertyを任意のHTML5要素に配置することができ、Mavoはそれを編集可能にする方法を知っています。例えば、<input> 、そのコンテンツを編集できますが<time></time>適切な日付/時刻セレクターで日付/時刻を編集できます。

また、この一連のルールをプラグインを介して拡張し、新しい方法で要素を編集可能にすることもできます（たとえば、リッチテキスト）。

property属性の値は、 idまたはclass属性と同様の要素を記述する必要があることを忘れないでください。

 ...

  <p property="source">単語やフレーズ</p>
  <p property="translation">翻訳する</p>

...

要素を完全に説明するclass 、 id 、またはitemprop属性が既にある場合は、 property="source"などの値なしでpropertyを使用できます。

私たちのアプリケーションの変更に気づきましたか？編集ボタンを備えたMavoツールバーがページの上部に表示されます。編集ボタンを使用すると、ユーザーは読み取りモードと編集モードを切り替えることができます。これで、アプリケーションは読み取りモードになりました。これは、ページ上のデータを編集できないことを意味します。

Mavoツールバーは完全にカスタマイズ可能であり、Mavoによって生成されたほぼすべてのUIS ：その場所を変更したり、デフォルトスタイルを削除したり、カスタムボタン要素を追加したり、独自のHTML要素を使用したりすることができます。

このチュートリアルの後半では、このようなカスタム例が表示されます。

詳細については、Mavo Webサイトのこのセクションにアクセスしてください。

次に、 [編集]ボタンをクリックして編集モードに切り替えましょう。何が変わったのですか？編集ボタンのテキストが編集され、編集モードがあることを示します。パラグラフの上にホバリングすると、Mavoはクリックして黄色で強調表示して編集できることを伝えます。始めましょう！テキストをクリックして編集します。おお！ページ上のコンテンツを直接変更できます！

単語とその翻訳に加えて、フラッシュカードには文で単語がどのように使用されるかの例も含まれている必要があると仮定します。 Flashcardに対応する要素を追加して、アプリケーションを強化します。

mv-multiple属性

現在、アプリケーションにはフラッシュカードは1つだけです。これは役に立たない！効果的なフラッシュカードアプリケーションを使用するには、フラッシュカードを追加、削除、再配置できる必要があります。どうすればこれを行うことができますか？コードにさらに追加できます<main></main>より多くのフラッシュカードを作成する要素ですが、エンドユーザーはどのようにしてフラッシュカードを作成および削除しますか？

幸いなことに、Mavoはこれを簡単にするものを提供します。MVMultiple mv-multipleは、特定の要素をコピーできることをMavoに伝えます。使用する要素を編集可能なアイテムのコレクションに変換し、アイテムを追加、削除、再配置するために（カスタマイズ可能な）UIを生成します。

property属性のない要素でmv-multipleを使用する場合、Mavoは自動的にproperty="collection" （またはcollection2 、 collection3などを追加して、名前を一意に追加します。ただし、 propertyプロパティを使用し、コレクションに名前を付け、HTMLがデータを保存するために変更を変更することもお勧めします。

アプリケーションのmv-multiple属性を使用して、孤独なフラッシュカードをフラッシュカードコレクションに変換しましょう。

 ...    
  <main mv-app="flashcards" mv-multiple>
    <p property="source">単語やフレーズ</p>
    <p property="translation">翻訳する</p>
  </main>

mv-multiple="flashcards"など、MV- mv-multipleの値としてプロパティ名を指定することもできます。

mv-multiple属性は、コレクションのコンテナではなく、コピーする要素上に配置されています。人々が犯す間違いの1つは使用することです<main mv-multiple></main>その代わり<main></main>

、そして通常、それを明らかにするために要素やスタイルをチェックする前に長い間発見されていません。次に、アプリケーションを編集モードに切り替えます。フラッシュカードの下には、フラッシュカードの追加ボタンがあることに注意してください。試してみましょう。このボタンを使用してフラッシュカードを作成します。 HTMLに対応する要素がない場合でも、アプリケーションに新しい要素を直接動的に追加できます。しかし、それだけではありません！

注意してください<main></main>プロパティ上のpropertyは、実際には全体を作りません<main></main>要素は編集可能ですが、代わりにグループ化要素として機能します。これは、他のプロパティを含む要素にpropertyプロパティを使用すると発生します。フラッシュカードの上にマウスをホバリングし、右上隅に表示される3つのボタンに注意を払い、ドラッグアンドドロップハンドルで要素を追加、削除、再配置してください。アイテムバーボタンの上にホバリングすることで、どのフラッシュカードに対応しているかを理解できます。Mavoがそれを強調します。それはとても魔法ではありませんか？

Mavoによって生成された任意のUI要素をカスタマイズできます。たとえば、 mv-drag-handleクラスを使用して独自のドラッグハンドルを作成できます。

コレクション内の各アイテムに追加されたボタンには、キーボードからもアクセスできます。再注文：ドラッグハンドルに焦点を合わせて、矢印キーを使用してアイテムを移動できます。

mv-storage属性

基本的なUIができたので、以下を試してみましょう。

• 編集モードに切り替えます（まだ行っていない場合）。
• 最初のフラッシュカードのソースワードと翻訳を編集します。いくつかのフラッシュカードを追加します。
• アプリケーションを読み取りモードに切り替えます。
• 最後に...ページを更新します。

何？ ！データはどこに行きましたか？ Mavoはそれを保存すべきではありませんか？どうしたの？

実際、私たちはデータを保存するかどうかをMavoに決して伝えませんでした！

これを行うには、 mv-storageプロパティを使用する必要があります。どんな選択肢がありますか？まあ、Mavoは私たちに大きな可能性を開き、Mavoプラグインはさらに多くの可能性を開きます！

アプリケーションでは、データをブラウザのLocalStorageに保存します。これは最も簡単なオプションの1つであるため、最初のMavoアプリケーションに最適です。要素上の値local値（ Mavo Rootとも呼ばれます）を使用してmv-storage mv-appを追加する必要があります。

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

Mavoツールバーをご覧ください。何かに気づきましたか？別のボタンが表示されます -保存ボタン。

アプリケーションデータをもう一度編集してみてください。保存ボタンが強調表示されることに注意してください。保存ボタンとMavoの上にホバリングすると、救済されていないデータを使用してプロパティを強調表示します。かっこいいですか？

[保存]ボタンをクリックしてページを更新します（ページを更新する前に読み取りモードに切り替える必要はありません）。あなたのデータはまだそこにありますか？とても良い！私たちは目標に一歩近づいています - 完全に機能するフラッシュカードアプリケーション。

mv-autosaveプロパティ

データを保存する必要があるたびに、 [保存]ボタンをクリックする必要がありますか？これはより安全であり、貴重なデータが損傷するのを防ぐことができますが、多くの場合、不便な場合があります。データを自動的に保存できますか？確かに！データを変更するたびに自動的に保存するために、MVOルート要素のmv-autosaveプロパティを使用できます。その値は、スロットリングによって保存される秒数です。アプリケーションのルート要素にmv-autosave="3"を追加しましょう。

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

mv-autosave="3"の場合、Mavoはせいぜい3秒に1回しか保存できません。これは、洪水を防ぐために履歴（ GitHub 、 Dropboxなど）を変更するバックエンドにとって特に役立ちます。

スロットリングを無効にしてすぐに保存するには、 mv-autosave="0"を使用するか、 mv-autosaveを使用して、UIから保存ボタンも削除します（この場合は役に立たないため）。

データをもう一度変更して、保存ボタンを表示します。見たことがありますか？最初は強調表示されましたが、3秒後には強調表示されませんでした。これで、すべてのデータが自動的に保存されました！

だから今、私たちのアプリケーションの主要な部分は次のようになります：

<main mv-app="flashcards" mv-autosave="3" mv-storage="local"><p property="source">単語やフレーズ</p>
        <p property="translation">翻訳する</p>
      </main>

アプリケーションのアルファバージョンをほぼ完了しました。今、アプリを改善するのはあなたの番です。心配しないでください、あなたはあなたが必要とするすべての知識を持っています。

アプリケーションを強化して、フラッシュカードをエンドユーザーがさまざまなトピックに関連するさまざまなグループに整理できるようにすることができます。たとえば、ユーザーはすべての衣類関連のフラッシュカードを1つのグループに収集できます。

？ヒント！

あなたが従うことにしたものに応じて、これを達成するには多くの方法があります。ただし、先に進む前にいくつかの問題について考えることを願っています。

1. どのHTML要素をグループ化要素として使用しますか？ユーザーがフラッシュデッキ（テーマ名）の名前を表示し、グループをタイトルに崩壊させることができる場合は便利です。
2. その要素にどのようなMavoプロパティを追加しますか（もしあれば）？この要素は属性またはコレクションになりますか？
3. エンドユーザーは、新しいトピックを追加し、それらを削除および再配置し、トピックタイトルを変更し、トピック間でフラッシュカードを移動できますか？

グループごとにフラッシュカードを整理するのではなく、代わりにさまざまなトピックに対応するラベルでタグを付けることにした場合、それは問題ありません。タグを使用したソリューションも適しています。練習するには、この方法を完了してみてください。

mv-bar属性

アプリはデータをローカルに保存しているため、デフォルトでは、アプリのユーザーは他のユーザーとカードを共有できません。フラッシュカードをエクスポートして他の人のフラッシュカードをインポートできるようにすると、それは素晴らしいことではないでしょうか？ありがたいことに、これらの機能はすでにMavoで実装されており、アプリに簡単に追加できます！

mv-barプロパティは、ツールバーに表示されるボタン（もしあれば）を制御します。通常、Mavoルート（ mv-app属性を持つ要素）で指定されます。ボタンはIDで表されます（非常に論理的）：編集、インポート、エクスポートなど。

デフォルトのコレクションにいくつかのボタンのみを追加する必要があるため、相対的な構文と呼ばれるものを使用できます。これにより、すべてを明示的にリストせずにボタンをデフォルトコレクションに追加および削除できます。 mv-bar属性の値をwithキーワードから始める必要があります。

これを行うことで、次のことを取得します。

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

これらの機能を試してください：フラッシュカードを追加して、ファイルにエクスポートしてみてください。次に、既存のフラッシュカードを削除し、以前にエクスポートしたファイルからフラッシュカードをインポートします。

式とmavoscript

次に、フラッシュカードの数など、いくつかの統計をアプリに追加しましょう！面白そうですか？そうだといい。 ？

これを行うには、Mavoについて新しいことを学ぶ必要があります。

このような正方形のブラケットにその名前を入れることにより、 Mavoアプリケーションのどこにでも定義するプロパティの値を動的に参照できます。 [propertyName] 。ここに、物事を動的に計算し、それらが変化したときに反応することができる単純な表現の例を示します。

Mavoの式構文はMavoScriptと呼ばれます。これは、スプレッドシートの式に似ており、計算やその他の操作（数字、テキスト、リストなどを使用）を実行できますが、ネストされた関係を読みやすく適応させるように設計されています。ドキュメントでMavo式とMavoScriptの詳細については、詳細をご覧ください。

それでは、試してみて、FlashCard属性の内部に[source]式を追加します。たとえば、ソースと翻訳の2つのプロパティの間に追加します。

 ...
  <p property="source">単語やフレーズ</p>
  [ソース]
  <p property="translation">翻訳する</p>
...

アプリケーションで何が変更されましたか？ Flashcardソース属性の値がページに2回表示されるようになりました。

編集モードに切り替えて、ソース属性の値を変更してみてください。見たことがありますか？属性値を変更すると、ページコンテンツが更新されます！これが、MavoがレスポンシブWebアプリケーションを開発できるようにする前に言った理由です。

これは本当にクールですが、残念ながら、私たちの場合、それはあまり機能しません。この式を使用してフラッシュカードの数を計算することはできません。常に1つの値しかありません。

[source]式をフラッシュカード属性の外に配置するとどうなりますか？以下を取得します。

 ...
  [ソース]

    ...

...

これは以前のケースとどう違うのですか？違いを確認するには、そうしていない場合は、フラッシュカードを追加します。現在、私たちは価値ではなく、値のコンマ分離されたリストです。すべてのフラッシュカードのソースプロパティです。これはまさに私たちが常に探しているものです。リスト内のアイテムの数は、アプリのフラッシュカードの数に対応しています。

それは理にかなっていますか？はい、しかし、ソース属性の値の数ではなくフラッシュカードの数を計算する場合、それはもっと論理的ではないでしょうか？結局のところ、追加のフラッシュカードは、そのソースまたは翻訳に記入する前でさえ存在します。次のことをお勧めします。 [source]式を[flashcard]に置き換えましょう。

 ...
  [フラッシュカード]

    ...

...

違いに気づきましたか？リストはまだありますが、その値は単純な値ではなく、オブジェクト、つまり各フラッシュカードに関連付けられたすべてのデータを含む複雑な値です。良いニュースは、これらのオブジェクトの数がフラッシュカードの数に等しいことです。これは、各フラッシュカードに完全に空であっても、フラッシュカードがあるからです。それでは、フラッシュカードごとにオブジェクトがありますが、どのように計算して合計を表示しますか？

次に、MavoScript関数に精通し、フラッシュカードの数を計算できる関数を見つけましょう。フラッシュカードリストがあることを忘れないでください。そのため、リスト内のアイテムの数を計算できる関数を見つける必要があります。それはここにあります - これはcount()関数がそれを行う方法です！

しかし、式で関数をどのように使用しますか？どのようなルールに注意を払う必要がありますか？はい、いくつかあります：

1. 式は正方形の括弧で表されます。
2. ブラケットをネストしないでください。

count()関数を使用して、フラッシュカードの数を計算してみましょう。

 ...
[count（flashcard）]

  ...

...

それがまさに私たちが望んでいることです - 今、私たちのアプリにいくつかの統計があります！かっこいいですか？

あなたがウォームアップされ、Mavoを試し続ける準備ができていることを願っています。

アプリケーションを改善して、アプリケーション内のフラッシュカードの総数に関する統計を表示するだけでなく、各トピックのフラッシュカードの数に関する統計も表示されます。

？ヒント！
特定の基準に基づいてリストをフィルタリングしたいですか？オペレーターが役立つwhere 。

自己評価機能

複数のフラッシュカードを作成、編集、保存できるアプリケーションが既にあります。しかし、学んだフラッシュカードとどのフラッシュカードがより多くの練習を必要とするかをどのように追跡するのでしょうか？立派なフラッシュカードアプリケーションには、自己評価機能が必要です。どのように追加するかを見てみましょう！

アプリケーションには、自己評価用の2つのボタンがあるとします：貧しくて良いです。エンドユーザーがボタンをクリックするたびに何が起こりたいですか？まあ、このアイデアは簡単です：

• [貧しい]ボタンをクリックすると、ユーザーがまだ単語を学習していないことを示し、アプリを起動した後にできるだけ早く表示できるように、アプリをリストの先頭に移動させてほしい。
• [OK]ボタンをクリックすると、ユーザーが単語を学習したことを示し、対応するフラッシュカードをリストの最後に移動して、まだ学習していない他のフラッシュカードを使用できるようにする必要があります。

「JavaScriptなしでこれができると確信していますか？」あなたは尋ねるかもしれません。はい！ Mavoは非常に強力で、必要なすべてのツールを提供できます！

実装するものがわかったので、最初にUIをセットアップして、次のステップに進みましょう。私たちのタグは次のようになります：

 ...

  ...
  <h2 id="自分を評価してください">自分を評価してください</h2>
    <button>違い</button>
    <button>良い</button>


...

mv-action属性

Mavo操作により、ユーザーが対話するときにカスタム方法でデータを変更する独自のコントロールを作成できます。有望に聞こえますよね？

カスタムアクションを定義するには、MAVOアプリケーション内の対応する要素でmv-action属性を使用する必要があります。これは、要素がクリックされるたびに実行されます。これはまさに私たちが常に探しているものです。

のために<form>要素、カスタムアクションは、フォーム<em>の送信</em>時に実行されます。 <code>mv-actionプロパティの値は式です。 add() 、 set() 、 move() 、 delete()などのデータ操作を促進するために、mavoscriptによって提供される任意の式関数と構文を使用できます。反応的な方法で計算される通常の式とは異なり、これらの式は操作がトリガーされるたびに計算されることに注意することが重要です。

Mavoはmv-actionプロパティの値が式になると予想しているため、括弧内に囲む必要はありません： mv-action="expression" 。さらに、それらを含めると、それらは表現の一部として扱われます。

したがって、コレクション内のフラッシュカードを移動する必要があり、Mavoにはこれを実行できる適切な関数がありますmove()関数。その最初のパラメーターは、私たちが移動しているアイテムを指し、2番目のパラメーターはコレクションの位置です。コレクションの要素は0から始まることを忘れないでください。

move関数（およびそのバリエーション）とカスタムアクションの詳細については、ドキュメントを参照してください。

前述のアウトラインの最初のポイントを実装しましょう。自己評価中に、エンドユーザーが「貧しい」ボタンをクリックし、対応するフラッシュカードはセットの先頭に移動します。これは最初のものです。したがって、コードには次のようになります。

 ...

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

...

mv-actionプロパティでは、現在のフラッシュカードを処理するため、属性内のフラッシュカード属性を参照することに注意してください。

アウトラインの2番目のポイントを実装しようとすると、問題に直面します。正確に問題は何ですか？

エンドユーザーが「OK」ボタンをクリックすると、対応するフラッシュカードがコレクションの最後に移動することを思い出してください。これは最後のものです。フラッシュカードがセットの最後になるためには、セット内のアイテムの数を知る必要があります。

ありがたいことに、私たちは以前にこのタスクを解決し、対応する機能を実装しました。しかし、このソリューションを使用して現在の問題を解決できますか？残念ながら、私たちはすでに知っているように、フラッシュカードのプロパティの外側のフラッシュカードのコレクション（およびそのサイズを評価）のみを参照することができます。しかし、私たちの場合、私たちはそれを行う必要があります。フラッシュカード属性内の「良い」ボタンの式を書く必要があります。

それで、私たちは何をすべきですか？尋ねてよかったです。 Mavoには解決策があります。

メタ要素を使用して中間値を保存します

したがって、一方では、 [count(flashcards)]式がフラッシュカードのプロパティを外部的に評価する際にフラッシュカードの数が得られることを知っています。一方、値フラッシュカード属性を使用する必要があります。

このパズルを解決するには、フラッシュカードプロパティ内で正確にするために、アプリケーションの他の場所で使用できるように、コード内のフラッシュカードの数を評価し、何らかの方法で結果を保存する必要があります。この場合、Mavoには、いわゆる計算特性があります。

中間結果を保存して参照できるようにするには、コードにHTML要素が必要です。この目的のために使用することをお勧めします<meta>以下に示すように、要素：<meta content="[expression]" property="propertyName"> 。この要素を使用する利点は、意味的に、視覚的に編集モードの外側に隠されていることです。

計算されたプロパティはデフォルトで保存されていないことを忘れないでください。

次に、アプリケーションにflashcardCount Computedプロパティを追加しましょう。 FlashCard属性の外に置く必要がありますが、どこからでも参照できます。

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

...

自己評価関数の実装を完了するための1つのステップのみがあります。エンドユーザーが「OK」ボタンをクリックすると、対応するフラッシュカードがセットの最後に移動され、最後のセットになります。アプリケーションのコードに関連するアクションを追加しましょう。

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

...

終わった！おめでとう！ ？

このタスクを解決する別の方法があります。 $all特別な属性の助けを借りて。 $all属性がコレクション内にある場合、コレクション自体を表します。したがって、この場合、計算されたプロパティは必要ありません。ソリューションを自分で実装してみてください。

修正する必要がある最後のものは1つだけです。アプリにいくつかの統計を追加した部分を覚えていますか？アプリケーションのフラッシュカードの数を評価するために構築した表現を覚えています： [count(flashcard)] ？代わりに、定義した計算されたプロパティを使用（および使用する必要があります）。アプリケーションに対応する変更を行います。

結論は

それで、私たちはこれまでに何を学びましたか？レビューしましょう。静的HTMLページをMavoアプリケーションに変換するには、次のことが必要です。

1. ページ上部分的にMavo JavaScriptおよびCSSファイルが含まれています。
2. mv-app属性をMavoルート要素に追加します。
3. property属性を追加することにより、アプリケーションのどの要素が重要であるかをMavoに伝えます。
4. コピーされてコレクションに変換される要素にmv-multiple属性を配置します。
5. MVOルートにmv-storage属性を追加して、データを保存する場所をMavoに伝えます。
6. Mavoがデータを自動的に保存するかどうかを決定します。その場合、 mv-autosaveプロパティをMavoルートに追加します。私たちも知っています：
7. Mavoツールバーは完全にカスタマイズ可能です。 mv-barプロパティは、どのボタンが表示されるかを制御します。
8. 式を使用すると、属性の現在の値を他の要素に表示し、計算を実行できます。式の値（およびタイプ）は、式がコードのどこにあるかに依存します。 Mavoの式構文はMavoScriptと呼ばれます。
9. カスタムアクションにより、カスタム方法でデータを変更するコントロールを作成できます。 Mavoアプリケーション内の対応する要素に関するカスタムアクションを定義するには、 mv-actionプロパティを設定します。
10. 式の値を持つ属性は、計算された属性と呼ばれます。アプリケーションの他の場所で参照できるように中間結果を保存するには、使用することをお勧めします<meta>要素。

ポストスクリプト

そこで、アプリケーションを構築しました。完璧ですか？もちろんそうではありません、完璧なものはありません！改善することがたくさんあり、追加する機能がたくさんあります（Mavoの助けを借りてアプリを多言語化することもできます！）。先に進んでさらに強化し、何か新しいことを試してみることをheしないでください！

これまでのところ、Mavoの知識は氷山の一角にすぎません。さらに多くのことがあります。ドキュメントを注意深く読んだり、例を確認したり（MavoのWebサイト、またはCodepen：Lea Verouが作成し、自分で作ったもの）を確認し、新しいコンテンツを作成することをお勧めします。幸運を！ ？

謝辞

二人の偉大な人々に感謝したいと思います。まず第一に、このチュートリアルを書く（そしてそれを実装するのを手伝ってくれる）ことを促してくれただけでなく、ウェブ開発の世界をより良い場所にするように私を鼓舞してくれたLea Verouに感謝したいと思います。私はそんなに才能のある人を見たことがなく、彼女と何かをする機会ができてうれしいです！

ジェームズ・ムーアにも感謝します。 Udemyの「JavaScript Functionalプログラミング」コースで彼が使用した例は、Flashcard Learningアプリケーションの独自のバージョンを作成するように促されました。彼は素晴らしい先生です！

以上がインタラクティブなWebアプリケーションの構築でMavoを照らしましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。