728x90 반응형 Vue.js7 [Vue.js] @keyup.enter : 엔터 키를 눌렀을 때 코드 실행하기 @keyup.enter를 활용하면 jQuery로 구현할 때보다 더 간단하고 직관적이게 코드를 작성할 수 있다. # jQuery로 구현한 코드 # Vue.js로 구현한 코드 2024. 5. 21. [Vue.js] nextTick : 재렌더링이 완료될 때까지 기다린 후 실행하기 nextTick데이터가 바뀌어서 재렌더링될 때, 바로 DOM 요소로 접근하려고 하면 해당 요소를 제대로 찾지 못한다.이때 nextTick을 활용하면 재렌더링이 완료된 후에 코드를 실행하도록 처리할 수 있다. // 변수 'var1'이 변경되었을 때 실행되는 코드watch(var1, (newVal, oldVal) => { nextTick(() => { // 실행할 코드 });}); 2024. 5. 17. [Vue.js] @error : 이미지 에러 발생 시 기본 이미지로 표시하기 이미지 에러 발생 시 기본 이미지로 표시하기 e.target.src = defaultImg" alt="슬라이드 이미지"> 'imgUrl' 변수에 저장된 경로로 이미지를 가져왔을 때 에러가 발생한다면 해당 img 태그의 src 속성을 'defaultImg' 변수에 저장된 경로로 변경하여 기본 이미지를 띄운다. 2024. 5. 17. [Vue.js] v-bind : 유동적으로 class, id 지정하기 조건에 따라 class 토글하기 변수의 값을 class로 지정하기...... id는 v-bind:id나 :id를 사용하면 된다. 예시 1) 변수 값에 따라 클래스 지정하기 ...... 예시 2) foreach 문에서 특정 값에 따라 클래스 지정하기 2024. 5. 17. [Vue.js] v-cloak : 렌더링 되기 전까지 숨김 처리하기 Vue로 구현하다 보면 렌더링이 완료되기 전에 {{ }}가 보이거나, v-if나 v-show로 처리한 요소들이 보이는 경우가 있다.사내에서 확인할 때에는 크게 거슬릴 정도는 아니었는데, 속도가 좀 느린 환경에서 실행할 때에는 꽤 오래 보일 때가 있어서 해결 방법을 알아 보았다. v-cloak을 지정하기 전 v-cloak'v-cloak'은 Vue 처리가 완료되면 자동으로 삭제되는 디렉티브이다.이를 활용하여, Vue.js에서 해당 요소가 렌더링되기 전까지 요소를 브라우저에서 감출 수 있다. 1. 스타일 설정/* [ ] : 속성 선택자 *//* 'v-cloak' 속성을 가진 요소에 해당 스타일을 적용함 */[v-cloak] { /* 해당 요소를 숨김 */ display: none;} 2. 렌더링이 .. 2024. 5. 14. 이전 1 2 다음 728x90 반응형
