728x90 반응형 📱 웹(Web)/Vue.js6 [Vue.js] v-if & v-show 변경(update)되지 않는 버그 해결하기 v-if 또는 v-show로 지정한 변수의 값을 변경해도 화면에서 조건부 렌더링이 정상적으로 반영되지 않는 문제가 종종 발생한다.. 다양한 원인 및 해결 방법Vue에서 렌더링 버그에는 다양한 원인이 있을 수 있으니 아래의 4가지 방법을 확인하자. 1. Html과 Vue에서 같은 Vue객체를 바라보고 있는지 확인Vue.js를 활용하는 다양한 방식이 있지만 보통 Html, JSP와 같은 화면에 데이터를 바인딩하여 처리한다.데이터 바인딩이 정상적으로 이루어지려면 당연하게도 HtmlVue.js가 같은 데이터 객체를 바라보고 있어야 하는데 종종 Html에서 Vue 객체를 잘못 바라보고 있는 경우가 있다.Hello World위와 같이 사용하고자 하는 변수를 가지고 있는 Vue 객체를 정확하게 선언해주자. 2.. 2024. 8. 27. [Vue.js] v-if & v-show 조건부 렌더링의 차이점 화면에서 데이터 변경 사항이 바로 반영되지 않는 이슈 해결하기,, 우선 이슈에 대해 간단히 설명하자면 화면에서 사용 안함 버튼을 클릭하면 바로 톱니바퀴 모양의 버튼이 사용자가 클릭할 수 없도록 Disabled 처리된 버튼으로 바뀌어야 되는데 사용 안함 버튼을 클릭해도 바뀌지 않는 현상이 발생하였다.이 문제는 테스트 중 사용 안함 버튼을 클릭 후 페이지를 새로고침 하면 정상적으로 변경 사항이 반영되었다. 값에 따라 Disabled 버튼이 보여지는 기능인 Vue.js의 조건부 렌더링 기능인 v-if를 사용 하여 개발되어 있었기 때문에 렌더링 관련 문제인 것으로 파악되어 Vue.js의 조건부 렌더링에 대해 찾아보다 v-show라는 것도 있다는 것을 알게되어 v-if 대신 v-show를 적용하여 쉽게 해결할.. 2024. 6. 27. [Vue.js] Cookie를 사용한 ID 저장 기능 Cookie 활용하여 웹사이트 로그인 시 ID 저장 기능 구현하기 Cookie는 웹 브라우저에서 인증 및 세션 관리, 개인화 콘텐츠, 광고 타겟팅, 장바구니 등 편리성을 위해 다양하게 활용되고 있다. 이런 Cookie를 사용하여 사용자의 ID를 저장하는 기능을 만들 수 있다. 쿠키 생성 (삭제)// 쿠키 생성 (삭제) 함수function setCookie(name, value, days, saveCheck) { var expires = ""; if(saveCheck) { // ID 저장 check 여부 var date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); .. 2024. 3. 17. [Vue.js] vue.js 문법과 사용방법 Component : Vue.js에서 컴포넌트는 재사용 가능한 UI 요소를 의미합니다. 각 컴포넌트는 자체적으로 데이터, 메서드, 스타일 등을 포함할 수 있습니다. 컴포넌트를 사용하여 애플리케이션을 작은 조각으로 나누고 각 조각을 개별적으로 관리할 수 있습니다. Vue.component('my-component', { template: '{{ message }}', data: () => ({ message: 'Hello, World!' }) }); Computed : 계산된 속성은 의존하는 데이터의 값에 기반하여 동적으로 값을 계산하는 속성입니다. 계산된 속성은 종속성을 갖는 데이터가 변경될 때만 다시 계산됩니다. new Vue({ data: { message: 'Hello, World!' }, comp.. 2023. 9. 11. [Vue.js] 기본 개념 이해 Vue.js 라이브러리 추가 인스턴스 생성: Vue 인스턴스는 Vue.js 애플리케이션의 진입점이며, 애플리케이션의 데이터, 메소드, 라이프사이클 훅 등을 정의 var app = new Vue({ // 데이터 data: { message: 'Hello, Vue!' }, // 메소드 methods: { updateMessage: function() { this.message = 'Updated message!'; } }, // 템플릿 template: '{{ message }}' }); 인스턴스 연결: Vue 인스턴스를 웹 페이지에 연결하려면 HTML 요소와 Vue 인스턴스를 연결해야 합니다. 일반적으로 el 옵션을 사용하여 연결할 요소를 지정 var app = new Vue({ el: '#app', //.. 2023. 8. 20. [Vue.js] vue.js란? Vue.js는 사용자 인터페이스를 구축하기 위한 progressve(점진적) 자바스크립트 프레임워크이다. 웹 애플리케이션의 화면 부분을 구성하는데 사용되며, 반응형 UI를 손쉽게 개발할 수 있도록 도와준다. 직관적이고 유연한 API를 제공하므로 쉽게 배울 수 있으며, 작은 규모의 프로젝트부터 대규모 애플리케이션까지 다양한 범위의 프로젝트에 적합하다. 가벼운 크기와 직관적인 문법으로 인해, SPA (Single Page Application)개발에 매우 적합하다. ( => 페이지 전환 없이 동적으로 콘텐츠를 로드하고 업데이트하는 웹 애플리케이션) 특징 경량성: 다른 자바스크립트 프레임워크에 비해 가볍고 경량성을 가지고 있습니다. 파일 크기가 작고 초기 로딩 속도가 빠르며, 기본 기능 이외의 기능은 플러그인.. 2023. 8. 20. 이전 1 다음 728x90 반응형
