목록vue (47)
투케이2K
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bLPTks/btsngJoVnWo/kFCT5yW5vgq5qo7KrbGYFk/img.png)
[개발 환경 설정] 개발 툴 : VS CODE 개발 언어 : Vue Js [소스 코드] {{ message }} [결과 출력]
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/MrGyy/btrI1Wus3CO/92IKmbDFHGWkOvyDzFzcok/img.png)
[개발 환경 설정] 개발 툴 : VS CODE 개발 언어 : Vue Js [소스 코드] {{ log }} 길이 : {{ log.length }} [결과 출력]
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/CyKkC/btrI4UvnCri/D3Uoxp0uWn0veaT1MO3hi0/img.png)
[개발 환경 설정] 개발 툴 : VS CODE 개발 언어 : Vue Js [소스 코드] {{ log }} [결과 출력]
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/ckXYTb/btrILeolS2Z/7B370yX19u087OFTTrV7PK/img.png)
[개발 환경 설정] 개발 툴 : VS CODE 개발 언어 : Vue Js [소스 코드] {{ item }} [결과 출력]
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cXIWPG/btrIzEnzMep/kRO8NvmlEEXHQfh5uHoKRk/img.png)
[개발 환경 설정] 개발 툴 : VS CODE 개발 언어 : Vue Js [소스 코드] {{ item }} [결과 출력]
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bFzg4s/btrIA2aGAUw/wzJTaQUQFhuxjOVkQqgCd1/img.png)
[개발 환경 설정] 개발 툴 : VS CODE 개발 언어 : Vue Js [소스 코드] {{ item.addr }} [결과 출력]
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/noBoA/btrHBBctW4s/kJHikoBbUWa2NuqrjL7zNK/img.png)
[개발 환경 설정] 개발 툴 : VS CODE 개발 언어 : Vue Js [소스 코드] name : {{ name }} reverse : {{ name.split('').reverse().join('') }} [결과 출력]
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/I74Um/btrHwkpijTo/Xw8ZJ6LlgilZ75g4n2AUf1/img.png)
[개발 환경 설정] 개발 툴 : VS CODE 개발 언어 : Vue Js [소스 코드] {{ name }} {{ userInfo }} [결과 출력]
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/PEfpI/btrHzo5LvRY/spOVi3M2bOH45KKWyBaA7K/img.png)
[개발 환경 설정] 개발 툴 : VS CODE 개발 언어 : Vue Js [소스 코드] {{ data }} One Two 선택: {{ picked }} [결과 출력]
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/PSJpi/btrHsEPkjrk/cT9Kb4jgXNvhJccKmRH5U1/img.png)
[개발 환경 설정] 개발 툴 : VS CODE 개발 언어 : Vue Js [소스 코드] {{ data }} a b c 체크 한 값 : {{ checkedNames }} [결과 출력]
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b0OF3M/btrHwl2h0Sm/Q6kN3TjioK6Xhjj54clsuK/img.png)
[개발 환경 설정] 개발 툴 : VS CODE 개발 언어 : Vue Js [소스 코드] [결과 출력]
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dOvPhM/btrHoHswZKp/CJMY57hxjiOaEiLsAVKTnK/img.png)
[개발 환경 설정] 개발 툴 : VS CODE 개발 언어 : Vue Js [소스 코드] {{ data }} 메뉴를 선택해 주세요 A B C 선택함: {{ selected }} [결과 출력]
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bC5ucZ/btrHrwJlQE8/deIIHWOVckpqdJ4O1y5XM0/img.png)
[개발 환경 설정] 개발 툴 : 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 : 글로벌 변수를 선언합니다. 변수 명칭은 $변수명칭 을 지정합니다 // [애플리케..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bxsirp/btrFNGAsDuf/1DYWWvqF0OMHQuout4YFUK/img.png)
[개발 환경 설정] 개발 툴 : VS CODE 개발 언어 : Vue Js [소스 코드] 네이버 이동 [결과 출력]
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bffAKU/btrEjUGLyKv/e73seR1qcctYx9DSsPz6SK/img.png)
[개발 환경 설정] 개발 툴 : 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 : 라우터는 웹페이지 간의 이동하는 방법 및 경로를 설정해주는 파일입니다..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/6ilHZ/btrDOxrl1hj/uwFPyg902D6LXol11ng5h0/img.png)
[개발 환경 설정] 개발 툴 : 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 초기화, 폴더 , 전역, 컴포넌트 , 라이브러..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/xSSZt/btrDGcJDXcE/5VRLL2DpJPQjsPvdPO9sK1/img.png)
[개발 환경 설정] 개발 툴 : 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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/rT2Rh/btrDKKd4Abx/SMzx3k9wQX78nkQNyECYBk/img.png)
[개발 환경 설정] 개발 툴 : 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 : 글로벌 변수를 선언합니다. 변수 명칭은 $변수명칭 을 지정합니다 // [애플리케이..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/pZt3j/btrDGL49XgV/IeZnBkyrb9rcowcDkTkuvK/img.png)
[개발 환경 설정] 개발 툴 : 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 : 라우터는 웹페이지 간의 이동하는 방법 및 경로를 설정해주는 파일입니다 // ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b2hfsc/btrDIniYkfe/JEeltTmLz8bjRKHgRzTLbK/img.png)
[개발 환경 설정] 개발 툴 : 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..