본문 바로가기

Frame-Work/Vue-JS8

3. Vue js - v-for 반복문 - 리스트 렌더링 ㅁ v-for는 반복적인 HTML 요소에 사용함 ㅇ 기존 HTML 태그 - 하드코딩 적용 짜장면 짬뽕 우동 울면 기스면 ㅇ 현재 HTML 태그 - v-for 반복문 적용 {{반복문이름}} export default { name: 'App', data() { return { 메뉴들 : ['짜장면', '짱뽕', '우동', '울면', '기스면'], // v-for(반복문) 배열 데이터 저장 } }, components: { } } ㅁ 반복문 이름 2개 사용 {{반복문이름}} 현재 이 반복문 이름을의 고유키를 붙여서 사용함 *중요 : 반복문고유key는 숫자만큼 반복함 0,1,2,3,4,5,6,7,8 ++ ㅁ v-for 적용 메뉴 예시 ㅇ 기존 HTML 하드코딩 메뉴 기존 HTML 하드코딩 수박 1만원 딸기 2만.. 2021. 4. 27.
2. Vue js - HTML 태그 안에 데이터 바인딩 ㅁApp.vue 프로젝트 생성시 기본구 ㅁ 데이터 바인딩 1. 기본구 export default { name: 'App', components: { HelloWorld } } 2. 데이터 저장소 만들기 name: 'App', data() { // 데이터 저장소 추가 return { // 리터 안에 숫자 : 1, // 오브젝트 형식 { key : value } 데이터 만듬 한글 : '가나다라마바사', // 문자열 ' ' 따옴표 안에 문자열 컬러 : 'color : blue', // HTML 태그 안에 데이터 바인딩 배열 : ['배열1번은0번', '배열2번은1번', '배열3번은2번'], // 배열 데이터 바인딩 } }, components: { HelloWorld } } 3. 데이터 저장소에 저장한 데이터 .. 2021. 4. 23.
1. vue js 설치, 실행, 프로젝트 생성, IE실행(Vue2, Vue3는 IE실행 안됨) 1. node js 설치 방법 3가지 첫번째 CDN을 통해서 Vue.js 설치 *CDN 컨텐트 딜리버리 네트워크 = 내 위치에서 가장 까운 IDC서버에 연결 속도 빠름 두번째 NPM을 통해서 Vue.js 설치 *NPM 노드 패키지 관리자 *NPM은 웹 개발에 필요한 라이브러리 사용할때 사용함 nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 세번째 Vue CLI를 사용하여 Vue.js 설치 *CLI(커맨드 라인 인터페이스) 명령어를 통해서 설치 Vue CLI는 Vue 프로젝트를 한큐에 설치 할수 있게 도와주는 핫도구 마지막 Node.js를 사용해서 NPM과 Vue .. 2021. 4. 23.
https://kr.vuejs.org/ kr.vuejs.org/ 2021. 4. 22.