root componnt 의 num 이 바뀌었을 때 그 값이 바뀐 상태로 아래에 전달이 되고
전달이 되는 값이 바로 화면에 반영되어서 그려지는 것이 reactivity 이다.
var appHeader = {
template: '<button v-on:click="">click me</button>'
}상위 컴포넌트로 데이터 전달 하고 싶을 때 : event 사용하면 됨
event 사용하는 방법 => v-on:click ="메소드 이름"<app-header v-on: 하위컴포넌트에서 발생한 이벤트 이름 = "상위 컴포넌트의 메소드 이름"> </app-header>
같은 레벨에서의 컴포넌트끼리는 어떻게 통신하는지
Root 에 event 로 데이터를 올리고
Root 에 있는 데이터를 props 로 내려줘야한다
같은 텍스트 선택 단축키 Ctrl +d
emit
emit 은 다른 컴포넌트에게 이벤트를 전달하기 위해 사용할 수 있다.
예를 들어 자식 컴포넌트에서 사용자 지정 이벤트를 만들어 부모 컴포넌트에게 전달할 수 있다.
부모컴포넌트는 자식 컴포넌트에서 만들어진 사용자지정 이벤트를 받아 (v-on) 특정 동작을 수행할 수 있다.
// 자식 컴포넌트에서 이벤트를 선언
this.$emit ('update:foo', newCalue)올라온 데이터를 밑으로 내릴려면
v-bind : 프롭스 속성이름 ="상위 컴포넌트의 데이터 이름"
vue-router
싱글페이지 애플리케이션, 페이지간에 이동하는 기능을 구현할 때 사용하는 라이브러리
<router-link> Login </router-link>
<a href=""> Login </a>
<router-link> Main </router-link>
<router-view > </router-view> link 태그를 이용할 때 < a >(앵커태그 a) 에 있는 특정 링크로 이동하게 됨
router-link 태근느 라우터에서 페이지 이동을 위한 링크태그라고 보면 됨
라우터 링크 태그는 앵커태그로 변환되어서 나타나게 됨 < a href=""> < / a >
var router 에 옵션을 넣을 수 있음
routes : [
{ path : 페이지의 url , component: 해당 페이지로 이동했을때 뿌려질 컴포넌트를 연결하는 속성
여기에 들어가는 component 는 무조건 한개임 }
]
new Vue ({ 에 있는 conponents는 여러개 가능함 })mode : 'history' 라고 해주면 url 에 들어가는 # 없앨 수 있음
router-link 라는 태그와 to 를 사용하면 앵커태그에 href 속성으로 뿌려진다.
네비게이션 가드 블로그글
https://joshua1988.github.io/web-development/vuejs/vue-router-navigation-guards/
axios 란?!
vue 에서 권고하는 HTTP 통신 라이브러리
Promise 기반의 HTTP 통신 라이브러리이며, 상대적으로 다른 HTTP 통신 라이브러리들에 비해
문서화가 잘 되어있고 API 가 다양함
Ajax 란?!
비동기적인 웹 애플리케이션의 제작
Ajax 를 사용함으로써 router 같은 싱글페이지 구현이 쉬워짐
jQuery.ajax () 를 이용해서 데이터를 받아오고 수정하는 등의 기능을 많이 사용함
