전체 글83 Vue.js의 특징 및 뷰 인스턴스 Vue의 장점 배우기가 쉽다. (리액트는 ES6, JSX를 앵귤러는 타입스크립트, ES6 등 더 많은 학습 필요) 리액트와 앵귤러에 비해 성능이 우수하고 빠르다. 리액트의 장점(가상 돔 기반 렌더링 특징)과 앵귤러의 장점(데이터 바인딩 특성)을 가지고 있다. Vue의 특징 MVVM 패턴 : 모델 - 뷰 - 뷰 모델로 구조화하여 개발하는 방식 View : 사용자에게 보이는 화면 DOM : HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 틜 DOM Listener : 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치 Model : 데이터를 담는 용기, 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장 Data Binding : View에 표.. 2022. 5. 10. Vue 인스턴스 만들기, 데이터와 메서드 Vue.js 인스턴스 만들기 모든 vue 앱은 Vue함수로 새 Vue 인스턴스를 만드는 걸로 시작한다. Vue의 디자인은 MVVM 패턴을 부분적으로 영감을 받았다고 한다. MVVM(model-view-viewmodel, MVVM)은 하나의 소프트웨어 아키텍처 패턴으로 GUI 코드로 구현하는 그래픽 사용자 인터페이스의 개발을 비즈니스 로직 또는 백-엔드 로직(모델)로 분리시켜서 뷰가 어느 특정한 모델 플랫폼에 종속되지 않도록 해준다. 아직, 무슨 소리인지 모르겠다.. var vm = new Vue({ //옵션 }) Vue 인스턴스를 참조하기 위해 관례적으로 vm(ViewModel의 약자)을 변수로 사용한다. Vue 인스턴스를 생성할 때는 options 객체를 전달해야 한다. data : object | F.. 2022. 5. 6. 사용자 입력 핸들링(v-on, v-model), 컴포넌트 v-on:click 과 @click {{ msg }} 메세지 뒤집기 메세지 뒤집기 버튼에 v-on:click="reverseMessage" 혹은 @click="reverseMessage"를 입력하면 click 시에 methods에서 reverseMessage의 함수가 실행하여 msg를 뒤집어준다. 리액트에서 함수형 컴포넌트로 배우고 this를 클래스형 컴포넌트 잠시 배울 때 써본 게 다라서 this의 개념이 부족하다. this와 바인딩 더 알아보기!! v-movel Vue는 양식에 대한 입력과 앱 상태를 양방향으로 바인딩하는 v-model 디렉티브를 제공한다고 한다. 위 코드블록에서 input태그 안에 v-model="msg"가 있는데 script의 data()에 msg를 가져오는 듯 하다. 컴포넌트를 .. 2022. 5. 5. Vue.js 시작하기(조건문과 반복문 v-if, v-for) Vue.js 란 무엇인가요? Vue는 웹을 개발하는 프레임 워크 중 하나라 한다. React, Vue, Angular 3대장 중 하나로 Vue.js가 배우기 쉽다고 한다. HTML과 Javascript의 기본에 가장 가깝기 때문에, 가장 친숙하다. Vue.js를 시작하는 것은, 당신의 HTML 문서에 하나를 추가하는 정도. 복잡한 어플리케이션을 위해서는, 더 복잡한 프로젝트 설정 .vue 파일들을 다룰 줄 알아야한다고 한다. // vue 초기 폴더 생성 vue create hello-world // 실행하면 브라우저에서 프로젝트 매니저를 이용할 수 있다. vue ui vue3가 최신에 나왔지만 안정적인 측면에서 vue2를 이용해 프로젝트를 이용하자. ui로 프로젝트를 만들게 되면 로컬호스트에서 이런 대시.. 2022. 5. 5. 이전 1 2 3 4 ··· 21 다음
