음악, 삶, 개발

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 로 정의후.. 에서 사용.

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

lodash 4.17.15 npm i lodash {{ v }}

Build A Collapsible Tree Menu With Vue.js Recursive Components Creating a Recursive Tree Component in Vue Vue and Recursive Components 트리 뷰 Example github.com/mikerodham/vue-dropdowns/blob/master/Dropdown.vue Dropdown 메뉴란 하나 메뉴를 기준으로 여러개의 하위 메뉴를 갖는 UI 이다. 우리가 사용하는 모든 프로그램들에 Dropdown 메뉴는 매우 필수적이며, 이를 Vue 를 사용하여 구현해보자. Dropdown 메뉴를 구현하기위해서는 우선적으로 이를 데이터로 표현해..

Event Reference (반드시 읽어볼것!) Lee : 추후 이 포스팅은 계속 업데이트되어야합니다. (현재 2020.11.25) 위의 공식문서를 보면, 이벤트가 너무너무 많다. (넉넉잡아 1000개 정도?) 문서를 보며 중요한 부분을 찾아 정리하도록 하자. 사용자의 마우스나 키보드로부터 오는 입력을 Event 라고한다. 하지만 마우스만이 이벤트는 아니다. 창을 닫는것도, 창을 여는것도, 동영상 재생을 시작하는것도 이벤트다. 우리는 이 이벤트 가 발생했을때 특정 기능을 수행하기를 원한다. 이는 다시 말해 나의 함수가 호출되기를 원한다. Vue 는 놀라울만큼 직관적이다. 아래와 같이 작성할수있다. 아래는 cl..

v3.vuejs.org/guide/component-props.html 우리가 어떠 Component 를 만들었지만, 이 Component 로 생성된 각 Instance 의 모습이 약간씩 틀리기를 바랄수있다. 사과 한상자를 샀는데 사과의 모양이 조금씩 틀린것처럼 말이다. 하나의 Component 안에서 기본적 속성은 공유한채 약간은 틀린 offset 을 주고자할때 사용하는것이 props 이다. props 는 사용자 정의 속성이다. 내가 만든 Component 를 부모 Component 에서 사용할때, 해당 태그에 속성으로 사용할수있는것이다. Juce 에서 우리가 Component 를 만들었을때, Constructor 에 인자를 넘기는것과 유사한 방..

Vue 을 공부하게되면서 다행인것은, 내가 Vue 3 가 나오고나서 공부를 시작했다는것이다. Vue 3 가 Vue 2 보다 어떠한 점이 좋아졌는지에 대해 잘 설명한 블로그를 첨부한다. Vue 3 의 변경점 정리 : 무엇이 바뀌나요? 위의 글을 읽으면, Vue 3 의 기능에 대해서도 다시금 정리해볼수있을것이다.