투케이2K

[개발 환경 설정] ​ 개발 툴 : VS CODE 개발 언어 : Vue Js [그림 설명] ​ [global.js - 소스코드] ​ // [global > global.js 설명] // 1. 모든 컴포넌트가 공유할 수 있는 글로벌 영역 입니다 // [설정 수행 실시] ///* export default { install(Vue) { // [getSum 함수 설정] Vue.config.globalProperties.$getSum = function(one, two){ return one + two; } } } //*/ [main.js - 소스코드] ​ // [main.js 설명] // 1. 애플리케이션 진입점으로 Vue 초기화, 폴더 , 전역, 컴포넌트 , 라이브러리 등록 수행 실시 // 2. import..

[개발 환경 설정] ​ 개발 툴 : VS CODE 개발 언어 : Vue Js [main.js - 소스 코드] // [main.js 설명] // 1. 애플리케이션 진입점으로 Vue 초기화, 폴더 , 전역, 컴포넌트 , 라이브러리 등록 수행 실시 // 2. import App 을 사용해 최상위 App.vue 컴포넌트 지정 실시 // 3. createApp mount 를 사용해 index.html 파일 div id 값 설정 및 렌더링 시작점 지정 실시 // 4. router : 라우터는 웹페이지 간의 이동하는 방법 및 경로를 설정해주는 파일입니다 // 5. app.config.globalProperties : 글로벌 변수를 선언합니다. 변수 명칭은 $변수명칭 을 지정합니다 // [애플리케이션 생성 실시] im..

[개발 환경 설정] ​ 개발 툴 : VS CODE 개발 언어 : Vue Js [그림 설명] ​ [index.html - 소스 코드] ​ [FooterLayout.vue - 소스 코드] Footer Area [HeaderLayout.vue - 소스 코드] ​ Home Hello Main [HelloComponent.vue - 소스 코드] ​ {{ data }} [HomeComponent.vue - 소스 코드] ​ {{ data }} [MainComponent.vue - 소스 코드] ​ {{ data }} [index.js - 소스 코드] ​ // [router > index.js 설명] // 1. router : 라우터는 웹 페이지 간의 이동하는 방법 및 경로를 설정해주는 파일입니다 // 2. router..

[개발 환경 설정] ​ 개발 툴 : VS CODE 개발 언어 : Vue Js [방법 설명] ​ ​ ​ cmd 설치 명령어 : C:\Users\tk\VueProject\test-project> npm install vue-router@next ​ ​ [main.js - 소스 코드] // [main.js 설명] // 1. 애플리케이션 진입점으로 Vue 초기화, 폴더 , 전역, 컴포넌트 , 라이브러리 등록 수행 실시 // 2. import App 을 사용해 최상위 App.vue 컴포넌트 지정 실시 // 3. createApp mount 를 사용해 index.html 파일 div id 값 설정 및 렌더링 시작점 지정 실시 // 4. router : 라우터는 웹페이지 간의 이동하는 방법 및 경로를 설정해주는 파일..

[개발 환경 설정] ​ 개발 툴 : VS CODE 개발 언어 : Vue Js [소스 코드] ​ {{ msg }} {{ data }} 이벤트 함수 호출 [결과 출력] ​

[개발 환경 설정] ​ 개발 툴 : VS CODE 개발 언어 : Vue Js [그림 설명] ​ [소스 코드] ​ {{ msg }} {{ data }} [결과 출력] ​

[개발 환경 설정] ​ 개발 툴 : VS CODE 개발 언어 : Vue Js [소스 코드] ​ {{ msg }} {{ data }} [결과 출력] ​

[개발 환경 설정] ​ 개발 툴 : VS CODE 개발 언어 : Vue Js [소스 코드] ​ 이벤트 정상 수행 testMain 메소드 호출 [결과 출력] ​ ​ ​ ​ ​

[개발 환경 설정] ​ 개발 툴 : VS CODE 개발 언어 : Vue Js [소스 코드] ​ {{ msg }} {{ data }} 이벤트 함수 호출 [결과 출력] ​

[개발 환경 설정] ​ 개발 툴 : VS CODE 개발 언어 : Vue Js [소스 코드] ​ {{ msg }} {{ data }} 이벤트 함수 호출 [결과 출력] ​ ​ ​

[개발 환경 설정] ​ 개발 툴 : VS CODE 개발 언어 : Vue Js [소스 코드] ​ {{ msg }} TRUE 표시 FLASE 표시 이벤트 함수 호출 [결과 출력] ​ ​ ​

[개발 환경 설정] ​ 개발 툴 : VS CODE 개발 언어 : Vue Js [소스 코드] ​ {{ msg }} {{ data }} 이벤트 함수 호출 [결과 출력] ​ ​ ​

[개발 환경 설정] ​ 개발 툴 : VS CODE 개발 언어 : Vue Js [소스 코드] ​ {{ msg }} {{ data }} [결과 출력] ​

[개발 환경 설정] ​ 개발 툴 : VS CODE 개발 언어 : Vue Js [소스 코드] ​ {{ msg }} {{ data }} {{ value }} 이벤트 함수 호출 [결과 출력] ​

[개발 환경 설정] ​ 개발 툴 : VS CODE 개발 언어 : Vue Js [소스 코드] ​ {{ msg }} {{ data }} {{ index }} : {{ item }} {{ index }} : {{ item.name }} : {{item.age}} 이벤트 함수 호출 [결과 출력] ​

[개발 환경 설정] ​ 개발 툴 : VS CODE 개발 언어 : Vue Js [소스 코드] ​ {{ msg }} {{ value }} 버튼 [결과 출력] ​ ​ ​

[개발 환경 설정] ​ 개발 툴 : VS CODE 개발 언어 : Vue Js [소스 코드] ​ {{ msg }} [결과 출력] ​

[개발 환경 설정] ​ 개발 툴 : VS CODE 개발 언어 : Vue Js [소스 코드] ​ {{ msg }} {{ value }} {{ data }} {{ user.name }} {{ user.age }} {{ color[0] }} 이벤트 함수 호출 export default { name: 'MainComponent', // [부모에서 전달 받은 데이터 : 자식에서 동적 수정 불가능] props: { msg: String }, // [컴포넌트 생성 시 초기 데이터 설정 (리턴 값 지정)] data () { return { value: "Value", // [데이터 정의] data: "Data", // [데이터 정의] user: { // [데이터 정의] name: "투케이", age: 29 }, col..

[개발 환경 설정] ​ 개발 툴 : VS CODE 개발 언어 : Vue Js [소스 코드] ​ {{ log }} [결과 출력] ​

[개발 환경 설정] ​ 개발 툴 : VS CODE 개발 언어 : Vue Js [그림 설명] ​ ​ [App.vue - 소스 코드] ​ {{ log }} [MainComponent.vue - 소스 코드] ​ {{ msg }} {{ value }} {{ data }} 이벤트 함수 호출 [결과 출력] ​ [버튼 클릭 (전)] ​ ​ [버튼 클릭 (후)]