728x90 반응형 Vue.js12 Vue 여러가지 데이터 바인딩 문자열 데이터 바인딩 문자열은 '이중 중괄호'를 이용해서 데이터 바인딩 할 수 있다. Hello, {{title}}! raw(원시) HTML 데이터 바인딩 html 태그를 바인딩 할 때는 이중 중괄호 바인딩을 하면 안된다. html 태그가 아니라 문자열로 인식하게 되기 때문이다. html로 출력되게 하려면 v-html 디렉티브를 사용해야 한다. Form 입력 데이터 바인딩 input type = text input type=text의 경우 입력받은 텍스트는 value에 저장된다. v-model은 내부적으로 input type=text의 value 속성을 사용한다. data()에 정의한 데이터 키명을 v-model에 넣어주면, 양방향 데이터 바인딩 된다. //South Korea input type = n.. 2023. 7. 30. Vue 컴포넌트 기본 구조 컴포넌트 라이프 사이클 훅 beforeCreate created - 컴포넌트 생성 beforeMount mounted - 템플릿에 작성한 html 코드 랜더링 beforeUpdate updated beforeUnmount unmounted - 컴포넌트를 빠져나감 //view에 해당하는 html 코드를 작성 2023. 7. 30. Vue.js - Lazy Load 적용하기 (비동기 컴포넌트) 큰 프로젝트의 경우 Vue CLI로 빌드하여 소스코드가 하나의 파일로 합쳐지면, 초기 랜더링 시간이 오래걸려 사용자 경험을 해칠 수 있다. Vue.js 에서 Lazy Load는 리소스를 컴포넌트 단위로 분리 -> 컴포넌트 또는 라우터 단위로 필요한 것들만 그때 그때 다운 받을 수 있게 하는 방법이다. Vue CLI3부터 prefetch 기능이 추가되었다. prefetch는 미래에 사용될 수 있는 리소스(예: 비동기 컴포넌트)를 캐시에 저장하여, 사용자가 접속했을 때 리소스를 빠르게 내려조는 기능이다. but 비동기 컴포넌트로 정의된 리소스를 (사용하지 않을수도 있는데) 전부 캐시에 담는 비용이 발생한다. 별도 분리된 chunk 파일 마다 각각 request 가 일어나고... 각각 다운로드 받아서 캐시에 .. 2023. 7. 30. 라우팅 Vue.js에서의 라우팅이란...? Vue 와 같은 SPA의 경우 페이지를 이동할 때 서버에 요청해서 페이지를 새로 갱신하는 것이 아니라 클라이언트에서 미리 가지고 있던 페이지를 라우팅하여 화면을 갱신한다. 라우팅이란? 클라이언트에서 url 주소에 따라 페이지가 전환되는 것 Vue 프로젝트 내부에서는 미리 url 주소를 정의하고, 각 주소마다 Vue 페이지를 연결해 놓는다. 공식 플러그인인 vue-router를 이용해서 라우팅을 쉽게 구현할 수 있다. Vue-Router 설치 vue add router 2023. 7. 25. Vue 프로젝트 파일 구조 Vue 프로젝트 파일 구조 node_modules npm으로 설치된 패키지 파일 모음 public webpack을 통해 관리되지 않는 정적 리소스 모음 src/assets image, css, font 등을 관리 App.vue Root 컴포넌트 main.js 가장 먼저 실행되는 자바스크립트 파일. Vue 인스턴스 생성 babel.config.js 바벨 설정 package-lock.json 설치된 package의 dependency 정보 관리 package.json 프로젝트에 필요한 package를 정의하고 관리 2023. 7. 25. 이전 1 2 3 다음 728x90 반응형
