オンラインコースのビデオ接続：https : //www.bilibili.com/video/BV15741177Eh?p=40
まず、新しいショッピングカートプロジェクトフォルダーを作成し、次に3つのファイル、つまりindex.html、main.js、style.cssを作成しました。
関数はその名前と同じです。ここで、メインスタイルとVueパッケージをインデックスファイルに導入します。
<link rel = "stylesheet" href = "style.css"> <script src = "../ node_modules / vue / dist / vue.js"> </ script> <script src = "main.js"> </スクリプト>
教師のリンクはヘッドタグに配置されます。
まず、<table>タグはHTMLテーブルを定義し、<thead>タグはテーブルヘッダーを定義します。<tr>タグには<tr>タグが必要です。<tr>タグは、テーブルの行を表します。これには、次が含まれます。テーブルヘッダーセルにはテーブルヘッダーが含まれます情報（th要素で作成）、標準セルにはデータ（td要素で作成）が含まれます。このラベルを使用して、ショッピングカートを描画します。
<table>
<thread>
<tr>
<th> </ th>
<th>書籍名</ th>
<th>発行日</ th>
<th>価格</ th>
<th>購入数量</ th >
<th>オペレーション</ th>
</ tr>
</ thread>
</ table>
次に、CSSでスタイルを定義します。合格：ラベル名{style 1; style 2;}このフォーマットはスタイルで書かれています。
書籍のデータを一時的にデータに保存し、vueインスタンスのコードもmain.jsファイルに記述します。本の情報を表示するには、v-forを使用してトラバースする必要があるため、本のitemを<tbody>タグで使用し、子のtdタグで{{item.id}}の形式で表示します。
効果が出ますが、スタイルが出ない場合はキャッシュを削除してください。
価格に人民元の記号を表示し、小数点以下2桁を維持するために、フィルターの機能を導入します。フィルター効果は関数に類似しており、フィルター効果は定義により達成されます。
filters：{
showPrice（price）{
price = parseFloat（price）
return '￥' + price.toFixed（2）
}
}
実際、ここでtoFixedに直接書き込むことができます。ここでエラーを報告した場合、エラーなしで変換できます。間違った場所にもフィルターを使用したため、文字列がフィルターされました。
ここでフィルターを定義したら、前のコードの{{item.price | showPrice}}でこのフィルターを使用します。
ビンゴ、フィルター効果が有効になります。
次に、購入数量の関数を開始します。左側のプラス記号はインクリメント関数にバインドされ、右側はデクリメント関数にバインドされています。
メソッド：{
increment（index）{
this.books [index] .count + = 1
}、
decrement（index）{
if（this.books [index] .count> 0）
this.books [index] .count- = 1
}
}、
ここでは、デクリメントにより、ショッピングカート内の本が負の数に減らないようにするロジックが追加されます。教師は別の方法を使用します。ボタンにVバインドを追加します：disable = "item.count <= 1"無効にしないと、ボタンにバインドされ、ボタンをクリックできません。次に、タブ全体をdivに配置します。divはv-ifを使用して、ショッピングカートに書籍があるかどうかを確認できます。すべての書籍が削除されると、下のh2タグのv-elseがトリガーされ、ショッピングカートが何か。
最後に、合計金額、合計金額を表示します。
計算済み：{
totalPrice（）{
let totalPrice = 0
for（let i = 0; i <this.books.length; i ++）{
totalPrice + = this.books [i] .price * this.books [i] .count
}
totalPrice
}
}を返します、
当然、計算属性に書かれているので、合計金額が合計金額の直後に出て、名前は名詞の形になります。
成功しました。
let newnums = nums.filter（function（n）{return true}）
これはフィルター関数の使用です。フィルターの関数値がtrueの場合、numsの値は新しい配列にインストールされ、numsの特別な単位をフィルターで除外できます。
let newnums = nums.map（function（n）{return 100}）
これはマップ関数の使用です。マップは配列内のすべての要素を関数に渡し、戻り値を受け入れます。その結果、nums内のすべての要素が100になりました。
次に、vモデルについて話しましょう。
vモデルは、要素のバインドに使用されるWeibangタッチとも呼ばれます。
<input type = "text" v-model = "message">
{{message}}
このようにして、v-modelのバインディングが単純に実現され、入力の内容がメッセージにバインドされ、入力されたメッセージがそのままになります。v-bind：値を使用する場合、メッセージの値は入力ボックスに表示されますが、ボックスの内容を変更してもメッセージは変更されません。v-on：input = "Function name"は、ユーザー入力イベントをリッスンするために使用できます。どのようにしてvモデルの機能を実現しますか？
<input type = "text" v-model = "message" v-on：input = "valueChange">
valueChangeは次のようになります。
valueChange（event）{
this.message = event.target.value
}
ここで、イベントは上記のパラメーターを渡す必要はありません。イベントのターゲットの値は、キーボードでの各入力後のストリング値全体です。まとめると、これらはvモデルの関数と同等です。
私たちはvモデルの使用を研究しています：最初に性別を示すラジオを作成します：
<label for = "male">
<input type = "radio" id = "male" name = "sex">男
</ label>
<label for = "female">
<input type = "radio" id = "female "name =" sex ">女
</ label>
ここで、名前に同じ値を指定しない場合は、男性または女性のいずれかを選択できます。指定した後は、1つの項目しか選択できません。これはフォームです。
<h1> {{sex}} </ h1>
<label for = "male">
<input type = "radio" id = "male" value = "男" v-model = "sex">男
</ label>
<label for = "female">
<input type = "radio" id = "female" value = "女" v-model = "sex">女
</ label>
このように、男性をクリックすると、データ内の性変数の内容は男性であり、女性は女性です。ここで注意する必要があるのは、名前も省略され、vモデルにバインドされた同じ変数はデフォルトで相互に排他的なコンテンツになり、名前を記述する必要がないことです。
v-modelとcheboxの使用：
<label for = "">
<input type = "checkbox" id = "agree" v-model = "isAgree">同意协议
<button：disabled = "！isAgree">下一步</ button>
</ label>
ここのチェックボックスは、isAgreeブール変数をv-modelにバインドすることに同意します。ユーザーがこのチェックボックスを選択すると、ボタンの無効化属性がtrueのときにisAgreeの反対の値にもバインドされるため、ボタンをクリックできます。無効がfalseのときにクリックします。チェックボックスのチェックボックスは次のとおりです。
<label for = "">
爱好{{hobbies}}
<input type = "checkbox" value = "唱" v-model = "hobbies">唱
<input type = "checkbox" value = "跳" v-model = "hobbies">跳
<input type = "checkbox" value = "rap" v-model
= "hobbies" >ラップ<input type = "checkbox" value = "篮球" v-model = "hobbies">篮球
</ label >
ここでvモデルにバインドされている趣味は配列です。趣味を選択するたびに趣味の値を追加し、趣味配列の値の選択を解除します。
v-modelの選択は以下を使用します：
選択は、単一選択と複数選択に分かれています。
<select name = "abc" id = "" v-model = "fruit">
<option value = "apple"> apple </ option>
<option value = "banana"> banana </ option>
<option value = "ドリアン ">ドリアン</ option>
<option value =" Grape "> Grape </ option>
<option value =" Peach "> Peach </ option>
</ select>
<h1>選択しました{{fruit}} < / h1>
vモデルのバインド後、単一選択のバインド効果を完了することができます。
複数選択には複数追加が必要です
<select name = "abc" id = "" v-model = "fruits" multiple>
ここで果物はまだ配列です、効果：
果物やその他のタイプの記述をこのように記述する必要はありません。タイプを配列に入れ、v-forを使用して生成をトラバースする方がより正確です。一般的に使用される書き込み方法：
<label v-for = "item in items">
<input type = "text"：value = "item" v-model = "hobbies"> {{item}}
vモデル修飾子の使用：
怠惰な
<input type = "text" v-model.lazy = "message">
<h1> {{message}} </ h1>
レイジーを選択すると、vモデルにバインドされた変数が頻繁に更新されなくなります。ユーザーが入力を完了するまで待ってからEnterキーを押すか、別の領域をクリックしてこの変数を更新してください。
<input type = "number" v-model.lazy = "message">
<h1> {{message}} </ h1>
したがって、数値タイプのみを入力できます
トリム
また、v-model.trimでも使用され、前後に入力されたスペースを削除できます。