伝説的な 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 を応援してください。