목록VueJs (51)
투케이2K

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

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

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

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

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

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

[개발 환경 설정] 개발 툴 : VS CODE 개발 언어 : Vue Js [소스 코드] name : {{ name }} reverse : {{ name.split('').reverse().join('') }} [결과 출력]

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

[개발 환경 설정] 개발 툴 : VS CODE 개발 언어 : Vue Js [소스 코드] {{ data }} One Two 선택: {{ picked }} [결과 출력]

[개발 환경 설정] 개발 툴 : VS CODE 개발 언어 : Vue Js [소스 코드] {{ data }} a b c 체크 한 값 : {{ checkedNames }} [결과 출력]

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

[개발 환경 설정] 개발 툴 : VS CODE 개발 언어 : Vue Js [소스 코드] {{ data }} 메뉴를 선택해 주세요 A B C 선택함: {{ selected }} [결과 출력]

[개발 환경 설정] 개발 툴 : 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 : 글로벌 변수를 선언합니다. 변수 명칭은 $변수명칭 을 지정합니다 // [애플리케..

[개발 환경 설정] 개발 툴 : VS CODE 개발 언어 : Vue Js [소스 코드] 네이버 이동 [결과 출력]

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

[개발 환경 설정] 개발 툴 : VS CODE 개발 언어 : Vue Js [그림 설명] C:\Users\tk\VueProject\test-project> npm install bootstrap --save [부트스트랩 5.0 참고 사이트] https://getbootstrap.kr/docs/5.0/getting-started/introduction/ 시작하기 세계에서 가장 인기있는 프레임워크인 Bootstrap으로 반응형, 모바일 우선 사이트를 jsDelivr와 스타터 페이지 템플릿을 통해 시작해보세요. getbootstrap.kr [main.js - 소스코드] // [main.js 설명] // 1. 애플리케이션 진입점으로 Vue 초기화, 폴더 , 전역, 컴포넌트 , 라이브러..

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

[개발 환경 설정] 개발 툴 : 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 : 글로벌 변수를 선언합니다. 변수 명칭은 $변수명칭 을 지정합니다 // [애플리케이..

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

[개발 환경 설정] 개발 툴 : VS CODE 개발 언어 : Vue Js [그림 설명] cmd 설치 명령어 : C:\Users\tk\VueProject\test-project> npm install vuex@next --save [store.js - 소스코드] // [store > store.js 설명] // 1. store : 모든 컴포넌트가 공유할 수 있는 싱글톤 방식의 데이터 저장소입니다 // 2. main.js 파일에서 시작점 진입 시 등록 필요 // [vuex import 수행 실시] import { createStore } from 'vuex'; // [store 데이터 설정 실시] const store = createStore ({ state: { // [변수들의 집합] n..