Vue の概要

Vue は、ユーザーインターフェイスを構築するための進歩的なフレームワークであり、他の大規模なフレームワークとは異なり、ボトムアップでレイヤーごとに適用されるように設計されています。Vue のコアライブラリはビューレイヤーのみに焦点を当てており、使いやすいだけでなく、サードパーティのライブラリや既存のプロジェクトとの統合も簡単です。

Vue の機能
1. MVVM パターンに従う

2. コーディングが簡単、サイズが小さく、操作効率が高く、モバイル/PC開発に最適

3. UI 自体にのみ焦点を当てており、他のサードパーティライブラリ開発プロジェクトも紹介できます。

3. Vue el:mountの基本的な使い方

データ: モデルデータ

メッセージ: データ

vueの基本的な使い方

</head>

<本文>

<div id="アプリ">

<p>{ {msg}}</p>

</div>

<div id="追加">

<p>{ {msg}}</p>

</div>

>

<script src="./vue.js"></script>

<スクリプト>

//vueをインスタンス化する

新しいビュー({

アプリ'、

データ：{

メッセージ:「xxx」

}

})

</script>

</body>

</html>

Vショーの使用

</head>

<本文>

<div id="アプリ">

<div v-show="money>=1000"> 鍋を食べる</div>

<div v-show="money>=2000">ハイディラオ</div>

<div v-show="money>=500">饭</div>

<div v-show="money<500">滚</div>

<時間>



<div v-show="age>=18">バー</div>

<div v-show="age<18">ゴミを拾う</div>

</div>

<script src="./vue.js"></script>

<スクリプト>

新しいビュー({

アプリ'、

データ：{

お金:1500、

年齢:25

}

})

</script>

</body>

<本文>



<div id="アプリ">

<div v-show="display">私は v-show によって制御されています</div>

<div v-if="display">私は v-if に支配されています</div>

</div>

<script src="./vue.js"></script>

<スクリプト>

新しいビュー({

アプリ'、

データ：{

ディスプレイ:画面

}

})

</script>



</body>

</html>

ヴオン

</head>

<本文>

<div id ="アプリ">

<button v-on:click="fn1">クリックしてください</button>

<button v-on:dblclick="fn2">666</button>

<button v-on:mouseenter="fn3">咦~</button>

</div>

<script src ="./vue.js"></script>

<スクリプト>

新しいビュー({

アプリ'、

//vueのどこにメソッドを置くか

メソッド:{

fn1(){

アラート('なぜ')

}、

fn2(){/

アラート('どうしたの')

}、

fn3(){

アラート('死ぬほど退屈')

}、

}

})

</script>

</body>

</html>

v モデル

<本文>

<div id="アプリ">

<input type="text" v-model="msg">

<p>{ {msg}}</p>

<select v-model="フルーツ">

<option value="apple">苹果</option>

<option value="orange">橘子</option>

<option value="banana">香蕉</option>

</選択>

<input type="checkbox" v-model="chk">

</div>

<script src="./vue.js"></script>

<スクリプト>

新しいビュー({

アプリ'、

データ：{

メッセージ:''、

フルーツ：''、

確認: チュア

}

})

</script>

</body>

</html>

v-if

<本文>

<div id="アプリ">

<div v-if="money>=1000"> 鍋を食べる</div>

<div v-else-if="money>=2000">ハイディラオ</div>

<div v-else-if="money>=500">饭</div>

<div v-else>滚</div>

<時間>



<div v-if="age>=18">酒吧</div>

<div v-else>ゴミを拾う</div>

</div>

<script src="./vue.js"></script>

<スクリプト>

新しいビュー({

アプリ'、

データ：{

お金:1500、

年齢:25

}

})

</script>

</body>

</html>

v-for におけるキーの役割

<本文>

<div id="アプリ">

<button @click="list.splice(1,0,{id:4,name:'yy'})">追加</button>

<ul>

<li v-for="リスト内の項目":key="項目.index">

<input type="チェックボックス">

<span>{ {item.name}}</span>

</li>

</ul>



</div>

<script src="./vue.js"></script>

<スクリプト>

新しいビュー({

アプリ'、

データ：{

リスト：[

{id:1,name:'ww'},

{id:2、名前:'rr'}、

{id:3、名前:'tt'}、

】

}

})

</script>

</body>

</html>

v-for は配列を反復処理します

<本文>





<div id="アプリ">

<button @click="add">最後に要素を追加します</button>

<ul>





<li v-for="(item,index) リスト内">{ {index}}-{ {item}}</li>

</ul>

</div>

<script src="./vue.js"></script>

<スクリプト>

新しいビュー({

アプリ'、

データ：{

リスト:['aa','ss','dd','ff']

}、

メソッド:{

追加（）{

this.list.push('aa')

}

}

})

</script>

</body>

</html>

v-for は数値を反復します

<本文>

<div id="アプリ">

<ul>



<li v-for="99 の番号">{ {番号}}</li>

</ul>

</div>

<script src="./vue.js"></script>

<スクリプト>

新しいビュー({

アプリ'

})

</script>

</body>

</html>

v-for はオブジェクトを走査します

<本文>



<div id="アプリ">

<ul>



<li v-for="obj 内の項目"> { {item}}</li>

<時間>





<li v-for="(val,key) in obj">{ {val}}-{ {key}}</li>

</ul>

</div>

<script src="./vue.js"></script>

<スクリプト>

新しいビュー({

アプリ'、

データ：{

オブジェクト:{

名前：「シャオファン」、

年齢:「88」、

sex:'男'

}

}

})

</script>

</body>

</html>

vバインド

<本文>



<div id="アプリ">

<a href="http://www.baidu.com">ジャンプ</a>

<a v-bind:href="url">ジャンプ</a>

<button @click="change" target="_blank">跳转</button>

</div>

<script src="./vue.js"></script>

<スクリプト>

新しいビュー({

アプリ'、

データ：{

URL:「http://www.taobao.com」

}、

メソッド:{

変化（）{

this.url='http://www.mi.com'

}

}

})

</script>

</body>

</html>

クッキー

イベントオブジェクト

<本文>

<div id="アプリ">

<button @click="click">单击</button>

<button @dblclick="dblclick">双击</button>

<input type="text" placeholder="内容" @blur="blurText" @focus="focusText" @keydown="keydownText" @keyup="keyupText" @input="inputText">

</div>

<script src="./vue.js"></script>

<スクリプト>

// ロードイベント: ページ全体がロードされた後にトリガーされます

// window.onload = function(){

//alert("ページの読み込みが完了しました")

// }

新しいビュー({

アプリ'、

メソッド:{

クリック（）{

alert('シャオルーの恋愛脳');

}、

dblclick(){

alert('シャオファンはシャオゾウが寝ている醜い写真を撮りました');

}、

BlurText(){

console.log("焦点が合っていないぼかしイベント");

}、

focusText(){

console.log("フォーカスイベント取得");

}、

keydownText(){

console.log("鍋");

}、

keyupText(){

console.log("ポット");

}、

入力テキスト（）{

console.log("ok");

}

}

})

</script>

</body>

</html>

ライフサイクル

<本文>

<div id="example">{ {メッセージ}}</div>

<script src="./vue.js"></script>

<スクリプト>

var vm = 新しい Vue({

例'、

データ：{

メッセージ:「一致」

}、

beforeCreate(){

console.log('作成前');

}、

作成した（）{

console.log('cresated');

}、

beforeMount(){

console.log('beforeMount');

}、

マウントされた(){

console.log('マウント済み');

}、

beforeUpdate(){

console.log('更新前');

}、

更新しました（）{

console.log('更新');

// コンポーネントが更新された後、$destroyed 関数を呼び出してコンポーネントを破棄します

//this.$destory();

}、

beforeDestroy(){

console.log('beforeDestroy');

}、

破壊されました（）{

console.log('破壊');

}、

})

</script>

</body>

</html>

為替レートを計算する

<本文>

<div id="アプリ">

<p class="title">為替レート計算ツール</p>

<ul>

<リ>

<span>{ {from.currency}}</span>

<input v-model="from.amount"></input>

</li>

<li v-for="アイテムを次へ" v-bind:data-currency="item.currency" v-on:click="changeCurrency">

<span>{ {item.currency}}</span>

<span>{ {item.amount}}</span>

</li>

</ul>

<p class="intro">マウスをクリックして通貨の種類を切り替えます</p>

</div>

<script src="./vue.js"></script>

<スクリプト>

let rate={

CNY:{CNY:1 、JPY:16.876、HKD:1.1870、USD:0.1526、EUR:0.1294}、

JPY:{CNY:0.0595,JPY:1 ,HKD:0.0702, USD:0.0090, EUR:0.0077 },

HKD:{CNY:0.8463, JPY:14.226,HKD:1, USD:0.1286, EUR:0.10952 },

USD:{CNY:6.5813, JPY:110.62, HKD:7.7759, USD:1, EUR:0.85164 },

ユーロ:{CNY:7.7278、JPY:129.89、HKD:9.1304、USD:1.1742、EUR:1 }、

}

let vm = 新しい Vue({

アプリ'、

データ：{

から:{通貨:'CNY'、金額:100}、

に：[

{通貨:'JPY',金額:0},

{通貨:'HKD',金額:0},

{通貨:'USD'、金額:0}、

{通貨:'EUR',金額:0},

】

}、

メソッド:{

交換(から、金額、まで){

return(amount * rate[from][to]).toFixed(2)

}、

changeCurrency(イベント){

const c = イベント.currentTarget.dataset.currency;

const f = this.from.currency;

this.from.currency= c;

this.to.find(_ => _.currency === c).currency = f;

}

}、

時計：{

から：{

ハンドラー(値){

this.to.forEach(item => {

item.amount = this.exchange(this.from.currency,

この金額、品目、通貨)

});

}、

深い:本当、

即時:真

}

}

})

</script>

</body>

</html>

カウンター

<本文>

<script src="./vue.js"></script>

<div id="アプリ">

<button @click="sub">-</button>

<span v-text="num"></span>

<button @click="add">+</button>

</div>

<スクリプト>

新しいビュー({

el:"#アプリ",

データ：{

番号:1

}、

メソッド:{

サブ:関数(){

if(this.num>0){

this.num--;

}それ以外{

alert("すでに最小");

}

}、

追加:関数(){

if(this.num<20){

this.num++;

}それ以外{

alert("上限に達する")

}

}

}

})

</script>

</body>

</html>

style属性をバインドする

オブジェクトモードでクラス属性をバインドする

<title>ドキュメント</title>

<スタイル>

。箱 {

幅: 300ピクセル;

高さ: 300ピクセル;

境界線: 10 ピクセルの黄緑色の実線。

}

.bg{

背景色: コーンフラワーブルー;

}

</スタイル>

</head>

<本文>

<div id="アプリ">

<button @click="btn">こちら</button>











<div class="box" v-bind:class="{bg:isBg}"></div>

</div>

<script src="../vue.js"></script>

<スクリプト>

新しいビュー({

アプリ'、

データ：{

isBg:true、

フラグ:0

}、

メソッド:{

btn(){

if(this.flag==0){

this.isBg=true

this.flag=1;

}

それ以外{

これは .isBg=false;

this.flag=0;

}

}

}

})

</script>

</body>

</html>

スタイルプロパティをオブジェクトとしてバインドする

<title>ドキュメント</title>

</head>

<本文>

<div id="アプリ">



<div style="color:royalblue ; font-size: 48px;">黄翠瑞はとてもハンサムです</div>



<div v-bind:style="{color:'red',fontSize:'48px'}">Xiao Zhong は恥知らずです</div>





<div v-bind:style="{color:color,fontSize:size}">Xiao Zou は役に立たない</div>

<script src="../vue.js"></script>

<スクリプト>

新しいビュー({

アプリ'、

データ：{

赤色'、

サイズ: '24px'

}

})

</script>

</body>

</html>

計算されたプロパティ

計算されたプロパティの基本構造

<本文>



<スクリプト>

//基本構造

新しいビュー({

彼：''、

//データ

データ：{}、

// メソッド属性

// イベントバインディング、リターンなし、キャッシュなし

メソッド:{}、

// リスナー (構造を尊重)

// 値を返さずに値の変更をリッスンします

時計：{

リッスンするデータ (){}

}、

// 計算されたプロパティ (結果重視)

// リターンが必要で、結果のみが必要で、キャッシュが存在します。

計算された:{

計算されたプロパティ名() {

// 一連の計算の後

操作を処理した後に結果を返す

}

}

})

</script>



</body>

</html>

計算プロパティの基本的な使用法

<本文>

<div id="アプリ">

<p>元の文字列: { { メッセージ }}</p>

<p>反転された文字列を計算します: { {·reverseMessage·}}</p>

<p>元の文字列を小文字に変換します: { { toLowerCase}}</p >

</div>

<script src="../vue.js"></script>

<スクリプト>

新しいビュー({

アプリ'、

データ：{

メッセージ:「ABCDEFG」

}、

計算:{

// 反転した文字列を計算します

reverseMessage:function(){

// split() は文字列を文字列の配列に分割します

// reverse() は配列内の要素の順序を逆にします

// join() は配列内のすべての要素を文字列に変換します

return this.message.split('').reverse().join('')

}、

//元の文字列を小文字に変換します

toLowerCase(){

//substring(from,to) は、文字列内の指定された 2 つの添え字の間の文字を抽出します。

//toLowerCase() は文字列をトランペットに変換するために使用されます

this.message.substring(0,7).toLowerCase を返す

}

}

})

</script>

</body>

</html>

計算されたプロパティの完全な構造

<本文>





<div id="アプリ">

姓:<input type="text" v-model="lastName"> <br><br>

名前:<input type="text" v-model="firstName"> <br><br>

フルネーム: <span>{ { fullNamel}</span> <br><br>

<button @click="btn">計算されたプロパティの値を変更します</button>

</div>



<script src="../vue.js"></script>

<スクリプト>

新しいビュー({

アプリ'、

データ（）{

戻る {

名前:「チュチュ」、

姓:「胡」

}

}、

計算:{

フルネーム： {

// get: 値の取得時にトリガーされます

// 誰かが ful1Name を読み取ると、get が呼び出され、戻り値が fullName の値として使用されます。

得る（）{

this.firstName +'_' +this.lastName を返します。

}、

//set; 値が設定されたときにトリガー

//計算されたプロパティが変更されると、set を呼び出します

セット(値){

console.log('set',value);

const arr = value.split('-')

this.firstName = arr[0]

this.lastName = arr[1]

}

}

}、

メソッド:{

btn(){

this.fullName = '胡英軍'

}

}

})

</script>

</body>

</html>

計算されたプロパティの完全な構造 2

<本文>

<スクリプト>

// 1. 宣言文字列

let str = '宇宙の中心 - 江西ソフトウエア職業技術大学';

let str1 = "宇宙の中心 - 江西ソフトウエア職業技術大学";

let str10 = '宇宙の中心 - 江西ソフトウエア職業技術大学';

// 2. 文字列が文字列内にあるかどうかを判断します

let index1 = str.index0f('宇宙')

console.log(index1);//0

// 3. 文字列をインターセプトします (最初のパラメーター: どの添字でインターセプトを開始するか、2 番目のパラメーター: インターセプトの長さ)。

str2 = str.substr(7,2) とします。

console.log(str2); // 江西省

// 4. 文字列を変更します (最初のパラメータ: 変更する文字列、2 番目のパラメータ: 変更された文字列。

let str3 = str.replace("ユニバース","インターネット")

console.log(str3);// インターネットの中心地 -- 江西ソフトウエア職業技術大学

// 5. 文字列を分割する

str4 = "23" とします

// この関数は配列を返さなければなりません

let array = str4.split(',')

// は区切り文字です。区切り文字が見つかると、文字列から削除され、部分文字列の配列が返されます。

// 区切り文字が見つからないか省略された場合、配列には文字列全体から構成される 1 つの要素が含まれます。

// 区切り文字が空の文字列の場合は、str を文字配列に変換します

console.log(array); //['Scatter', "Lang'," Hey', 'Yo']

// 6. 大文字と小文字の変換 (英語のみ大文字と小文字があり、中国語は存在しません)

console.log('ABCDEF'.toLowerCase());// 小文字の abcdef に変換します

console.log('abcdef'.toUpperCase());// 大文字のABCDEFに変換します

console.log('中国語には大文字と小文字が存在しません'.toLowerCase);

</script>

</body>

</html>

イベント修飾子

イベントメソッド

<div id="アプリ">



<button v-on:click="fn1">クリックしてください</button>



<button v-on:dblclick="fn1">双击666</button>



<button v-on:mouseenter="fn2">私の中に飛び込んでください</button>



<h4>以下は略語です</h4><hr>



<button @click="fn1">クリックしてください</button>



<button @dblclick="fn1">666 をダブルクリック</button>



<button @mouseenter="fn2">私の中に入ってください</button>

</div>

<script src="./vue.js"></script>

<スクリプト>

新しいビュー({

アプリ'、

//Vue のメソッドを配置する場所

メソッド:{

fn1(){

alert('クリックして実行しますか?')

}、

fn2(){

alert('やりますか?')

}

}

})

</script>

</body>

</html>

イベントバブリング

<本文>

<div id="アウター" @click="">

<button @click="click"> クリックしてください </button>

</div>

<スクリプト>

// イベントバブリングとイベントキャプチャは、ページ内のイベントフロー (イベントの順序) の問題を解決するために、それぞれ Microsoft と Netscape によって提案されました。

// イベントのバブリング:

// Microsoft は、イベントバブリングと呼ばれるイベントストリームを提案しました。

// イベントのバブリングは水の中に石を入れることにたとえられ、泡は常に水の底から現れます。

// つまり、イベントは最も内側の要素から開始され、ドキュメントオブジェクトまで上向きに伝播します。

// したがって、イベントバブリングの概念では、ボタン上のクリックイベントの順序は、button→div→body→html→documentとなるはずです。

// イベントキャプチャ:

// Netscape は、イベントキャプチャ (イベントキャプチャ) と呼ばれる別のイベントストリームを提案しました。11 イベントバブリングとは逆に、イベントは最外層から特定の要素まで発生します。

// したがって、イベントキャプチャの概念では、ボタンボタン上でクリックイベントが発生する順序は、document→html→bodv→div→button となるはずです。

// その後、W3C は Netscape と Microsoft の間の戦争を鎮めるために妥協方法を採用し、統一された標準優先のキャプチャとバブリングを策定しました。

</script>

</body>

</html>

イベント修飾子の概要

<本文>





a v-on:click.stop="doThis"></ a>



<ul @click.self="ulclick"></ul>







<form v-on:submit.prevent="onSubmit"></form>



<a v-on:click.stop.prevent="doThat"></ a>



<form v-on:submit.prevent></form>

</body>

</html>

リスナー

リスナーの基本構造

<スクリプト>

// [リスナー]

// 関数: データが変更されたかどうかを監視し、変更があった場合に関数を呼び出すために使用されます。

// 構文: データおよびメソッドと同じレベルでウォッチを作成します。

新しいビュー({

彼：''、

データ：{}、

メソッド:{}、

// リスナー

時計：{

// パラメータ 1: 変更された値。

// パラメータ 2: 変更前の値。

リッスンするデータ (newValue、oldValvue) {

}

}

})

</script>

リスナーのベースは以下に属します

<本文>

<div id="アプリ">

<button @click="msg='hahahahaha'">msg の値を変更します</button>

<p>{ {msg}}</p>

</div>

<script src="./vue.js"> </script>

<スクリプト>

新しいビュー({

アプリ'、

データ：{

msg: 'カクカクカク'

}、

// リスナーをどこに記述するか

時計：{

// データ変更のリスナー

// 基本データ型、これら 2 つのパラメータには意味があります

msg(新しい値,古い値){

// データ変更をリッスンした後、完了する必要がある動作

console.log('データが変更されました', newValue, oldValue);

}

}

})

</script>

</body>

配列でのリスナーの使用

<本文>

<div id="アプリ">

<ul>

<li v-for="リスト内の項目">{ {項目}}</li>

</ul>

<button @click="list.push('Pleasant Goat')">アイテムを追加</button>

</div>

<script src="./vue.js"></script>

<スクリプト>

新しいビュー({

アプリ'、

データ：{

リスト:[「シャオファンはとても役に立たない」、「シャオゾンはたくさんのものを持っている」、「シャオルーの恋愛脳」]

}、

時計：{

list(newValue,oldVaule){

console.log('データが変更されました', newValue, oldVaule,);

}

}

})

</script>

</body>

[配列を聞く]

配列はアプリケーションタイプであり、より複雑なリスニングルールがあります。

理論的には、配列内の要素の値を変更したり、配列に新しい要素を追加したりするなど、配列の内容を変更しても、配列自体のアドレスは変更されません。

このため、Vue.is では、標準の配列操作メソッドを使用して配列に加えられた変更をインターセプトできるように、配列に対して特別な処理が行われています。

1. Vue は次の配列の変更を検出できません。

a. インデックス値を使用して配列を直接設定する場合、例: vm.items[index0fItem] = newValue

b. 配列の長さを変更する場合、例: vm.items.length = newlength

2. 標準的な方法を使用して配列を変更すると、リッスンできるようになります

https://v2.cn.vueis.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80 %E6%B5%8B Push() 最後に追加 Pop() 最後に削除

unshift() ヘッドが追加されました

シフト() 先頭削除

splice() 削除、追加、置換

sort()ソート

reverse() 逆順

(Vue は監視対象の配列の変更メソッドをラップするため、ビューの更新もトリガーします。上記はラップされたメソッドです。) -->

<本文>

<div id="アプリ">

<button @click="list.pop()">アイテムを削除する</button>

<button @click="list.push('Pleasant Goat')">アイテムを追加</button>

<ul>

<li v-for="リスト内の項目">{ {項目}}</li>

</ul>

</div>

<script src="./vue.js"></script>

<スクリプト>

新しいビュー({

アプリ'、

データ：{

リスト:[「シャオファンはとても役に立たない」、「シャオゾンはたくさんのものを持っている」、「シャオルーの恋愛脳」]

}、

時計：{

// 複合データ型。アドレスが変更されていないため、これら 2 つのパラメータは無意味です

// したがって、複合型では、これら 2 つのパラメータの値が同じであるため、これら 2 つのパラメータは通常は書き込まれません。これらが書かれていても、一方のみが書き込まれます。

list(newValue,oldVaule){

console.log('データが変更されました', newValue, oldVaule,);

}

}

})

</script>

</body>

アヤックス

Ajax は、ブラウザがサーバーと対話できるようにする API のセットです。

その役割は、ブラウザがサーバーと対話できるようにすることです。

サーバーにデータを要求してページを部分的に更新する手法です。

AJAX がポストリクエストを送信する

<スクリプト>

// 1. リクエストオブジェクトをインスタンス化する

let xh = 新しい XMLHttpRequest

// 2. open メソッドを呼び出し、リクエストメソッドとリクエストアドレスを渡します

xh.open('post','https://autumnfish.cn/api/user/register')

// 3. リクエストヘッダーを設定します (固定構文、貼り付けるだけ)

xh.setRequestHeader("コンテンツタイプ","application/x-www-form")

// 4. リクエストが成功した後にコールバック関数を設定します。

xh.onload = function(){

// console.log(xhr.response);

let obj = JSON.parse(xhr.response)

コンソール.ログ(obj);

}

// 5. リクエストを送信する

// リクエスト形式: "キー=値"

xh.send('ユーザー名=彭磊')

</script>

</body>

</html>

リクエスト送信パラメータを取得する

<本文>



<スクリプト>

// リクエストオブジェクトをインスタンス化する

let xh = 新しい XMLHttpRequest

// open メソッドを呼び出し、リクエストメソッドとリクエストアドレスを設定します

xh.open('get','https://github.com/AutumnFish/testApi')

// onload メソッドを呼び出し、リクエストの完了後にコールバック関数を設定します

xh.οnlοad=function(){

// console.log(xh.response);

冗談を言う = JSON.parse(xh.response)

console.log(ジョーク);

}

// send メソッドを呼び出してリクエストを完了します

xh.send()

</script>

</body>

Vue 構文の仕上げ

Vue の概要

vueの基本的な使い方

Vショーの使用

ヴオン

v モデル

v-if

v-for におけるキーの役割

v-for は配列を反復処理します

v-for は数値を反復します

v-for はオブジェクトを走査します

vバインド

クッキー

イベントオブジェクト

ライフサイクル

為替レートを計算する

カウンター

style属性をバインドする

オブジェクトモードでクラス属性をバインドする

スタイルプロパティをオブジェクトとしてバインドする

計算されたプロパティ

計算されたプロパティの基本構造

計算プロパティの基本的な使用法

計算されたプロパティの完全な構造

計算されたプロパティの完全な構造 2

イベント修飾子

イベントメソッド

イベントバブリング

イベント修飾子の概要

リスナー

リスナーの基本構造

リスナーのベースは以下に属します

配列でのリスナーの使用

アヤックス

AJAX がポストリクエストを送信する

リクエスト送信パラメータを取得する

おすすめ