음악, 삶, 개발

모든 Component 들간에 하나의 저장소 Vuex npm mitt import mitt from 'mitt' const emitter = mitt() // listen to an event emitter.on('foo', e => console.log('foo', e) ) // listen to all events emitter.on('*', (type, e) => console.log(type, e) ) // fire an event emitter.emit('foo', { a: 'b' }) // clearing all events emitter.all.clear() // working with handler references: function onFoo() {} emitter.on..

v3.vuejs.org/guide/events.html#mouse-button-modifiers 우리는 마우스 이벤트 함수가 호출될때 마우스의 어떤 버튼이 눌렸는지 구분해야할때가 있다. 보통은 아래와 같이 구현을 한다. function mousedown(e) { if (e.button === 0) { /* left button */ } else if (e.button === 1) { /* middle button */ } else if (e.button === 2) { /* right button */ } } 마우스 이벤트 함수는 콜백 함수인데, 이때 인자로 event 객체를 넘기게 되고 이 event 객체의 button 프로퍼티를 사용하여 어떤 버튼이 눌렸는지..

v3.vuejs.org/guide/class-and-style.html 여기저기 손봐야할곳이 꽤나 있지만, 근사한걸 만든것같은 기분이다. 하나의 컴포넌트로 사용자가 던지는 props 에 따라, 라벨, 버튼, 토글 버튼 3가지의 모습을 가질수있다. 내부적으로 변수명이나 함수명의 변경이 조금 필요할것같다. 또한 버튼 type 이 label 인 경우 조금 구분되는 css 가 필요할것같다. 정말 많은것을 배웠다. 1. 다이나믹 event 바인딩 v-on:[state.eventName] ="toggleActive" 이게 필요한 이유는, 버튼 타입이 label 이거나 one 인 경우, 이벤트 리스너가 필요없기때문이다. 이때는 [ ] 안에 null 을 던지면 이벤트 리스너가 등록되지않는다. 2. 다..

www.npmjs.com/package/color npm i color

https://stackoverflow.com/questions/36993834/add-vue-js-event-on-window 위와 같이, 드래그를 시작하면, 창 바깥으로 나가도 드래그는 작동해야한다. drag 이벤트는 불행히도, drag & drop 을 위한 이벤트여서 mousedown, mouseup, mousemove 를 조합해야한다. 이때 중요한것은 @mousedown 만이 태그안에 들어가 호출되고, mousedown 이 되었을대, mousemove 과 mouseup 의 이벤트 리스너가 내가 만든 함수로 등록되고, mouseup 에서는 해당 리스너들을 다시 제거해주어야한다.

props 를 정의할때는 camelCase props 를 사용할때는 kebab-case 또한, props 를 설정하였다면 사용하기위해 반드시 setup(props) 와 같이 인자로 props 를 넘겨야한다. Hello World 로 정의후.. 에서 사용.

Hello World

reative 함수의 인자로 넘어가는 데이터는, 이 데이터의 어딘가가 변경되었을때, 해당 데이터를 사용하는 DOM 을 다시 랜더링하게 한다. click {{ state.value }}