Object.defineProperty メソッドのレビュー<!DOCTYPE html> <html> <ヘッド> <メタ文字セット="UTF-8" /> <title>Object.defineproperty メソッドのレビュー</title> </head> <本文> <script type="text/javascript"> 数値を18とする 人 = { 名前:「張三」 性別: '男性'、 } Object.defineProperty(人,'年齢',{ // 値:18, // enumerable:true、//プロパティを列挙できるかどうかを制御します。デフォルト値は false です // 書き込み可能:true、//プロパティを変更できるかどうかを制御します。デフォルト値は false です // configurable: true //プロパティを削除できるかどうかを制御します。デフォルト値は false です //誰かが person の age プロパティを読み取ると、get 関数 (getter) が呼び出され、戻り値は age の値になります get(){ console.log('誰かが age プロパティを読み取りました') 戻り番号 }, //誰かが person の age プロパティを変更すると、setter 関数が呼び出され、変更された値を受け取ります set(value){ console.log('誰かが age プロパティを変更しました。値は', value) 数 = 値 } }) // console.log(Object.keys(person)) console.log(人) </スクリプト> </本文> </html> データブローカーとは何ですか?
<!DOCTYPE html> <html> <ヘッド> <メタ文字セット="UTF-8" /> <title>データエージェントとは何ですか?</title> </head> <本文> <!-- データ プロキシ: オブジェクト プロキシを介して別のオブジェクトの属性を操作 (読み取り/書き込み) --> <script type="text/javascript"> obj = {x:100}とします obj2 = {y:200}とします オブジェクト.defineProperty(obj2,'x',{ 得る(){ obj.xを返す }, 設定(値){ obj.x = 値 } }) </スクリプト> </本文> </html> Vue のデータプロキシ<!DOCTYPE html> <html> <ヘッド> <メタ文字セット="UTF-8" /> <title>Vue のデータ プロキシ</title> <!-- Vue をインポート --> <script type="text/javascript" src="../js/vue.js"></script> </head> <本文> <!-- 1. Vue のデータプロキシ: vmオブジェクトを使用して、データオブジェクト内の属性の操作(読み取り/書き込み)をプロキシします。 2. Vue のデータプロキシの利点: データ3内のデータのより便利な操作。基本原理: Object.defineProperty() を使用して、データ オブジェクト内のすべてのプロパティを vm に追加します。 VM に追加される各プロパティに対して、ゲッター/セッターを指定します。 ゲッター/セッター内のデータ内の対応する属性を操作 (読み取り/書き込み) します。 --> <!-- コンテナを準備する --> <div id="ルート"> <h2>学校名: {{name}}</h2> <h2>学校の住所: {{address}}</h2> </div> </本文> <script type="text/javascript"> Vue.config.productionTip = false // 起動時に Vue がプロダクションのヒントを生成しないようにします。 定数vm = 新しいVue({ el:'#root', データ:{ 名前:「シャン・シリコンバレー」 住所:「紅福科技園区」 } }) </スクリプト> </html> イベントの基本的な使い方<!DOCTYPE html> <html> <ヘッド> <メタ文字セット="UTF-8" /> <title>Vue のデータ プロキシ</title> <!-- Vue をインポート --> <script type="text/javascript" src="../js/vue.js"></script> </head> <本文> <!-- 1. Vue のデータプロキシ: vmオブジェクトを使用して、データオブジェクト内の属性の操作(読み取り/書き込み)をプロキシします。 2. Vue のデータプロキシの利点: データ3内のデータのより便利な操作。基本原理: Object.defineProperty() を使用して、データ オブジェクト内のすべてのプロパティを vm に追加します。 VM に追加される各プロパティに対して、ゲッター/セッターを指定します。 ゲッター/セッター内のデータ内の対応する属性を操作 (読み取り/書き込み) します。 --> <!-- コンテナを準備する --> <div id="ルート"> <h2>学校名: {{name}}</h2> <h2>学校の住所: {{address}}</h2> </div> </本文> <script type="text/javascript"> Vue.config.productionTip = false // 起動時に Vue がプロダクションのヒントを生成しないようにします。 定数vm = 新しいVue({ el:'#root', データ:{ 名前:「シャン・シリコンバレー」 住所:「紅福科技園区」 } }) </スクリプト> </html> イベント修飾子<!DOCTYPE html> <html> <ヘッド> <メタ文字セット="UTF-8" /> <title>イベントの基本的な使用方法</title> <!-- Vue をインポート --> <script type="text/javascript" src="../js/vue.js"></script> </head> <本文> <!-- イベントの基本的な使用方法: 1. v-on:xxx または @xxx を使用してイベントをバインドします。xxx はイベント名です。 2. イベント コールバックはメソッド オブジェクトで構成する必要があり、最終的には VM 上に存在します。 3. メソッドで設定された関数には矢印関数を使用しないでください。それ以外の場合、これは vm ではありません。 4. メソッドに設定されている関数はすべて Vue によって管理される関数であり、this は vm またはコンポーネント インスタンス オブジェクトを指します。 5. @click="demo" と @click="demo($event)" は同じ効果がありますが、後者はパラメータを渡すことができます。 --> <!-- コンテナを準備する --> <div id="ルート"> <h2>{{name}} 研究へようこそ</h2> <!-- <button v-on:click="showInfo">クリックして詳細を表示</button> --> <button @click="showInfo1">クリックして情報 1 を表示 (パラメータなし)</button> <button @click="showInfo2($event,66)">プロンプト情報 2 を表示するにはクリックしてください (パラメータの受け渡し)</button> </div> </本文> <script type="text/javascript"> Vue.config.productionTip = false // 起動時に Vue がプロダクションのヒントを生成しないようにします。 定数vm = 新しいVue({ el:'#root', データ:{ 名前:「シャン・シリコンバレー」 }, 方法:{ showInfo1(イベント){ // コンソールログ(イベントターゲットのインナーテキスト) // console.log(this) // これはvmです alert('こんにちは、クラスメイト!') }, showInfo2(イベント,番号){ console.log(イベント,番号) // コンソールログ(イベントターゲットのインナーテキスト) // console.log(this) // これはvmです alert('こんにちは、クラスメイト!!') } } }) </スクリプト> </html> キーボードイベント<!DOCTYPE html> <html> <ヘッド> <メタ文字セット="UTF-8" /> <title>キーボード イベント</title> <!-- Vue をインポート --> <script type="text/javascript" src="../js/vue.js"></script> </head> <本文> <!-- 1. Vue でよく使われるボタンのエイリアス: 入力 => 入力 削除 => 削除 (「削除」キーと「バックスペース」キーをキャプチャ) 終了 => esc スペース => スペース 改行 => タブ (特殊、keydown と一緒に使用する必要があります) 上 => 上 下 => 下 左 => 左 右 => 右 2. Vueがエイリアスを提供していないボタンの場合、ボタンの元のキー値を使用してバインドできますが、ケバブケース(短いダッシュ命名)に変換するように注意してください。 3. システム修飾キー(特殊な使用法): ctrl、alt、shift、meta (1)keyupと一緒に使用:修飾キーを押してから他のキーを押して、他のキーを放すと、イベントがトリガーされます。 (2)keydownと一緒に使用:通常通りイベントをトリガーします。 4. keyCodeを使用して特定のキーを指定することもできます(非推奨) 5.Vue.config.keyCodes.Custom キー名 = キーコード、キーエイリアスをカスタマイズできます --> <!-- コンテナを準備する --> <div id="ルート"> <h2>{{name}} 研究へようこそ</h2> <input type="text" placeholder="入力を促すには Enter キーを押してください" @keydown.huiche="showInfo"> </div> </本文> <script type="text/javascript"> Vue.config.productionTip = false // 起動時に Vue がプロダクションのヒントを生成しないようにします。 Vue.config.keyCodes.huiche = 13 // エイリアスキーを定義します new Vue({ el:'#root', データ:{ 名前:「シャン・シリコンバレー」 }, メソッド: { 表示情報(e){ // console.log(e.key,e.keyCode) console.log(e.target.value) } }, }) </スクリプト> </html> 要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: mysql5.7でbinlogを使用してデータを復元する方法
並行処理関数 i の `grep server /etc/hosts | awk '{pri...
この記事の例では、ネイティブJSカプセル化vueタブ切り替えの具体的なコードを参考までに共有していま...
1. 全体的なアーキテクチャ図他のデータベースと比較すると、MySQL は、そのアーキテクチャがさま...
最近、LAN 内のすべてのホスト名を一覧表示する必要があります (SMB プロトコル)。しかし、fi...
公式ドキュメント:したがって、mysql は次のように起動する必要があります。 docker run...
Docker コンテナ間の相互接続と通信には 3 つの方法があります。 Docker 内部ネットワー...
背景:かなり前(2017.6.5、記事にはタイムリーさがあり、特に使用されているツールは頻繁に更新さ...
SSHFS の機能: FUSE(Linux向けの最高のユーザー空間ファイルシステムフレームワーク)を...
この効果と同様に、方法も非常に簡単です。ヘッダーに次のように記述します: <link rel=...
文字の位置を取得するための同様の方法について学習します。 charAt() 文字列内の指定された位置...
構造擬似クラスセレクタの紹介構造擬似クラスセレクターは、いくつかの特殊効果を処理するために使用されま...
最近、「フロントエンドキャッシュ」という新しい要件が作成されました要件背景: フォームへの高頻度の繰...
MySQL は比較的使いやすいリレーショナル データベースです。今日は、win10 システムを再イ...
<br /> テキスト、記号、リンクの3つの側面に焦点を当て、主に中国語で、個人的な執筆...
目次序文非同期イテレータとは何ですか?非同期イテレータストリームとしてページング機能を備えたAPIの...