vue.js26 Vue CLI(command line interface) VUE CLI 란? vue-cli 는 기본 vue 개발 환경을 설정해주는 도구입니다. vue-cli 가 기본적인 프로젝트 세팅을 해주기 때문에 폴더 구조에 대한 고민, lint, build, 어떤 라이브러리로 구성을 해야되는지 webpack 설정은 어떻게 해야되는지에 대한 고민을 덜을 수 있 https://cli.vuejs.org/ vscode - 터미널 node 설치확인 node -v npm 설치확인 npm -v vue-cli 설치 npm install -g @vue/cli 설치확인 vue --version vue프로젝트 생성 vue create 프로젝트명 프로젝트 생성후 해당 프로젝트 폴더로 이동, 명령어를 이용하여 dev 서버를 실행 cd 파일명 npm run serve 설치완료 페이지 (local.. 2023. 4. 20. watch, computed 속성 데이터의 변화에 따라 특정 로직을 수행하는 속성 ex) 예시 num의 변화에 따라 log를 찍는 로직을 수행 캐싱 차이 : computed는 종속 대상을 따라 저장(캐싱) 된다. 해당 속성이 종속된 대상이 변경될 때만 함수를 실행. 즉 {{message}}의 경우 message가 변경되지 않는 한 computed 속성은 여러번 요청해도 계산을 다시 하지 않고 계산되어 있던 결과를 즉시 반환. 이에 반해 method를 호출하면 렌더링을 다시 할 때마다 항상 함수를 실행한다. computed : 계산해야 하는 목표 데이터를 정의하는 방식으로 '선언형 프로그래밍' 방식.validation, text, 연산에 적합 watch : 감시할 데이터를 지정하고 그 데이터가 바뀌면 함수를 실행하라는 방식의 '명령형 프로.. 2023. 4. 20. 템플릿 문법 화면을 조작하기 위한 vue.js 제공하는 문법 형식 : v- "" 안에는 js 문법이 들어올 수 있음 1. v-on : 엘리먼트에 이벤트 리스너를 연결 ** v-on:submit -> @submit 과 동일하다. 2. v-bind : 하나 이상의 속성 또는 컴포넌트 prop을 표현식에 동적으로 바인딩 형식 - v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름" ** v-bind 생략하고 :propsdata 과 동일하다. 3. v-model : 양방향 바인딩을 구현 4. v-if, v-else : if-else 구문과 동일. if, else두 개는 인접해 있어야 한다. 좋아요 눌렀음 like 5. v-for : 반복문 구현, v-if 와 같이 사용하지 않는다 - arrary/object는 자료.. 2023. 4. 20. 액시오스(Axios) 뷰에서 권고하는 Promise기반의 HTTP통신 라이브러리 자바스크립트 비동기 처리 패턴 (비동기처리에 사용되는 객체) 1. callback 2. promise (https://joshua1988.github.io/web-development/javascript/promise-for-beginners/) 3. promise + generator 4. async & await **promise - CDN방식 https://github.com/axios/axios:엑시오스 깃헙주소 - npm 방식 npm install axios 2023. 4. 20. 뷰 라우터 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리 페이지 이동 시 라우터를 이용해 구현할 수 있다. Router | Cracking Vue.js 뷰 라우터 뷰 라우터는 뷰 라이브러리를 이용하여 싱글 페이지 애플리케이션을 구현할 때 사용하는 라이브러리입니다. 뷰 라우터 설치 프로젝트에 뷰 라우터를 설치하는 방법은 CDN 방식과 NPM joshua1988.github.io - vue 가 먼저 선언되어야 한다 - Route 인스턴스 생성 - Vue 인스턴스 생성 - 인스턴스에 라우터 인스턴스를 등록 -> Root data에 $route가 잡힘 VueRouter의 routes 속성 : 페이지의 라우팅 정보가 배열로 들어감 배열안에는 라우팅 정보만큼 객체로 들어간다 [{path:'',component:''.. 2023. 4. 19. 같은 컴포넌트 레벨간의 통신 AppContent ->(event) -> Root -> (props) -> AppHeader 로 보내준다. 1) 버튼 클릭시 pass 이벤트가 넘어가는지 2) root에 data num이 잘 변경되는지 3) AppHeader에 props가 잘 넘어오는지 1. AppContent -> Root : event emit (pass가 올라옴) 2. Root 에 변경된 값 전달. 3. Root -> AppHeader : props로 값 전달 //3.여기에 pass이벤트가 올라옴 //5.상위 root에 넘어간 변경된 num 값 props로 전달받기 //4.pass 이벤트 받고 deliverNum실행 num값변경 2023. 1. 11. 이전 1 2 3 4 5 다음
