Vue 학습 Tree

graph LR
	Vue--->v("Vue시스템")
	  click v "<https://www.notion.so/2bbear/app-Vue-Vue-17b2d9567d8080d89ebfc9cc80b1f125?pvs=4>"
	subgraph sg1["Vue 시스템"]
		v-->구성
			  구성-->단일App구성
			  구성-->멀티App구성
			v-->LC("라이프 사이클")
				click LC "<https://www.notion.so/2bbear/Vue-7fed497d2c5a4429b4103e83eaedc81b?pvs=4>"
				LC-->AIC("활성 인스턴스 컨텍스트, this")
					click AIC "<https://www.notion.so/2bbear/Active-instance-context-17d2d9567d8080b383e5fbb929a4081b?pvs=4>"
			v-->TICK("틱 개념")
			v-->RE("반응형시스템")
				click RE "<https://www.notion.so/2bbear/Vue-ref-reactive-unref-toRef-toRefs-17e2d9567d80803e826bf04ccb5b26e7?pvs=4#17e2d9567d80809ca8e1d094ff18bf83>"
			v-->RD("렌더링시스템")
				click RD "<https://www.notion.so/2bbear/Vue-1812d9567d8080728620c78441d7deba?pvs=4>"
	end
 			
	Vue-->예제		
	subgraph sg2["예제"]
		예제-->간단예제
			click 간단예제 "<https://www.notion.so/2bbear/vue-Web-1102d9567d80805d88b0de4bd34cd327?pvs=4>"
		예제-->ModuleFederation
				click ModuleFederation "<https://www.notion.so/2bbear/Vue-Webpack-module-federation-1162d9567d8080c0bc23fae43c381d8a?pvs=4>"
	end		

	Vue--->C(사용자정의 컴포넌트)
		click C "<https://www.notion.so/2bbear/Vue-17b2d9567d80808199e4fb6f0e9cd9b3?pvs=4>"
	Vue-->CC5("빌트인 컴포넌트")
		click CC5 "<https://www.notion.so/2bbear/Vue-17b2d9567d80808199e4fb6f0e9cd9b3?pvs=4#17e2d9567d80803d8a4dc7f18e55058b>"
	subgraph sg3["컴포넌트"]
	  C-->C1("문법")
		  click C1 "<https://www.notion.so/2bbear/Vue-17b2d9567d80808199e4fb6f0e9cd9b3?pvs=4>"
			C1-->T("Template부")
				click T "<https://www.notion.so/2bbear/Vue-17b2d9567d80808199e4fb6f0e9cd9b3?pvs=4#17b2d9567d8080288ecafa109d40485e>"
				T-->T1("JSX 방식")
				T-->T2("Template 방식")
					T2-->BB("데이터 바인딩 문법")
						BB-->BB1("이중 중괄호 바인딩")
						BB-->BB2("HTML 태그 속성에 바인딩")
					T2-->BBB("빌트인 디렉티브 문법")
						BBB-->BBB1("기본 인자 방식")
						BBB-->BBB2("동적 인자 방식")
						BBB-->BBB3("prevent")
					T2-->BBBBB("커스텀 디렉티브")
						click BBBBB "<https://www.notion.so/2bbear/Vue-17b2d9567d80808199e4fb6f0e9cd9b3?pvs=4#17d2d9567d80806b9152c33bc9618e00>"
					T2-->BBBB("Vue용 Form 문법")
						
			C1-->S("Script부")
				click S "<https://www.notion.so/2bbear/Vue-17b2d9567d80808199e4fb6f0e9cd9b3?pvs=4#17b2d9567d808096920ddeefcf11eeb2>"
				S-->OptionAPI
				S-->CompositionAPI
			C1-->ST("Style부")
				ST-->ST2("Class바인딩")
				ST-->ST3(":style 바인딩")
			C1-->E("Event처리")
				E-->KEY("keyboard 마우스 처리")
				E-->HANDLE("이벤트핸들러 처리")
			C1-->D("DOM 접근 문법")
			C1-->CC2("컴포넌트용 문법")
			C1-->SN("로직 재사용")
				SN-->SN1("상태비저장계")
					SN1-->SN1N1("loadash")
					SN1-->SN1N2("date-fns")
				SN-->SN2("상태저장가능계")
					SN2-->SN2N1("컴포저블")
					SN2-->SN2N2("Mixin")
					SN2-->SM2N3("Plugin")
				SN-->SN3("전역상태저장계")
					SN3-->SN3N1("Pinia")
	C-->C2("정의방식")
		C2-->BU("Build 방식, SFC")
		C2-->BU2("컴파일 방식, JS Code")

		CC5-->GG1("애니메이션용")
		CC5-->GG2("캐시용")
		CC5-->GG3("DOM노드 이동용")
	end
  
			
	  

	  

• Note