Vue(編幅2)

6272 ワード
どのようにVueを学ぶかについて、Vueの創設者である尤雨渓先輩はかつて、Vue 2.0の提案学習順序を知乎に発表したことがある.Vueに関するその他の知識紹介:紙面一
5.コンポーネント
  • 作成(登録)コンポーネント
    • //   （    ）
Vue.component('my-component', {
  template: '
    A custom component!
    '
})

    コンポーネントは、登録後、親インスタンスのモジュールでカスタム要素として使用できます.ルートインスタンスを初期化する前にコンポーネントが登録されていることを確認するには、次の手順に従います.
    
  

    
//    
//      
new Vue({
  el: '#example'
})
  • data Vueコンストラクタによって作成されたコンポーネントでは、data属性が関数である必要があります.
    • Vue.component('my-app',{
 template: '{{message}}',
data: function(){
  return {
    message: 'hello'
  }
}
})
  • Propsサブアセンブリは、取得が期待されるデータをpropsオプションで明示的に宣言する.
  • 一方向データストリームpropは一方向バインドされています.親コンポーネントの属性が変化すると、サブコンポーネントに伝達されますが、逆にはなりません.親コンポーネントが更新されるたびに、サブコンポーネントのすべてのpropが最新値に更新されます.これは、サブコンポーネントの内部でpropを変更するべきではないことを意味します.なぜpropのデータを修正する衝動があるのでしょうか.通常、(1)propが初期値として伝達された後、サブコンポーネントはそれを局所データとして使用したい.(2)propは初期値として入力され,サブコンポーネントによって他のデータ出力に処理される.この2つの理由について、正しい対応は、ローカル変数を定義し、propの値で初期化することです:
    • props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}

    計算プロパティを定義し、propの値を処理して返します.
    props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}
  • Prop認証コンポーネントが入力したpropsは、データ検証を行うことができる.検証仕様を指定するには、文字列配列ではなくオブジェクトの形式が必要です.例:
    • Vue.component('my-app'，{
  props: {
    propA: Number,//    ，null        
    propB: [String,Number],//    
    propC: {
      type: String,
      required: true //   ，     
    },
    propD: {
      type: Number,
      default: 100  //   ，    
    },
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      } //   /                 
    }, 
    propF: {
      validator: function (value) {
        return value > 10  //        
      }
    }
  }
})

    注意:propsはコンポーネントインスタンスの作成前に検証されるため、defaultまたはvalidator関数、例えばdata、computedまたはmethodsなどのインスタンス属性はまだ使用できません.
  • カスタムイベントサブコンポーネントは、カスタムイベントを介して親コンポーネントと通信する.5.1 v-onを使用してカスタムイベントをバインドする各Vueインスタンスは、
    • というイベントインタフェースを実装する.
  • $on(eventName)を使用してイベント
    • を傍受する.
  • は、$emit(eventName)を使用してイベントをトリガし、さらに、親コンポーネントは、サブコンポーネントを使用する場所で、直接v-onを使用して、サブコンポーネントがトリガしたイベントをリスニングすることができる.注意:$onでサブコンポーネントが解放されたイベントをリスニングするのではなく、テンプレートにv-onで直接バインドする必要があります.例:
    • 
Vue.component('child',{
  template: '',
  data: function(){
    return {
      number : 0
    },
    method : {
      increment: function(){
        this.number++
        $.emit(add)
      }
    }
  }
})

new Vue({
  el: '#app',
  data: {
    count  : 0
  },
  methods: {
    addcount: function(){
      this.count++
    }
  }
})

    以上のコードは、サブアセンブリボタンをクリックすると、親アセンブリのaddcount()イベント5.2がトリガーされることを示す.sync修飾子Syncはコンパイル構文糖として存在し、親コンポーネントの属性を自動的に更新するv-onリスナーに拡張されます.例えば、は、 var =val">コンポーネントがfooの値を更新する必要がある場合、更新イベントを表示的にトリガーする必要があります.this.$emit('update:foo'，newValue) 5.3非親子コンポーネント通信では、2つのコンポーネントも通信(非親子関係)を必要とする場合があります.簡単なシーンでは、中央イベントバスとして空のVueインスタンスを使用できます.var bus = new Vue() bus.$emit('id-selected',1) // A bus.$on('id-selected',function(id){})// B 注意:複雑な場合、専門的なステータス管理モードを考慮する必要があります.
  • スロット配信コンテンツを使用コンポーネントを結合させるためには、グループルームのコンテンツとサブコンポーネント自体のテンプレートを混合する方法が必要であり、このプロセスはコンテンツ配信と呼ばれ、Vueはを元のコンテンツのスロットとして使用する.
    • //app-layout       

    
  
    
     //    
  
    
  
    
     //    
  
    
  
    
    
  
    

    

    //     ：

  
               
    
  
             。
    
  
           。
    
  
             
    
    

         ：

    
  
    
    
               
    
  
    
  
    
    
             。
    
    
           。

    6.1役割ドメイン配布内容の実際の親役割ドメイン内のコンパイルをコンパイルする.6.2役割ドメインスロット役割ドメインスロットは、レンダリングされた要素を置き換える(データを転送できる)再利用可能なテンプレートとして使用される特殊なタイプのスロットです.サブコンポーネントでは、propsをコンポーネントに渡すように、スロットにデータを渡すだけです.

    親では、特殊なプロパティscopeを持つ要素が、役割ドメインスロットのテンプレートであることを示す必要があります.scopeの値は、サブコンポーネントから渡されたpropsオブジェクトを受信する一時変数名に対応します.

    上記の結果をレンダリングすると、次のような出力が得られます.
    
  
    
    hello from parent
    hello from child

    役割ドメインスロットの代表的な例は、リストコンポーネントです.コンポーネントがリストの各項目をどのようにレンダリングするかをカスタマイズできます.

    リストコンポーネントのテンプレート:
  • サブコンポーネントインデックスは、jsで直接サブコンポーネントにアクセスする必要がある場合がある.そのため、refを使用してサブコンポーネントにインデックスIDを作成することができる.
    
  

    
var parent = new Vue({ el: '#parent' })
//      
var child = parent.$refs.profile

    注:$refsは、コンポーネントのレンダリングが完了した後にのみ充填され、非応答的です.テンプレートまたは計算プロパティで$refsを使用することを避ける必要があります.
    • 2019_09_Asciidocを使っていてせっかくAsciidoctor-PDF環境を構築したのに出力したPDFの日本語が表示されなくて困っている人へ
    vue uiが反応していないこととVue packages version mismatchが間違っていることについて