Vue.js 노트(note)
- Nest
- Development
- Category
- Javascript
- Hit
- 625
- Star
- 0
Life cycle hooks
인스턴스나 컴포넌트에서의 라이프사이클 소개와 흐름도, 훅 소개
- https://kr.vuejs.org/v2/guide/instance.html#인스턴스-라이프사이클-훅
- https://vuejs.org/v2/api/#Options-Lifecycle-Hooks
nuxt.js
vue.js베이스로 만들어진 ssr 프레임워크
style guide
권장하는 코드 스타일 가이드
https://vuejs.org/v2/style-guide/
props attribute 값들 여러개를 동적으로 넘겨주기
<component/>와 같이 다이나믹 컴포넌트를 사용할때 props값도 다이나믹하게 변화하는데 이것을 대처할 수 있는 방법은 다이나믹하게 attributes값을 만들어야한다.
// template
<element v-bind="post"/>
// data
post = { foo: 'bar' };
와 같이 설정하면 해석을 하게되면 다음과 같은 코드로 하위 컴포넌트로 넘긴다.
<element v-bind:foo="post.foo"/>
https://kr.vuejs.org/v2/guide/components-props.html#Passing-the-Properties-of-an-Object
style scoped를 사용하는 컴포넌트에 스타일 셀렉터 사용하기
원래 scoped 처리된 컴포넌트 내부에 접근이 불가능하다. 그런 이슈가 나왔는지 해결해줄 수 있는 방법을 제공해줬다는것을 이제서야 알게되었다.
.a >>> .b {}
// scss 에서 번들링 오류가 나지 않는다.
.a /deep/ .b {}
.a::v-deep .b {}
출처
provide, inject 사용으로 자식 컴포넌트로 prop 전달하기
깊은(deep) 자손 컴포넌트로 prop 형태로 값을 전달할때 사용할 수 있는 함수다.
순간이동할 수 있는 별도의 터널과도 같다.