1. セットアップを始める次のコード関数を簡単に紹介します。 <テンプレート> <div>{{ countNum} } } } <button @click="handerFunc">ボタン</button> </テンプレート> <スクリプト> 'vue' から {ref} をインポートします エクスポートデフォルト{ 名前: 'アプリ'、 設定() { // この文は、変数 count が定義されていることを意味します。この変数の初期値は100です countNum = ref(100)とします。 // 結合された API では、メソッドを定義する場合、メソッド内で定義する必要はありません。関数handerFunc(){を直接定義するだけです // console.log(countNum); //countNum はオブジェクトです countNum.value += 10; } // 結合された API で定義されたメソッドまたは変数。外部で必要な場合は、return {aaa,func} return {countNum,handerFunc} を通じて公開する必要があります。 } } </スクリプト> 2. リアクティブの使用を理解するref 関数は、単純な型のデータの変更のみを監視できます。 <テンプレート> <div> <ul> <li v-for="satte.arr内のアイテム" :key="item.id"> {{item.name}} </li> </ul> </div> </テンプレート> <スクリプト> 'vue' から {reactive} をインポートします エクスポートデフォルト{ 名前: 'アプリ'、 設定(){ console.log("setUp は自動的に実行されます") // ref 関数に関する注意: // ref 関数は単純なデータ型のみを監視でき、複雑なデータ型 (配列、オブジェクト) は監視できません。 // リアクティブメソッドにはオブジェクトが含まれています let satte=reactive({ 編曲:[ {name:"Si Teng",id:'0011'}, {name:"アンダー・ザ・スキン",id:'0011'}, {name:"百年の約束",id:'0012'}, {name:"三生三世",id:'0013'}, ] }) 返す { satte } }, } </スクリプト> 3. リアクティブを使用するビューの削除 <テンプレート> <div> <ul> <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)"> {{item.name}} </li> </ul> </div> </テンプレート> <スクリプト> 'vue' から {reactive} をインポートします エクスポートデフォルト{ 名前: 'アプリ'、 設定(){ satte = react({ 編曲:[ {name:"Si Teng",id:'0011'}, {name:"アンダー・ザ・スキン",id:'0011'}, {name:"百年の約束",id:'0012'}, {name:"三生三世",id:'0013'}, ] }) // クリックされた要素を削除する function del(index){ for(let i=0;i<satte.arr.length;i++){ if(インデックス==i){ satte.arr.splice(i,1) は、 } } } 戻り値 { satte, del} }, } </スクリプト> 4. 削除ロジックを分離する別モジュールを形成する <テンプレート> <div> <ul> <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)"> {{item.name}} </li> </ul> </div> </テンプレート> <スクリプト> 'vue' から {reactive} をインポートします エクスポートデフォルト{ 名前: 'アプリ'、 設定(){ // onlyDelLuoJi() メソッドには配列とメソッドが含まれており、分解と同様です。let {satte,del }=onlyDelLuoJi(); // 外部に公開する return {sate,del} }, } 関数onlyDelLuoJi(){ satte = react({ 編曲:[ {name:"Si Teng",id:'0011'}, {name:"アンダー・ザ・スキン",id:'0011'}, {name:"百年の約束",id:'0012'}, {name:"三生三世",id:'0013'}, ] }) // クリックされた要素を削除する function del(index){ for(let i=0;i<satte.arr.length;i++){ if(インデックス==i){ satte.arr.splice(i,1) は、 } } } //データ satte とメソッド del を公開する return { satte,del } } </スクリプト> 5. 追加機能を実装するイベント間でパラメータを渡す <テンプレート> <div> <div> <input type="text" v-model="addobj.watchTv.name"> <button @click="addHander">追加</button> </div> <ul> <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)"> {{item.name}} </li> </ul> </div> </テンプレート> <スクリプト> 'vue' から {reactive} をインポートします エクスポートデフォルト{ 名前: 'アプリ'、 設定(){ // onlyDelLuoJi() メソッドには配列とメソッドが含まれており、分解と同様です。let {satte,del }=onlyDelLuoJi(); // 渡されたパラメータ satte は、onlyDelLuoJi 関数で提供される satte です。パスlet { addobj,addHander }=OnlyaddHander(satte); // 外部に公開する return {sate,del,addobj, addHander} }, } //関数モジュールを追加する function OnlyaddHander(satte){ console.log('initialize add', satte) addobj = リアクティブ({ テレビを見る:{ 名前:""、 id:"" } }); 関数addHander(){ // 間違ったメソッドをリセットしてクリアします // satte.arr.push(addobj.watchTv) // addobj.watchTv.name = ""; // addobj.watchTv.id = ""; // 正しいアプローチ let oldobj = Object.assign({}, addobj.watchTv) satte.arr.push(oldobj) } 戻り値: { addobj, addHander } } //関数モジュール関数のみ削除DelLuoJi(){ console.log('初期化を削除') satte = react({ 編曲:[ {name:"Si Teng",id:'0011'}, {name:"アンダー・ザ・スキン",id:'0011'}, {name:"百年の約束",id:'0012'}, {name:"三生三世",id:'0013'}, ] }) // クリックされた要素を削除する function del(index){ for(let i=0;i<satte.arr.length;i++){ if(インデックス==i){ satte.arr.splice(i,1) は、 } } } //データ satte とメソッド del を公開する return { satte,del } } </スクリプト> 6 別々のファイルに抽出する追加と削除のロジックを別のファイルに分離したいと考えています。 「vue」から{reactive}をインポートします 関数OnlyaddHander(satte){ console.log('initialize add', satte) addobj = リアクティブ({ テレビを見る:{ 名前:""、 id:"" } }); 関数addHander(e){ // 間違ったメソッドをリセットしてクリアします // satte.arr.push(addobj.watchTv) // addobj.watchTv.name = ""; // addobj.watchTv.id = ""; // 正しいアプローチ let oldobj = Object.assign({}, addobj.watchTv) satte.arr.push(oldobj) e.preventDefault(); } 戻り値: { addobj, addHander } } エクスポートデフォルトOnlyaddHander アデル 「vue」から{reactive}をインポートします 関数onlyDelLuoJi() { console.log('初期化を削除') satte = react({ 編曲:[ {name:"Si Teng",id:'0011'}, {name:"アンダー・ザ・スキン",id:'0011'}, {name:"百年の約束",id:'0012'}, {name:"三生三世",id:'0013'}, ] }) // クリックされた要素を削除する function del(index){ for(let i=0;i<satte.arr.length;i++){ if(インデックス==i){ satte.arr.splice(i,1) は、 } } } //データ satte とメソッド del を公開する return { satte,del } } エクスポートデフォルトのみDelLuoJi メインファイル <テンプレート> <div> <div> <input type="text" v-model="addobj.watchTv.name"> <button @click="addHander">追加</button> </div> <ul> <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)"> {{item.name}} </li> </ul> </div> </テンプレート> <スクリプト> 「./components/del」からonlyDelLuoJiをインポートします。 「./components/add」からOnlyaddHanderをインポートします。 エクスポートデフォルト{ 名前: 'アプリ'、 設定(){ // onlyDelLuoJi() メソッドには配列とメソッドが含まれており、分解と同様です。let {satte,del }=onlyDelLuoJi(); // パラメータを渡す let { addobj,addHander }=OnlyaddHander(satte); // 外部に公開する return {sate,del,addobj, addHander} }, } </スクリプト> 以上がvue3組み合わせAPIにおけるsetup、ref、reactiveの詳しい使い方です。vue組み合わせAPIの詳細については、123WORDPRESS.COMの他の関連記事もぜひご覧ください! 以下もご興味があるかもしれません:
|
<<: MySQL ALTERコマンドの知識ポイントのまとめ
>>: Mysql マスタースレーブレプリケーションの注意事項の説明
目次1. SQL言語の基本機能の紹介2. データ定義言語の目的3. データベースの作成と破棄4. デ...
コードをコピーコードは次のとおりです。 <html> <本文> <?p...
目次1. はじめに2. 実装3. HTML ドラッグ アンド ドロップ API を使用しないのはなぜ...
プロジェクトで使用されている特殊文字とアイコンHTMLコードXML/HTML コードコンテンツをクリ...
シナリオ: データ量が増加すると、MySQL が配置されているディスクがいっぱいになり、より大きなス...
<br />原文: http://blog.rexsong.com/?p=1166ウェブ...
目次1. ChildNodes属性のトラバーサル2. 要素シリーズ属性のトラバーサル以前は、chil...
この記事では、JavaScriptで派手なカルーセル効果を実装する2つの方法を紹介します。具体的な内...
ピップとは何かpip は、Python パッケージの検索、ダウンロード、インストール、アンインストー...
undefined JavaScript では、値が undefined かどうかを判断したい場合は...
目次ステップ1. ルーティング ルールを設定し、子構成項目を使用します。 2. ジャンプ(フルパスを...
複数の注文を含むリストが必要です。各注文は一意にすることも、複数の注文を結合することもできます。各注...
前回の記事では、Zabbix のネットワーク検出機能について学習し、アクションと組み合わせてホストの...
Docker コンテナに繰り返し入って操作することを避けるために、コンテナ内の一連の命令をホストマシ...
この記事では、参考のために、ミニプログラムでカスタムのマルチレベル単一選択および複数選択機能を実装す...