Vue 6

[Vue] 라우터(Router) 방식 (Nested Routers, Named Views)

1. Nested Routers 라우터 컴포넌트 안에 하위 컴포넌트를 중첩하여 구성 특정 URL에 지정된 하나의 컴포넌트가 여러 개의 하위 컴포넌트를 가짐 children 옵션 사용 2. Named Views 특정 URL에 같은 레벨의 다수의 컴포넌트를 '영역별'로 지정하여 렌더링 components 옵션 사용 현재 실무에서는 기본 라우터 형식이나, 1번 형식이 종종 보이는 듯 하다. 참고 router-link에 path말고, name값을 적어줄 수도 있다. 그럼 name이랑 매핑되겠지 .. ? User const routes = [ { path: '/user/:username', name: 'user', component: User } ]

📕 Language/Vue 2022.05.04

[Vue] 라우터(Router)

Vue js의 페이지 이동을 위한 라이브러리 : 페이지 이동할 때 url 변경되면, 변경된 요소의 영역에 컴포넌트를 갱신 - SPA의 특징 (단일 페이지 어플리케이션, Single Page Application) : 브라우저에 단 한번, 페이지 전체 로드. 이후에는 특정 부분만 Ajax를 통해 데이터 바인딩 - DOM을 새로 갱신하는 것은 아니다. router/index.js 라우터를 설정할 js 파일 - export default 처리하여 밖으로 내보내면서, router로 선언한다. - mode 속성을 이용하여 history 처리를 하면 url에 #이 제거 되어진다. - path는 대상 경로, name은 라우터에 이름을 부여(아래 예시에는 없음). component는 router-view 영역에 보여줄..

📕 Language/Vue 2022.05.04

[Age of Vue] Vue.js 시작하기 - 10. 인스턴스 옵션 속성

new Vue({ el : '#app' , //마운트 할 요소 template : '', data : {//객체 또는 배열로 지정 name : 'kea', message : 'hi' }, methods : { }, created : function() { }, watch : { } }); el : 인스턴스가 그려지는 화면의 시작점(특정 HTML 태그) template : 화면에 표시 할 요소 (HTML, CSS) data : 뷰의 반응성(Reactivity)가 반영된 데이터 속성 methods : 화면의 동작과 이벤트 로직을 제어하는 메서드 created : 뷰의 라이프 사이클과 관련된 속성 watch : data에서 정의한 속성이 변화했을 때, 추가 동작을 수행할 수 있게 정의

📕 Language/Vue 2022.05.01

[Age of Vue] Vue.js 시작하기 - 5. Reactivity 구현

앞선 HTML 문제점을 Vue 기능인 Reactivity를 이용하여 구현해보자 이러한 특성을 Vue의 Reactivity 즉, Vue의 반응성이라고 한다. str이 변했을 때, 계속하여 그 변한 값에 맞추어 데이터를 뿌리고 싶으면 defineProperty API의 set에서 div에 newValue를 innerHTML을 이용하여 셋팅해주면 된다. set: function(newValue) { console.log('할당', newValue); div.innerHTML = newValue; } 그럼 newValue가 변할 때 마다, 값이 자동으로 재할당되는 것을 볼 수 있다.

📕 Language/Vue 2022.04.27

[Age of Vue] Vue.js 시작하기 - 1. 개발 환경 설정

1. visual studio code 설치 https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications. code.visualstudio.com 2. node.js 설치 (LTS로 설치) htt..

📕 Language/Vue 2022.04.26
반응형