Vue 2.2.0+新特性整理と注意事項

皆さんはvueの基本概念について知っていますか？よく分からない友達は先に知り合ってもいいです。
vue基礎教程
Vue.js（読み方/vju）ː/, viewのような）ユーザーインターフェースを構築する漸進的なフレームワークです。
Vueは視層だけに注目し、ボトムアップから増分して開発したデザインを採用しています。
Vueの目標は、できるだけ簡単なAPIを通じて応答のデータバインディングと組み合わせを実現するためのビューコンポーネントである。
本文では、Vue 2.2.0＋新しい特徴を整理し、各バージョンの注意点を詳しくまとめました。これは本文の重点となる知識です。参考にして勉強してください。
まず公式サイトを添付します。https://cn.vuejs.org/v2/guide/
2.2.0+バージョン
v-for
2.2.0+のバージョンは、コンポーネントで使用する  v-forの時、keyは今必要です。
マウスの修飾子
.left
.ナイト
middle.
これらの修飾子は処理関数が特定のマウスボタンにのみ応答することを制限します。
モデル
v-modelを使用する際にプロップとイベントをカスタマイズするカスタムコンポーネントを許可します。デフォルトでは、一つのコンポーネントの  v-modelは  valueはpropとして使われています。  inputはイベントとして使用されますが、オプションボックスやチェックボックスボタンなどの入力タイプがあります。  value propは異なる目的を達成します。使用  モデルオプションは、これらの場合に生じる衝突を回避することができる。

Vue.component('my-checkbox', {
 model: {
 prop: 'checked',
 event: 'change'
 },
 props: {
 // this allows using the `value` prop for a different purpose
 value: String,
 // use `checked` as the prop which take the place of `value`
 checked: {
 type: Number,
 default: 0
 }
 },
 data:function(){
 return{
 _value:this.value
 }
 },
 template:`
 <input 
  type="checkbox" 
  v-bind:checked="checked"
  v-on:change="$emit('change',$event.target.checked)" 
 ></input>`
 
 // ...
})
<my-checkbox v-model="foo" value="some value"></my-checkbox>

上記のコードは以下に相当します。

<my-checkbox
 :checked="foo"
 @change="val => { foo = val }"
 value="some value">
</my-checkbox>

注：checked属性はpropsで宣言します。
provide/inject
このオプションは、コンポーネントの階層がどれほど深いかに関わらず、祖先のコンポーネントがその子孫の子孫に一つの依存性を注入することを可能にするために一緒に使用され、上下関係が成立するまでの時間にわたって常に有効である。
https://cn.vuejs.org/v2/api/#provide-inject
2.3.0バージョン
結合インラインスタイル
2.3.0からstyleバインディングの属性に複数の値を含む配列を提供してもよく、複数のプレフィックスを提供する値、例えば：
＜div：style=「{display:'-webkit-box'、'-ms-flexbox'、'flex'」>
このように書くと、最後のブラウザでサポートされている値だけがレンダリングされます。本例では、ブラウザプレフィックスを持たないflexboxがサポートされている場合、レンダリングのみが可能となる。
display:flex
。
イベント修飾子
VueはaddEvent Listenerにも対応しています。  的に命中する  passive  オプションが提供されました  .passive修饰符。

<!--           (     )        -->
<!--       `onScroll`    -->
<!--       `event.preventDefault()`     -->
<div v-on:scroll.passive="onScroll">...</div>

これ.passive修飾子は特に移動端の性能を向上させることができます。
注：新規規格のaddEventListenerの3番目のパラメータは、true（イベントキャプチャ）fasleではなく、オブジェクトです。

document.addEventListener('click',callback,
{
 capture:false,//      
 passive:false,//        ，             
 once:false//     remove    
})

注：passiveと  .イベントは一緒に使います。  .イベントは無視されます。
v-bind
システマティック.sync(2.3.0+)文法糖は、親コンポーネントのバインディング値を更新するように拡張されます。  v-onトランシーバー
https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E 4%BF%AE%E 9%A 5%B 0%E 7%AC% A 6
2.4.0バージョン
v-on
2.4.0から、v-onは同様にパラメータなしにイベント/モニターのキーペアを結びつけるオブジェクトをサポートします。注意オブジェクト文法を使用すると、修飾器はサポートされていません。
注：v-bindはパラメータがない場合、キーペアを含むオブジェクトに結び付けられます。その中で、クラスとスタイルは対象と配列を表すことができません。
2.5.0バージョン
キー修飾子
あなたも直接にKeyboardEvent.keyが露出した任意の有効なキー名をkebab-case（短い横線の名前）に変換して修飾子とすることができます。

<input @keyup.page-down="onPageDown">

いくつかのキー（.escおよびすべての方向キー）があります。IE 9には違いがあります。  key値は、もしあなたがIE 9をサポートしたいならば、それらの内蔵の別名は第一選択であるべきです。上記の例では、処理関数は  $event.key === 'PageDown' で呼び出しられます。
.exact修飾子（システム修飾ボタン）
exact修飾子は、正確なシステム修飾子の組み合わせによりトリガされるイベントを制御することができます。

<!--    Alt   Shift            -->
<button @click.ctrl="onClick">A</button>
<!--      Ctrl           -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!--                    -->
<button @click.exact="onClick">A</button>

slot-scope
要素またはコンポーネントを作用領域スロットとして表します。特性の値は、関数署名のパラメータ位置に現れる合法的なJavaScript表現であるべきです。これは、サポートされている環境において、ES 2015を表現にも使用することができるということです。それは2.5+の中でscopeに取って代わった。
2.5+で、slot-scopeはもう制限されません。