오늘 한 일:

• prestoMusic: VueJS를 이용해 웹 스킨 제작
  • single component
  • 컨트롤러 구현
  • viewHeader 컴포넌트 구현

내일 할 일:

• 뷰 별 UI 구현
  • 앨범, 리스트, 장르 등

prestomusic

More: 바깥영역 클릭 시 비활성화 시키기

펼쳐져 있는 상태의 엘리먼트 바깥을 클릭했을 시 비활성화 시키는 기능을 more 컴포넌트에 구현하였다. Closure를 사용해서 불필요한 변수 바인딩 없이, more 엘리먼트 내에서 해당 기능을 구현하였다

// more component
mounted() {
    const collapse = ({target}) => {
      if(target.contains(this.$el)) return;

      this.isActive = false;
    }

    document.body.addEventListener('click', collapse);
  }

vuejs

v-for

2.2.0 버전 이후로 v-for를 사용하기 위해서는 v-bind:key directives를 각 엘리먼트(또는 컴포넌트)에 사용해야 한다. key값은 당연히 unique. 번거로움을 줄이기 위해 다음과 같은 방법 사용

<Component
	v-for="(item, idx) in itemList"
    v-bind:key="idx"/>

$refs

vue instance의 ref속성에 같은 값이 들어가면 배열형태로 저장된다

<li v-for="item in itemList" ref=myItem/>

vm.$refs.myItem // array

$el

vue instance가 관리하고 있는 root 엘리먼트