vue.js3 처음 시작하는 Vue.js(3), 뷰 HTTP 통신과 데이터 바인딩 HTTP : 브라우저와 서버간에 데이터를 주고받는 통신 프로트콜 뷰에서는 이를 지원하기 위해 axios를 리소스를 지원한다. 뷰 리소스 방식 프레임워크 목록 가져오기 뷰 리소스가 1.5.2 버전인 현재는 위와 같이 하면 에러가 발생한다. ES6문법에 맞춰 다음과 같이 사용하자. 더 직관적인가? 잘 모르겠다. 프레임워크 목록 가져오기 엑시오스 방식 프레임워크 목록 가져오기 Data 속성이 일반 문자열이 아닌 객체 형식이기 때문에 별도로 JSON.parse()를 사용할 필요가 없다. 데이터 바인딩 데이터 바인딩 : html 화면 요소를 뷰 인스턴스와 데이터에 연결하는 것을 의미한다. v-once : 뷰 데이터가 변경되어도 값을 바꾸고 싶지 않을 때 사용함 v-bind : 아이디, 스타일, 클래스 등의 htm.. 2019. 9. 14. 처음 시작하는 Vue.js(2) 뷰 라우터 중첩 라우터부터 네임드 뷰까지 라우팅 라우팅이란 웹 페이지간의 이동 방법을 말한다. 라우팅은 현대 웹앱 형태 중 하나인 싱글 페이지 에플리케이션에서 주로 사용된다. 싱글 페이지 에플리케이션이란 서버에 웹 페이지를 요청하지 않고, 미리 해당 페이지를 받아 놓고 이동시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 어플리케이션을 말한다. 뷰 뿐만 아니라 리엑트, 엥귤러는 모두 라우팅을 이용한 화면 전환을 지원하고 있으며 Fouc 현상이 일어나지 않아 화면을 더 빠르고 매끄럽게 전환할 수 있다. Route 예제 : 페이지 이동 태그, 화면에서는 태그로 치환된다. 페이지 표시 태그, 변경되는 url에 대한 해당 컴포넌트를 뿌려준다. $mount() : el 속성과 같이 인스턴스를 화면에 붙이는 역할을 한다. 생성하고 나서 $.. 2019. 9. 7. 처음 시작하는 Vue.js (1) Vue의 정의와 뷰 컴포넌트 Vue.js의 특징 MVVM 패턴을 사용(비즈니스 로직이나 백엔드 로직으로 분리 사용) Vue.js는 컴포넌트 기반 프레임 워크이다. 코드를 재사용하기 쉽고 코드를 직관적으로 파악할 수 있다. 양방향 데이터 바인딩 (화면에 표시되는 값과 프레임 워크의 모델 데이터 값이 동기화 됨) 데이터 전달할 때 항상 상위 컴포넌트에서 하위 컴포넌트 방향으로만 전달함. Vue.js의 기본적인 구조 new Vue()인스턴스를 생성할 때 Vue를 생성자라고 한다. 생성자란 객체를 새로 생성할 때 자주 사용하는 옵션과 기능을 미리 특정 객체에 저장해 기능 확장을 도와준다. {{ message }} 뷰 인스턴스의 라이프 사이클 beforeCreate : 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계 da.. 2019. 8. 31. 이전 1 다음
