728x90 반응형 IT/Vue.js25 [Vus.js] - Vue npm install axios 설치 시 108 packages are looking for funding run `npm fund` for details 에러 해결 방법 #Vue npm으로 설치 시 108 packages are looking for funding run `npm fund` for details 에러 해결 방법 #npm으로 axios 설치 시 packages are looking for funding 에러 발생 -npm install axios #에러 발생 이유 Vue NPM이 "108 packages are looking for funding" 에러를 표시하는 경우, 이는 해당 패키지가 개발자들로부터 후원을 받고자 하는 메시지입니다. 이 에러는 일반적으로 개발 의존성 패키지가 자금 지원을 필요로 할 때 표시됩니다. 이 에러를 해결하기 위해 몇 가지 방법이 있습니다: 1. **후원하기**: 개발자로서, 에러 메시지에서 제공하는 링크를 통해 패키지를 후원할.. 2023. 9. 3. [Vue.js] - Vue computed와 watch 사용해서 데이터 변경 감지 하는 방법 #Vue.js 데이터 감지 API Vue.js는 데이터 변화를 감지하고 이에 대한 반응을 정의할 수 있는 computed와 watch API를 제공합니다. computed와 watch API를 사용하면 데이터의 변화를 감지하고, 이에 대한 적절한 처리를 할 수 있습니다. 예를 들어, 특정 데이터가 변경될 때마다 화면을 다시 그리거나, 다른 데이터를 업데이트하는 등의 작업을 할 수 있습니다. #Vue computed란? Vue의 computed는 데이터를 계산하고, 감시하며, 캐싱하는 속성입니다. 즉, computed 속성은 모델의 상태 변화에 따라 동적으로 계산된 값을 제공합니다. Computed 속성은 연산이 필요한 데이터를 정의할 때 사용됩니다. Computed 속성은 일반적으로 템플릿에서 나타내는 .. 2023. 9. 2. [Vue.js] - Vue v-on 디렉티브를 사용해서 이벤트(@click, @change, @keyup) 처리 하는 방법 #Vue v-on 디렉티브 -`v-on` 디렉티브는 Vue에서 이벤트 처리를 위해 사용되는 디렉티브입니다. 이 디렉티브를 사용하여 HTML 요소에 이벤트 리스너를 추가할 수 있습니다. 예를 들어, 클릭 이벤트를 처리하려면 `v-on:click` 또는 단축 표현인 `@click`을 사용합니다. #vue v-on 디렉티브 종류 `v-on` 디렉티브는 Vue에서 다양한 종류의 이벤트 처리를 위해 사용됩니다. 몇 가지 주요 `v-on` 디렉티브 종류는 다음과 같습니다: 1. `v-on:click`: 클릭 이벤트를 처리합니다. 2. `v-on:mouseover`: 마우스가 요소 위로 올라갈 때의 이벤트를 처리합니다. 3. `v-on:keydown`: 키보드의 키 다운 이벤트를 처리합니다. 4. `v-on:subm.. 2023. 8. 27. [Vue.js] - Vue 조건문 v-if, v-show 사용법 및 차이점 #vue v-if 디렉티브 `v-if`는 Vue의 조건부 렌더링 디렉티브 중 하나입니다. 이 디렉티브를 사용하면 요소가 DOM에 렌더링 되거나 제거되는지 여부를 조건부로 결정할 수 있습니다. `v-if` 디렉티브는 표현식을 평가하고 해당 결과에 따라 요소를 렌더링하거나 제거합니다. 표현식이 `true`로 평가되면 요소가 렌더링 되고, `false`로 평가되면 요소가 DOM에서 제거됩니다. `v-if`는 요소의 존재 여부를 동적으로 제어할 수 있어 필요에 따라 특정 조건에서만 요소를 렌더링 할 수 있습니다. #vue v-show 디렉티브 `v-show`는 Vue의 조건부 렌더링 디렉티브 중 하나입니다. `v-if`와 달리 `v-show`는 요소를 숨기거나 표시하는 데 사용됩니다. `v-show`는 표현식을.. 2023. 8. 27. [Vue.js] - Vue 반복문 v-for 사용해서 리스트 랜더링 하는 방법 #Vue v-for문으로 리스트 랜더링 하는 방법 -Vue에서 `v-for` 디렉티브를 사용하여 리스트를 렌더링 할 수 있습니다. `v-for`를 사용하면 Vue 데이터의 배열 또는 객체를 반복하여 요소를 생성할 수 있습니다. #vue v-for 디렉티브 문법 -v-for="(item, index) in items" items: 데이터 배열 item: 배열에 담긴 각각의 데이터 index: 배열 반복 횟수 0부터 시작 #`v-for` 디렉티브에서 `:key` 속성 뜻 `v-for` 디렉티브에서 `:key` 속성은 Vue에서 리스트 항목을 식별하는 데 사용되는 특수한 속성입니다. 각 항목에 고유한 키 값을 제공함으로써 Vue는 리스트의 변경을 효율적으로 감지하고 업데이트할 수 있습니다. `:key` 속성을.. 2023. 8. 27. [Vue.js] - Vue 클래스(class) 데이터 바인딩 하는 방법 #Vue 클래스(class) 데이터 바인딩 하는 방법 -Vue에서 `v-bind:class` 디렉티브를 사용하여 요소의 클래스를 동적으로 바인딩할 수 있습니다. 이 방법을 사용하면 Vue 데이터를 기반으로 요소의 클래스를 추가하거나 제거할 수 있습니다. -Vue.js 코드 Class Binding -Vue 클래스(class) 데이터 바인딩 테스트 true, false로 클래스 바인딩 처리를 할 수 있습니다. hasError이 true로 바뀌게 되면 'Class Binding' 문구가 빨간색으로 변합니다. #배열을 사용해서 클래스 바인딩 하는 방법 -Vue.js 코드 Class Binding -배열을 사용해서 클래스 바인딩 테스트 배열을 사용하는 경우 특정 조건에 따른 클래스 바인딩 처리를 true/fal.. 2023. 8. 27. 이전 1 2 3 4 5 다음 728x90 반응형
