728x90 반응형 v-on2 Vue.js 링크 처리: v-bind / v-on 용도 추가 {{str1}} link1 link2 link3 link4 vue 객체에 링크를 저장하는 경우 v-bind:href = '링크 변수' 꼴로 가져와야 한다. 그리고 v-bind는 생략이 가능하다. :href, :src, :width 같은 속성만 놓치지 않고 사용해도 무방하다. v-on의 경우, 마우스 이벤트를 저장한다. 디렉티브를 사용하여 DOM 이벤트를 듣고 트리거 될 때 JavaScript를 실행할 수 있습니다. 라고 vue.js 한국어 포럼에 친절히 나와있다. mouseenter : 마우스가 해당 개체를 클릭하면 -> 이미지 크기를 변경 mouseleave : 마우스가 해당 개체 밖을 클릭하면 -> 이미지 사이즈 원상 복구 mouseenter 상태로 펭수를 좀더 크고 귀엽게 감상할 수 있게 되었다. 2022. 6. 9. 19:49 Vue.js 객체할당과 이벤트 1: mount / destroy / v-on {{a1}} 값 변경 처음 페이지 로드하면 이렇게 버튼 클릭하면 이렇게 값이 바뀐다. destroy 후 mount 바로 불러내서 할당이후까지 초장에 로그가 찍히는데 앞에 mount후 destroy까지만 남겨두면 destroy 되어 버튼을 사용할 수 없어짐 v-on에 setValue 를 넣어놓으면 위에 methods에서 만들어 둔 function을 자동으로 불러온다 vue객체가 관리할 요소들이 만들어지기 전 / 만들어지고 나서 / html 태그 객체 할당 전후 / 업데이트 전후 / destroy전후 등 다양한 타이밍에서 벌어질 이벤트 함수를 지정할 수 있다. 이번에는 콘솔에 디버그문구를 찍어보는 형태로 만들었지만, 기능을 개발하고 각 타이밍에 맞게 삽입하는 응용형태의 개발도 가능할 듯 하군. 2022. 6. 4. 19:10 이전 1 다음 728x90 반응형
