伝説的な 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 に入る方法

推薦する

MyBatisインターセプターのページング機能を実装する方法

MyBatisインターセプターのページング機能を実装する方法序文:まず、実装原則についてお話しします...

シンプルなリスト機能を実装するミニプログラム

この記事の例では、参考のために簡単なリスト機能を実装するアプレットの具体的なコードを共有しています。...

自動ロック画面機能を実現するjs

1. 使用シナリオこのような要件があるため、システムが開発されました。ユーザーがデスクトップを離れ...

MySQL の null (IFNULL、COALESCE、NULLIF) に関する知識ポイントのまとめ

この記事では、MySQL の null (IFNULL、COALESCE、NULLIF) に関連する...

HTML+CSS3+JSで実装されたドロップダウンメニュー

成果を達成する html <div class="コンテナ"> &l...

Node.jsサービスDockerコンテナアプリケーション実践のまとめ

この記事では、Docker コマンドの使用とインストールについては説明しません。Docker を基礎...

HTML特殊文字の徹底分析

HTML徹底解析(14)特殊文字 ■ よく使われる特殊文字 HTMLタグを知っていれば、特殊文字の使...

MySQL 5.7 でルートパスワードを変更する方法に関するチュートリアル

バージョンアップデートにより、元のユーザーのパスワードフィールドがauthentication_st...

MySQL の最適化: サブクエリの代わりに結合を使用する

サブクエリの代わりにJOINを使用するMySQL はバージョン 4.1 以降で SQL サブクエリを...

DockerのTLS(SSL)証明書の有効期限の問題を解決する

問題現象: [root@localhost ~]# docker イメージをプル xxx.com.c...

Vue バックエンド管理システムのページング機能の実装例

この記事では、主に Vue バックグラウンド管理システムのページング機能の実装を紹介し、次のように共...

Firefox または IE でスパン幅が決定されない場合の解決策

コードをコピーコードは次のとおりです。 <html xmlns="http://ww...

Vueキャッシュ機能の使い方

目次vue2のキャッシュ機能Vue キャッシュ関数の変換最適化要約するvue2のキャッシュ機能vue...

Linux でソフトウェア パッケージのバージョンをアップグレードする方法の詳細な説明

Linux環境で、特定のソフトウェア(パッケージ)がインストールされているかどうかを確認したい。 r...

CSSを使用してAndroidシステムの読み込みアニメーションを実装する

Web には一般的な読み込みアイコンが 2 つあります。1 つは iOS の「菊」、もう 1 つは ...