vueステップ学習

1533 ワード

vue

1オリジナルイベントは、コンポーネント

にバインドされる.

2 sync修飾子

3 Vue-cli 3.0 0から構築プロジェクト

この文章は主に個人がvueチュートリアルの上で第1回の食べきれない概念に対する理解です
1オリジナルイベントをコンポーネントにバインド
Vueでは、オリジナル要素(、等)に対しては、オリジナルイベント(すなわちHTML Element.addEventListener()が実現する効果)のみを傍受することができる.Vueカスタムコンポーネントの場合、デフォルトでは、そのコンポーネントのアクティブ$emit()からのカスタムイベントのみがリスニングされます.一方、nativeを使用すると、コンポーネントのルート要素の元のイベントを直接傍受することができます(強調:ルート要素のイベントを傍受する).したがって、コンポーネントのルート要素にコンポーネント上のオリジナルイベント(labelラベルにinputイベントがないなど)が含まれていない場合、サイレントに失敗します.すなわち、nativeバインドを置き換える第2のスキームとして$listenersプロパティ(コンポーネント上のすべてのリスナーを含む)が公式に導入された理由:1)サブコンポーネントテンプレート上でv-on=「xxx」を使用して、すべてのイベントリスナーがこのコンポーネントの特定のサブ要素を指す2)xxxの計算プロパティを作成する.

computed: {
    inputListeners: function () {
      var vm = this
      // `Object.assign`               
      return Object.assign({},
        //              
        this.$listeners,
        //             ，
        //            
        {
          //          `v-model`    
          input: function (event) {
            vm.$emit('input', event.target.value)
          }
        }
      )
    }

2 sync修飾子
親子コンポーネントのデータの同期更新は、次のようなものです.



this.$emit('update:title', newTitle)

tips:データは式を使用できません.v-bind.syns=「doc」は、オブジェクトdocのプロパティを別々に転送できますが、オブジェクト{title:doc.title}を直接字面量することはできません.
3 Vue-cli 3.0 0からプロジェクトを構築
https://juejin.im/post/5ccd4580f265da038932a461

AWS CLI で Amazon ECS のタスクを実行する (第４回)

vue解析テンプレートの解釈