eunas blog

v-bind v-bind를 이용하여 화면에 보여지는 데이터 뿐 아니라 태그의 id값, calss의 name 등 전체적인 DOM에 대한 정보까지도 Reactivity하게 관리할 수 있다. v-if 특정 조건에 따라 태그 제어 가능 v-show v-if와 유사하다. v-if와의 차이점? false일때, v-if는 DOM을 아예 제거하여 태그를 없애고 v-show는 style을 입혀 display:none처리함 {{ num }} {{ doubleNum }} Loading ... test user has been logged in Loading ...

{{ num }} {{ doubleNum }}

Axios? Vue에서 권고하는 HTTP 통신을 위한 라이브러리 - promise 기반. API가 다양하다. (참고 - 자바스크립트 비동기 처리 패턴 callback > promise > promise + generator > async & await) 오픈 API를 이용한 axios 테스트 get user {{ users }} 참고

태그가 라우팅 된 정보를 뿌려주는 역할을 한다면 는 그 정보를 볼 수 있게 링크를 제공하는 역할. 태그로 변환되어 보인다. (개발자는 직접 url에 쳐서 테스트를 할 수 있지만, 사용자는 link를 통하여 화면이 전환이 되어야하므로) Login Main Login Main 화면

참고

라우터(Router) 뷰 라이브러리를 이용하여 싱글 페이지 어플리케이션(SPA)을 구현할 때, 사용하는 라이브러리

같은 컴포넌트 레벨 간의 통신 방법 - 상하위 간 컴포넌트 통신이 아닌, 같은 레벨 컴포넌트 간의 통신은 어떻게 해야할까? 같은 레벨끼리는 바로 통신할 수 없으니, 상위 컴포넌트인 Root로 올리고(event), Root에서 내려야한다(props). [Root] [AppHeader] ← [AppCotent] {{ str }}

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 } ]

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

export default { name : 'ReverseData', data() { return { msg : '퇴근,,하고싶다', isDone : false, }; }, computed : { reversString() { console.log("computed 실행합니다."); return this.msg.split('').reverse().join(''); } }, methods : { changeMsg() { console.log("method 실행합니다."); if(this.isDone) this.isDone = false; else this.isDone = true; } } }; p { padding : 10px; text-align: center; font-size : 20px; } but..