GO CAN DO IT

이번에는 $ vue create vue-form $ cd vue-form $ npm run serve 명령어를 통해 vue-form 패키지를 만들고 작업을 해주었다. 새로 작성한 App.vue 소스는 다음과 같다. // App.vue id: pw: login 여기서 추가적으로 event.preventDefault() 는 기본적으로 과거 자바스크립트에서 사용되었던 문법이고, Vue에서는 form 태그의 submit 속성값으로 prevent를 넣어줄 수 있다. // event.preventDefault()를 주석처리 submitForm : function () { //event.preventDefault(); console.log('username' + this.username); console.log('p..

App.vue 파일을 활용해서 한번 화면에 데이터를 뿌려보도록 하자. 기존에 html 소스 안에서 뷰 인스턴스를 생성했던 방법과는 아주 조금 다르다. 코드를 통해 알아보자 {{str}} #1. 싱글 파일 컴포넌트에서 html 을 선언할 때는, 가장 상위에 div 태그를 하나 선언하고 , 그 안에 header던, body던 생성을 해줘야 한다. #2. 기존에 html 파일에서 뷰 인스턴스 객체를 선언하고 주입해주었던 방식 #3. 싱글파일 컴포넌트에서는 이런식으로 변수를 선언해주면 안되고 #4. 방식으로 선언을 해주어야 한다. 그 이유는, 여러 객체들의 재사용성을 높이기 위함으로 변수를 함수형으로 선언하고 , 해당 값을 리턴해주는 형태로 사용한다. #싱글파일 컴포넌트 체계에서 컴포넌트 등록하기 컴포넌트를 등..

Vue CLI 를 사용하기 위해서 https://cli.vuejs.org/guide/installation.html 에 접속해서 명령어를 확인하고, 비주얼 스튜디오 코드에서 터미널을 열어 해당 명령어들을 실행해준다. npm install -g @vue/cli # OR yarn global add @vue/cli 뷰 버전이 4가 넘어가면 defaule( ver2) 로 설정해주어야 한다. 🎉 Successfully created project vue-cli. 👉 Get started with the following commands: $ cd vue-cli $ npm run serve gayoung@yungayeong-ui-MacBookAir learn-vue-js-master % cd vue-cli gay..

watch는 뷰 인스턴스의 어떤 데이터가 변경되면 이를 감지해주는 기능이다. 뷰 인스턴스 내 watch를 선언하고 어떤 변수를 watch 할 것인지, 어떤 행위를 할 것인지 정해주면 된다. 코드로 알아보자. {{num}} increase 이 코드는 아래와 같이 실행된다. 버튼이 눌릴 때마다 num값이 증가하고, num값의 변화를 watch가 감지하고 있다가 콘솔로그를 출력한다. computed 와 watch 둘 다 특정 데이터가 변경되면 실행되는 속성이라는 점은 같지만, 뷰 공식문서에서는 watch보다 computed를 사용할 것 을 권장하고 있다. 캐싱이나 튜닝이 더 잘되어 있기 때문이다. Vue does provide a more generic way to observe and react to dat..

뷰에서 데이터를 화면에 표시하는 방법은 두가지가 있다. 데이터 바인딩과 디렉티브! 코드로 알아보자. {{num}} {{doubleNum}} //# 3. 클래스 바인딩 v-if Loading.. test user has been logged in Loading..2 #1. bind 방식 : {{}} 태그 안에 변수 주입을 통해 데이터를 표현하는 방법 #2. 디렉티브 방식 : v-bind: Api를 활용하여 id값에 뷰 인스턴스의 데이터 변수값을 주입하는 방식. : v-bind:class , v-bind:id 등 속성값들을 인스턴스의 변수를 통해 관리할 수 있다. #3. 클래스 바인딩 : 뷰 인스턴스의 변수값에 조건을 부여하여 속성들을 관리하는 방식. if 와 show 의 차이점은 - if : 조건에 해당하..

#axios란 axios란 , ajax처럼 비동기 애플리케이션 개발을 위한 HTTP 통신 라이브러리이다. 과거 Vue 커뮤니티에서 공식적으로 쓰이고 있던 Vue Resource를 대신하여 현재 가장 널리쓰이고 있는 라이브러리이다. https://github.com/axios/axios GitHub - axios/axios: Promise based HTTP client for the browser and node.js Promise based HTTP client for the browser and node.js - GitHub - axios/axios: Promise based HTTP client for the browser and node.js github.com 여기에 들어가면 해당 라이브러리를 ..

#뷰 라우터 인스턴스 생성 및 뷰 인스턴스에 연결 아래와 같이 vue 인스턴스에 $route 변수가 주입된 걸 확인할 수 있다. #라우터가 표시되는 영역 라우터 인스턴스에 /login 과 /main url 및 url에 대응하는 컴포넌트 명을 선언해주었다. 만약 해당 url 이 호출 될 경우, 태그 영역에 해당 컴포넌트들이 주입이 될 것이다. 해당 소스 실행 결과는 다음과 같다. 1). http://127.0.0.1:5500/playground/router.html#/login url을 호출 한 경우 2). http://127.0.0.1:5500/playground/router.html#/main url을 호출 한 경우 #라우터 링크 아래와 같이 라우터 링크를 추가해주면 이런식으로 이동 링크를 제공해준다...

위에서 아래로는 프롭스, 아래서 위로는 이벤트를 발생시켜 컴포넌트간에 통신을 했다. 그러면 같은 레벨의 컴포넌트 사이에 통신은 어떤식으로 이루어질까? - Root - AppHeader - AppContent 이런식의 레벨 구조를 가진 컴포넌트일 때, AppHeader 컴포넌트와, AppContent간의 통신을 구현해보자 데이터 통신의 방식은 다음과 같다. 1. AppContent에서 Root로 event로 데이터 전달 2. Root에서 AppHeader로 데이터 전달 결과물은 다음과 같다. 1. AppHeader의 propsData에 값이 잘 들어감 2. Root의 데이터에도 값이 잘 들어감 해당 포스팅은 인프런의 Vue.js 시작하기 - Age of Vue.js 학습 후 정리한 내용임을 알려드립니다.

뷰에서 컴포넌트 통신은 아래와 같은 구조를 가진다. 상위에서 하위로는 데이터를 내려주는 프롭스 속성, 하위에서 상위로는 이벤트를 올려주는 이벤트 발생 이러한 통신 규칙이 필요한 이유는, 기존의 MVC 패턴에서처럼 데이터가 N방향 통신을 하는 경우, 데이터의 영향이 컴포넌트 간에 복잡하게 영향을 미치기 때문에 데이터의 흐름을 추적하기 어렵기 때문이다. 뷰의 컴포넌트 통신규칙을 지킨다면 데이터의 흐름을 추적하기 쉽다!! #Props(상위에서 하위컴포넌트로 전달되는 데이터) 아래의 예시를 통해서 컴포넌트간의 통신(상위 to 하위)가 어떻게 이루어지는지 보자. 첫번째로 Vue 인스턴스 생성 시 data 속성값을 설정해준다. new Vue({ el : '#app', components : { 'app-header..

뷰 컴포넌트란, 화면에서 영역을 구분하여 개발할 수 있는 뷰의 기능이다. 각각 구분된 구분을 컴포넌트라고 부른다. 컴포넌트는 오른쪽 그림처럼, 컴포넌트들이 생성되면 컴포넌트'간'의 관계가 생긴다. #전역 컴포넌트 1. 뷰 인스턴스를 생성하면 가장 먼저 Root 컴포넌트가 생긴다. 2. 아래와 같이 헤더, 컨텐츠 컴포넌트를 생성해준다. 3. 결과물 위와 같이 AppHeader 컴포넌트와 AppContent 컴포넌트라는 전역 컴포넌트가 생긴 것을 확인할 수 있다. #지역 컴포넌트 뷰 인스턴스 생성 후 Vue.component('컴포넌트명', 컴포넌트 내용)으로 속성을 추가해주는 것이 아니라, 인스턴스 생성 시점에 컴포넌트 속성을 정의해 줄 수 있는 방법도 있다. 지역 컴포넌트 footer가 생성된 것을 확인..