vue34 JSFiddle에서 Vue 사용하는 방법 JSFiddle에서 Vue3 사용하는 방법 기존에 포스팅했던 게시글들 중 JSFiddle을 이용해 올린 Vue 코드들이 어느센가부터 동작하지 않는 것을 발견했습니다. JSFiddle이 기본 Vue 버전을 Vue3로 업데이트해서 생기는 오류같습니다. 기존에 인터넷에서 쉽게 찾을 수 있는 방법은 Vue2 방식으로, 수정된 자료는 많이 없어서 제가 한번 공유해보려고 합니다. 1. 업데이트된 방식 (Vue3) - 23.03.28 1. JSFiddle 화면에서 Language로 Vue를 선택하고, Frameworks&Extensions 등은 따로 선택하지 않습니다. (그냥 Vue를 선택해도 Vue3가 적용됩니다) 2. 아래와 같이 Vue의 createApp를 사용하여 vue instance를 만든 후, 요소에 m.. 2023. 3. 28. (Vue 3) Custom v-directive 만들기 (Vue 3) Custom v-directive 만들기 참고문서 : https://v3.ko.vuejs.org/guide/custom-directive.html 오늘은 vue 3에서 custom v-directive를 만드는 방법을 알아보겠습니다. 만들기 앞서 v-directive란 뭔지 한번 짚고 넘어가볼게요. v-directive란? Vue로 개발을 하다보면 v-if, v-for, v-model 같은 앞에 v 접두사를 붙인 단어들을 한번씩은 사용해보게 됩니다. 이렇게 v 접두사가 붙은것들을 v-directive라고 합니다. v-directive를 사용하면 복잡한 기능을 단어 하나만 붙여서 해결하는것이 가능하기 때문에 매우 편리하고 강력한 기능이지요. 그런데 Vue에서 기본적으로 제공하는 v-direc.. 2022. 2. 21. Vue3에서 swiper 쓰는법 (오류 해결법) Vue3에서 swiper 사용법 (오류 해결법) swiper는 슬라이드를 만들때 사용하는 라이브러리로 많은 사랑을 받고 있습니다. 대부분의 사이트에서 슬라이드를 구현할 때 스와이퍼를 사용하죠. swiper의 공식 사이트에 가보면 기본 js 뿐만아니라 react, angular, vue의 demo 코드도 제공하기 때문에 초심자들도 따라 배우기가 쉽습니다. https://swiperjs.com/demos Swiper Demos Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 문제 그런데 공식 사이트에서 제공하는 demo 코드.. 2022. 2. 5. (Vue 3) non-emits event 경고 (Vue 3) non-emits event 경고 Vue로 프로젝트를 개발하다 보니 팝업창을 띄울 때마다 런타임시 이상한 경고창이 뜨는 것을 발견했다. Extraneous non-emits event listeners (closePopup) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the "emits" option. 왜 이런 경고창이 뜨는 것일까? 내가 진행하던 프로젝트에서.. 2022. 1. 16. 이전 1 다음
