Vue.js入門-構成部品

ビューコンポーネント

画面領域を区切って開発したビュー機能.
構成部品間の関係も発生します.

なぜコンポーネントとして管理するのですか?

コードの再利用性が向上し、画面をすばやく作成できます.

構成部品の作成

インスタンスを作成すると、デフォルトでRoot構成部品が作成されます.

<div id="app"></div>

<script>
 new Vue({
    el: '#app'
  })
</script>

グローバル構成部品

主にプラグインまたはライブラリとして使用されます.

Vue.component('컴포넌트 이름', 컴포넌트 내용);

app-headerはRoot素子の下に作成された.
HTMLで作成したテンプレートの内容に変換します.

<div id="app">
    <app-header></app-header>
</div>
    
<script>
Vue.component('app-header', {
      template: '<h1>Header</h1>'
    });
</script>

ゾーン構成部品

ゾーン構成部品を使用するには、インスタンスごとにコンポーネントを作成する必要があります.
複数登録できるので、componentの後ろにsがあります.

 new Vue({
   el: '#app',
   components: {//객체 리터럴
     //'키': '값',
     //'컴포넌트 이름': 컴포넌트 내용,
   }
 })

使用する構成部品ラベルの名前と内容を、オブジェクトテキストとしてインスタンスに挿入します.

<div id="app">
    <app-footer></app-footer>
</div>
<script>
new Vue({
     el: '#app',
     components:{
     	'app-footer': {
            template: '<footer>footer</footer>'
         }
  	}
})
</script>

コンポーネント通信

ビューコンポーネントには、それぞれ独自のデータ有効範囲があります.
複数の構成部品を作成すると、子と親の関係が作成され、関係が確立されるにつれてデータの交換に使用されるルールが生成されます.

親コンポーネント->子コンポーネント(ダウングレード)
=>>props転送

サブアセンブリ->親アセンブリ(イベントをアップグレードすることを示す)
=>

イベント

コンポーネント通信ルールが必要な理由

特定の素子の変化(データ、状態)により、残りの素子が有機的にデータを交換する場合、データの方向を予測することは困難である.
通信ルールを確立することで、データはイベントをダウンロードしてアップロードすることができ、データストリームを追跡することができます.

props

親構成部品の属性を子構成部品に降格させる場合に使用します.

<!--app-header는 하위 컴포넌트 이름-->
<app-header v-bind:props 속성 이름="상위 컴포넌트의 데이터 이름"></app-header>

使用する構成部品のアトリビュートを別の変数(キャラメルボックス)に減算し、オブジェクトを作成してインスタンスに入れます.

var appHeader = {
  template: '<h1>{{ propsdata }}</h1>',
  props:['propsdata']
}

new Vue({
    el: '#app',
    components:{
      'app-header': appHeader
    },
    data:{
      message: 'hi',
      num: 10
    }
});

サブコンポーネントの親コンポーネントのプロパティで使用するプロパティをv-bindsの後に書き、接続します.

<div id="app">
    <!-- 상위 컴포넌트의 message의 내용(hi)을 template에 담아 출력 -->
    <app-header v-bind:propsdata="message"></app-header>
</div>

event emit

イベントをサブコンポーネントから親コンポーネントに昇格させます.

<!--app-header는 하위 컴포넌트 이름-->
<!--v-on은 vue에서 제공하는 속성-->
<app-header v-on:하위 컴포넌트에서 발생한 이름="상위 컴포넌트의 메서드 이름"></app-header>

構成部品
親コンポーネント:#app
サブアセンブリ:appHeader

   <div id="app">
        <app-header v-on:pass="logText"></app-header>
    </div>

appHeader(サブアセンブリ)の設定
appHeaderは、クリックイベント付きのボタンをテンプレートとして使用します.
ボタンにはpasseEventというメソッドが含まれています.
クリックするたびに$emitでpassが渡されます.

$emit:vueが提供するapi

pass:アクティビティ名

 var appHeader = {
    //클릭 이벤트 v-on:click
    template: '<button v-on:click="passEvent">click me</button>',
   methods:{
     //button을 클릭했을 때 생기는 이벤트를 정의한 함수
     passEvent: function(){
       this.$emit('pass');
     }
   }
}

meボタンをクリックすると
=passeEvent運転時

#app(親コンポーネント)の構成

 new Vue({
     el:'#app',
     components:{
       'app-header': appHeader,
     },
     methods:{
       logText: function(){
         console.log('hi');
       },

     }
});

サブコンポーネントにpassというイベントが発生すると、親コンポーネントラベルからlogTextというメソッドが受信され、実行されます.

<app-header v-on:pass="logText"></app-header>

ビューインスタンスのthis

これは主にJavaScriptオブジェクトのプロパティで他のプロパティを指すために使用されます.

var obj = {
  	num: 10
	getNum = function(){
      	//this는 해당 객체인 obj를 바라본다.
    	console.log(this.num)//출력:10
    }
}

ビューインスタンスでは、オブジェクトの表示と同様です.

 var vm = new Vue({
            el:'#app',
            components:{
                'app-content': appContent
            },
            methods:{
                increaseNumber: function(){
                  //data의 num을 this로 받았다.
                    this.num = this.num + 1;
                }

            },
            data:{
                num: 10
            }
        });

ビューインスタンスを実行し、データのnumをコンソールに出力して、メソッドからnumを受信できる理由を検索します.
vue内部の動作により,データ中のnumがvueオブジェクトの真下にちょうど位置していることがわかる.