1. 糖衣構文とは何ですか?構文糖は、砂糖で覆われた文法とも訳され、イギリスのコンピューター科学者ピーター・J・ランディンによって発明された用語です。これは、コンピュータ言語に追加された一種の構文を指します。機能に影響を与えずに、いくつかの簡単な構文を追加することでも効果が得られます。この構文はコンピュータには影響しませんが、プログラマーにとっては便利です。通常、追加された構文シュガーはプログラマーの可読性を高め、エラーの可能性を減らします。 構文糖衣を使用すると、コードが簡素化され、プログラマーによる開発が容易になります。 2. VUE の構文糖とは何ですか?1. 最も一般的な構文シュガーvモデルv-model を使用すると双方向のデータバインディングを実現できますが、どのように実現するのでしょうか? v-model がデータにバインドされると、データがバインドされるだけでなく、入力イベントであるイベント リスナーも追加されます。 使用例: // 構文糖 <input type="text" v-model="name" > //次の例に復元します <input type="text" v-bind:value="名前" v-on:input="name=$event.target.value"> 入力が行われると、input イベントがトリガーされ、input イベントによって現在の値が value に割り当てられます。これが、v-model が双方向バインディングを実現できる理由です。 2. v-bindの糖衣構文v-bind は動的な属性を追加するために使用されます。src、href、class、style、title などの一般的な属性はすべて、v-bind を通じて動的な属性値を追加できます。 v-bindの構文糖はv-bindを削除してコロン(:)に置き換えることです。 // 構文シュガー <div :title="title"> <img :src="url" alt=""> <a :href="link" rel="external nofollow" rel="external nofollow" >糖衣構文はありません</a> </div> // 構文シュガーなし <div v-bind:title="title"> <img v-bind:src="url" alt=""> <a v-bind:href="link" rel="external nofollow" rel="external nofollow" >シンタックスシュガーなし</a> </div> 3. v-onの糖衣構文v-on はイベント リスナーをバインドします。v-on の構文糖は @ と省略されます。 ケース 1: メソッドがパラメータを渡さない場合、括弧は必要ありません。 <button @click="btn">シンタックスシュガー</button> <button v-on:click="btn">シンタックスシュガーなし</button> // メソッド自体にパラメータがある場合、ネイティブ イベントのイベント パラメータがデフォルトのメソッドによって渡されることに注意してください:{ btn(イベント){ console.log( 'イベント' , イベント ) } } ケース 2: パラメータを渡す必要がある場合は、イベント パラメータも必要になります。 <button @click="btn('click event', $event)">シンタックスシュガー</button> //$event イベントはブラウザ イベント オブジェクト メソッドを取得することに注意してください: { btn( タイプ、イベント ){ console.log('type', type) //イベントをクリックconsole.log('event', event) } } 4. 修飾語修飾子はピリオドで示される特殊な接尾辞です。 v-on の後の修飾語も構文糖衣です。 例: リンクにクリック イベントを追加しますが、クリック後にリダイレクトしないようにします。 // シンタックスシュガー <a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" @click.prevent="go">Baidu</a> //通常の文章 <a href="http://www.baidu.com" rel="external nofollow" rel="external nofollow" v-on:click="go">Baidu</a> 方法:{ 行く(e){ e.preventDefault(); console.log('リンクジャンプを防ぐ') } } prevent 修飾子は、デフォルトのイベントを防止します。送信の場合も同様です。 <form @submit.prevent="onSubmit"></form> 以下は、上記の .prevent と同じように使用される一般的な修飾子です。
//グローバルコンポーネント構文のシュガーコンポーネント:{ 'my-component':{ テンプレート:`<div>コンポーネントコンテンツ</div>` } } /* ローカルコンポーネントの登録*/ //コンポーネントを登録する const myComponent = Vue.extend({ テンプレート:` <div> <h2>ヴウケ</h2> </div> `、 コンポーネント:{ 子供:{ テンプレート:`<div>サブコンポーネントコンテンツ</div>` } } }) Vue.component('myComponent', myComponent) 伝説の VUE「シンタックスシュガー」とは何かについての記事はこれで終わりです。より関連性の高い VUE シンタックスシュガーのコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。皆様、今後とも 123WORDPRESS.COM を応援してください。 以下もご興味があるかもしれません:
|
<<: ノードをMySQLデータベースに接続する際に発生する問題と解決策
>>: Idea で Tomcat のソースコードデバッグを開始し、デバッグのために Tomcat に入る方法
要約する1. 類似点どちらも、ターゲット関数が実行されると内部の this ポインターを変更できます...
結果:実装コードhtml <ul class="スライド"> <...
ファイアウォールファイアウォールは一連のルールです。パケットが保護されたネットワーク空間に出入りする...
背景ブロックチェーン ログ モジュールで作業しているときに、コンテナーが実行されている場合は、ログ ...
序文継続的なコード配信のプロセスで、Jenkins を利用して Docker イメージを作成すると、...
<br />Web ページをデザインするときには、いつも不快なことに遭遇します。最も一般...
1. セットアップを始める次のコード関数を簡単に紹介します。 ref 関数を使用して変数の変更を監視...
操作効果: html <div class="三目並べ"> <...
Web ページの制作では、要素の表示と非表示は非常に一般的な要件です。この記事では、要素を表示したり...
序文Vue には、v-if、v-bind、v-on などの豊富な組み込みディレクティブが用意されてい...
この記事では、参考までにMySQL 8.0.15圧縮版のインストール方法を紹介します。具体的な内容は...
コンテンツ1. 読者に留まる理由を与える。ウェブページを面白く魅力的なものにしましょう。しかし、まず...
LAN 内のマシンは外部ネットワークにアクセスできますが、外部ネットワークは内部ネットワークにアクセ...
my.cnfは、MySQL の起動時に読み込まれる設定ファイルです。通常は MySQL インストー...
HTML コメント。コードの横に HTML コメントを付ける必要があることがよくあります。そうするこ...