🚀 Package.json

必要なパッケージのリストをファイルに整理し、リストファイルを使用してコマンドを使用して必要なすべてのパッケージをインストールできます.これらの定義はまとめられています.

管理項目に依存する小包の書類.

必要なパッケージとバージョンを簡単に管理できる.

Package.jsonファイルの各情報は、基本的にはkey-valueで格納されている単一JSONオブジェクトである.

🚀 ライフサイクル

라이프 사이클(life cycle)イランビューインスタンスの生成と消失プロセス.

作成フェーズ

マウントフェーズ

アップグレード(修正)フェーズ

設計(消滅)段階

💻 Create

beforeCreate

ライフサイクルで最初に実行する.

data属性、methods属性はインスタンスで定義されていない.

構成部品がDOMに追加されていないため、DOMにアクセスするとエラーが発生する.

created

作成後に実行する段階.

data属性、methods属性が定義されているため、論理にアクセスして実行することができる.

💻 Mount

beforeMount

DOMに追加する前に実行したhook.

素子初期にデータを作成する必要がある場合、createdライフサイクルフックをレンダリングおよび変更する必要がある場合は、mountedライフサイクルフックを使用することができるので、あまり使用されないライフサイクルフックです.

mounted

DOMに追加して呼び出されるライフサイクルフック.

$elDOMにアクセスできます.

💻 Update

beforeUpdate

DOMが再レンダリングする前に呼び出されるライフサイクルフック.

更新後の値があるので、更新後の値で他の値を更新できます.

updated

DOM再レンダリング後に呼び出されるライフサイクルフック.

DOMは、更新後に呼び出されるHookであるため、変更後のDOMを用いて処理する際に使用される有用なHookである.

フック掛けと同様に、再レンダリングが完了することを保証する場合には、必ず$nextTickを使用します.

💻 Destroy

beforeDestroy

構成部品が除去される前に呼び出されるライフサイクルフック.

destroyed

エレメントが除去された後に呼び出されるライフサイクルフック.

素子の全てのイベントリスナー(@click、@change等…)と指導(v-model、v-showなど...)解除され、サブエレメントもすべて除去されます.

🚀 Props

親から子への情報伝達に使用props

使用

・v-bind親(親)のデータを動的にバインドして子(子)に渡すことができます.データが更新されるたびに、サブコンポーネントにデータが渡されます.

v-bind利用可能:ショートカットとして使用.

<UserDetail :nameOfChild="name"><UserDetail />

左から子へのprops変数名を宣言し、右から変数の値を記入する.
👉 UserDetail使用するnameOfChildこの引数は、親コンポーネントUserに親コンポーネントのnameを入れることを意味します.

📍UserDetail(サブアセンブリ)

<template>
	<p> {{ nameOfChild }} </p> 
</template>

<script>
export default {
	props: ['nameOfChild'], //부모컴포넌트에서 사용되는 변수명
    data() {
    	return {
         
    	}
   }
  }
</script>

サブアセンブリが親アセンブリからデータを受信する際にPropsを使用する.

array形式で発表される.