💆🏾 👨🏾‍🤝‍👨🏻 🍜 Vue.jsでクイズを作成する ✋🏽 ✖️ 🤳

Vue.js

私はAngularを理解していません。私はReactが本当に好きですが、まだその基礎を学んでいます。 Vueを試してみましょう。マイクロクイズをどのようにしたかを説明します。

初期化

HTML

最初に小さなHTMLスケルトンを作成し、Vueにプラグインします。

<html> <body> <!-- Vue    div- --> <div id="app"> <!--  data.title  Vue   --> <h1>{{ title }}</h1> </div> <!--   Vue --> <script src="https://vuejs.org/js/vue.js"></script> <!--     Vue --> <script> window.onload=function(){ new Vue({ el: '#app', // Vue    div- (  4) data: { title: 'Hello.' }, // title    'Hello.' }); } </script> </body>

foo.htmlとして保存し、ブラウザで開きます。 Helloが表示されます。 、-これはすべてが機能することを意味します。 Moustache構文を使用してデータを表示する方法を学習しました： {{title}}

データ

次に、簡単なクイズオブジェクトを作成し、Vueインスタンスデータに追加します。

 <script> window.onload=function(){ //       . //              . var quiz = { title: ' ', questions: [ { text: " 1", responses: [ {text: ',  .'}, {text: '!', correct: true}, ] }, { text: " 2", responses: [ {text: ' ', correct: true}, {text: ' '}, ] } ] }; new Vue({ el: '#app', data: { quiz: quiz }, //      Vue }); } </script>

これがクイズです。次のステップは、Vueループを使用して表示することです。

HTMLデータマッピング

Vueは、HTML要素にv-for = "item on items"属性を追加することにより、宣言的なループシステムを提供します。

 <div id="app"> <!--   --> <h1>{{ quiz.title }}</h1> <!-- :  div    --> <div v-for="question in quiz.questions"> <h2>{{ question.text }}</h2> <!-- :  li  -     --> <ol> <li v-for="response in question.responses"> <label> <input type="radio"> {{response.text}} </label> </li> </ol> </div> </div>

Vueには目立たないジェットシステムがあります。データオブジェクトが変更されると、HTML表示が更新されます。クイズは完全に準備ができており、活発で反応的です。

これまでのところ、すべての質問は1ページに表示されています。クイズを変更して、ページごとに1つの質問のみを表示します。これを行うには、各質問に「次へ」および「前へ」ボタンを追加し、現在ではないすべての質問を非表示にする必要があります。

Vueインスタンス：ナビゲーションメソッド

作成したアプリケーションは、ユーザー入力を処理する必要があります：ボタンクリック。まず、現在の質問インデックスフィールドと2つのナビゲーションメソッドをVueインスタンスに追加します。

 new Vue({ el: '#app', data: { quiz: quiz, //     questionIndex: 0, }, //       methods: { //     next: function() { this.questionIndex++; }, //     prev: function() { this.questionIndex--; } } });

questionIndexフィールドはnext（）で増加し、 prev（）で減少します

HTML：ナビゲーションボタン

v-onディレクティブでボタンを作成します：click = "next"で next（）メソッドを呼び出します。質問コンテナにv-show = "index === questionIndex"を追加して、現在の質問のみを表示します（ v-forディレクティブにindexパラメーターを追加することを忘れないでください）。

 <div id="app"> <h1>{{ quiz.title }}</h1> <!--        --> <div v-for="(question, index) in quiz.questions"> <!--   ,        --> <div v-show="index === questionIndex"> <h2>{{ question.text }}</h2> <ol> <li v-for="response in question.responses"> <label> <input type="radio"> {{response.text}} </label> </li> </ol> <!--   --> <!-- :  ""       --> <button v-if="questionIndex > 0" v-on:click="prev">  </button> <button v-on:click="next">  </button> </div> </div> </div>

これで、クイズ内を移動できます。最後のページは空白です。そのページには、クイズの結果を表示する必要があります。

クイズ結果

クイズの結果を表示するには、各質問に対するカスタム回答を処理する必要があります。それは私にとって最も難しいステップでした。

ユーザー応答処理

現在、クイズのラジオボタンはVueに関連付けられていません。ラジオボタンをクリックしても効果はありません。 v-modelディレクティブは、フォーム入力とアプリケーション状態の間に双方向の関係を作成します。以前に作成したラジオボタンを置き換えます。

 <!--      --> <li v-for="response in question.responses"> <label> <!-- -  3   --> <!-- v-bind:value  "value"   "true"    --> <!-- v-bind:name  "name"          --> <!-- v-model    userResponses --> <input type="radio" v-bind:value="response.correct" v-bind:name="index" v-model="userResponses[index]"> {{response.text}} </label> </li>

名前と値の属性はVueデータにバインドされます。次に、VueインスタンスでuserResponsesを初期化します。

 new Vue({ el: '#app', data: { quiz: quiz, questionIndex: 0, //     "false"    //  : "     n?" "". userResponses: Array(quiz.questions.length).fill(false) }, methods: { // ... } });

これは、ユーザーの応答を処理する最後の手順でした。userResponsesには、 「答えが正しければtrue」のライブ配列が含まれます。前後に移動したり、応答を選択および変更したり、 userResponsesの更新を確認したりできます。

請求書の表示

最終的なアカウントは、 userResponsesの 「true」値の合計です。 Vueアプリケーションでメソッドを作成して、このスコアを計算します。

 new Vue({ // ... methods: { // ... //   "true"  userResponses score: function() { return this.userResponses.filter(function(val) { return val }).length; } } });

次に、クイズの概要ページに合計スコアを追加します。

 <div id="app"> <h1>{{ quiz.title }}</h1> <div v-for="(question, index) in quiz.questions"> <!-- //... --> </div> <!--  ,  ,   --> <div v-show="questionIndex === quiz.questions.length"> <h2>   </h2> <p> : {{ score() }} / {{ quiz.questions.length }} </p> </div> </div>

それだけです、クイズは動作します。あなたはそれを試すか、コードをダウンロードすることができます。

あとがき

私のjavascriptスキルは少し不自由で、Vueを始めたばかりです。彼と一緒に仕事を始めるのがどれほど簡単かを感じたかったのです。気軽に私を批判してください。

Vue.jsでクイズを作成する

初期化