伝説的な VUE 構文シュガーは何をするのでしょうか?

伝説的な VUE 構文シュガーは何をするのでしょうか?

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 と同じように使用される一般的な修飾子です。

  • .stop はイベントのバブリングを停止するために使用されます。
  • .once イベントは 1 回だけ発生します。
  • .self イベントはイベント自体でのみトリガーされ、内部からはトリガーできません。
  • .enter | .tab | .delete | .esc ..... キーボード修飾子
  • .ctr | .alt | .shift | .meta システム修飾子

    5. ダイナミック CSS

    v-bind を使用すると、スタイルまたはクラスを通じて動的なスタイルを追加できます。

    //hello をクリックすると、テキストが赤と黒に切り替わります<h1 @click=" changeColor = !changeColor " :style="{color:changeColor?'red':'black'}">
     こんにちは</h1>
    
    データ:{
      色を変更:false
    }

    6. レジスタコンポーネント構文シュガー

    いわゆる登録コンポーネント構文シュガーは、コンポーネント コンストラクターの定義を省略し、コンポーネント コンストラクター オブジェクトを登録コンポーネント関数に直接渡すことを意味し、これにより CPU のスケジュールとメモリの割り当てが削減されます。

    グローバルコンポーネントの使用:

    //グローバルコンポーネント構文シュガー Vue.component(
      'my-component' 、 
      テンプレート:`
      	<div>コンポーネントコンテンツ</div>
      `)
    
    /* グローバルコンポーネントの登録 */
    //コンポーネントは <my-component></my-component> を使用します
    //コンポーネントを登録する const myComponent = Vue.extend({
     テンプレート:`
      <div>
       <h2>ヴウケ</h2>    
      </div>
      `
    })
    Vue.component('myComponent', myComponent)

    ローカルコンポーネントの使用:

//グローバルコンポーネント構文のシュガーコンポーネント:{
  'my-component':{
  	テンプレート:`<div>コンポーネントコンテンツ</div>`
  }
}

/* ローカルコンポーネントの登録*/
//コンポーネントを登録する const myComponent = Vue.extend({
 テンプレート:`
  <div>
   <h2>ヴウケ</h2>    
  </div>
  `、
  コンポーネント:{
  	子供:{
     テンプレート:`<div>サブコンポーネントコンテンツ</div>`
    }
  }
})
Vue.component('myComponent', myComponent)

伝説の VUE「シンタックスシュガー」とは何かについての記事はこれで終わりです。より関連性の高い VUE シンタックスシュガーのコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。皆様、今後とも 123WORDPRESS.COM を応援してください。

以下もご興味があるかもしれません:
  • vue3 の defineProps で ref responsiveness を使用すると失敗する理由の詳細な説明
  • 強くお勧めします! Vue 3.2 でシンタックスシュガーを設定する
  • Vue3.0 構文糖衣における defineProps と defineEmits の分析

<<:  ノードをMySQLデータベースに接続する際に発生する問題と解決策

>>:  Idea で Tomcat のソースコードデバッグを開始し、デバッグのために Tomcat に入る方法

推薦する

JavaScript 関数呼び出し、適用、バインド メソッドのケース スタディ

要約する1. 類似点どちらも、ターゲット関数が実行されると内部の this ポインターを変更できます...

CSS3 で実装された画像ホバートグルボタン

結果:実装コードhtml <ul class="スライド"> <...

iptables および firewalld ツールを使用して Linux ファイアウォール接続ルールを管理する

ファイアウォールファイアウォールは一連のルールです。パケットが保護されたネットワーク空間に出入りする...

Dockerボリュームのファイルマッピング方法

背景ブロックチェーン ログ モジュールで作業しているときに、コンテナーが実行されている場合は、ログ ...

Jenkins を通じて None のイメージを定期的にクリーンアップする方法

序文継続的なコード配信のプロセスで、Jenkins を利用して Docker イメージを作成すると、...

ウェブページ内でウェブテーブルやdivレイヤーが引き伸ばされる問題の解決策

<br />Web ページをデザインするときには、いつも不快なことに遭遇します。最も一般...

Vue3 の組み合わせ API における setup、ref、reactive の完全な使用方法

1. セットアップを始める次のコード関数を簡単に紹介します。 ref 関数を使用して変数の変更を監視...

純粋な CSS3 で実装された三目並べゲーム

操作効果: html <div class="三目並べ"> <...

CSS 要素を表示および非表示にする 9 つの方法

Web ページの制作では、要素の表示と非表示は非常に一般的な要件です。この記事では、要素を表示したり...

Vue3.0でカスタム命令を書くための簡単な手順

序文Vue には、v-if、v-bind、v-on などの豊富な組み込みディレクティブが用意されてい...

MySQL 8.0.15 圧縮版インストール グラフィック チュートリアル

この記事では、参考までにMySQL 8.0.15圧縮版のインストール方法を紹介します。具体的な内容は...

Web コンテンツ ページを作成するための 9 つの実用的なヒント

コンテンツ1. 読者に留まる理由を与える。ウェブページを面白く魅力的なものにしましょう。しかし、まず...

イントラネット侵入を実現するためのSSHポート転送

LAN 内のマシンは外部ネットワークにアクセスできますが、外部ネットワークは内部ネットワークにアクセ...

現在使用されている設定ファイル my.cnf を表示する mysql メソッド (推奨)

my.cnfは、MySQL の起動時に読み込まれる設定ファイルです。通常は MySQL インストー...

HTML コメント HTML 内のテキストコメントをマークするための記号

HTML コメント。コードの横に HTML コメントを付ける必要があることがよくあります。そうするこ...