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 マスタースレーブレプリケーションの注意事項の説明
MongoDB のインストール プロセスと問題記録1. MongoDBのインストールMongoDBを...
質問ガイド1. Hadoop 3.x はどのようにして障害を許容するのでしょうか? 2. Hadoo...
シンプルなセカンダリメニューを動的に実装するマウスを第 1 レベルのラベル上に置くと、マウスが小さな...
昨日は遅くまで寝ていて、一日中起きていました。私の年齢では、夜更かしして本を書くのはもう無理のようで...
<base> タグは、ページ上のすべてのリンクのデフォルトのアドレスまたはデフォルトのタ...
進捗バーを実装するためのJavaScriptの具体的なコードは参考までに。具体的な内容は次のとおりで...
v-for タグにキーが追加されていない場合。 <!DOCTYPE html> <...
1. ユーザーを作成して承認するMySQL 8.0 では、ユーザーの作成と認証が以前とは異なります...
目次1. 範囲2. スコープチェーン3. 語彙の範囲5. 閉鎖の適用6. クロージャの欠陥7. 閉会...
mysql 効率的なクエリMySQL は、左結合の速度を上げるために group by を犠牲にし...
MySQL 4.x 以降では、全文検索 MATCH ... AGAINST モード (大文字と小文字...
目次1. はじめに2. 準備3. スクリプトプロジェクトの構築4. コードの作成と実行5. まとめと...
目次シンボルデータタイプシンボルが表示される理由シンボルの特徴シンボルの応用rbオブジェクトにupメ...
目次1. マップを初期化する2. マップポイント3. 位置決めを有効にする4. マップの変更を監視す...
1. ディレクトリホワイトリストを設定する:指定されたリクエストパスに制限を設定しないでください。た...