728x90 WEB/vue8 Vue 생명주기 Before Create Vue 인스턴스가 초기화 된 직후에 발생 된다 Dom에 추가되기도 전 Created Data 직접 접근이 가능하다. 컴포넌트 초기에 외부에서 받아온 값들로 data를 세팅 할 수 있다. 이벤트 리스너 선언 가능 beforeMount 가상DOM이 생성되어 있음 실제 DOM엔 부착되지 않은 상태 Mounted 컴포넌트, 템플릿, 렌더링된 돔에 접근 가능 부모 자식 컴포넌트의 마운트 순서를 보장하긴 어렵다. 렌더링은 비동기로 진행됨으로 랜더링이 완료되었다고 착각하면 안됨 This.$nextTick을 사용하면, 모든 화면이 렌더링 된 이후에 실행되므로 마운트 상태를 보장 할 수 있다. beforeUpdate 가상DOM이 생성되어 있음 여기서 데이터를 다른 값으로 업데이트해도 재 호출 되.. 2023. 4. 28. Vue Script Components 현재 컴포넌트에서 사용할 하위 컴포넌트 Data 사용할 변수 정의 생명주기 hooks vue 생명주기에 따라 실행됨 Methods 사용할 함수 정의 그 외 compute, filter 등이 있다 2023. 4. 28. Vue Rendering의 기초 조건부 렌더링 (v-if) A B C Not A/B/C 위 코드는 type이라는 값에 따라 if문을 통해 다른 값 출력 하도록 한다. (하나의 div만 출력됨) 리스트 렌더링 (v-for) {{ value }} data: {items: ['a', 'b', 'c']} items에 있는 값들을 v-for문을 이용해 리스트 형태로 출력하는 코드 이다. v-bind : Html 속성 바인딩에 사용된다 A .active { background-color:red } 위코드는 isActive 값에 따라 active라는 이름의 css가 적용된다. ( isActive 가 true이면 배경색이 red 아니면 배경색 없음 ) v-on : 이벤트 바인딩에 사용된다. Add {{ counter }} 위 코드는 button 클릭.. 2023. 4. 25. Vue 소개 및 특징 정리 Vue란 무엇인가? Vue.js는 웹 개발을 단순화하고 정리하기 위해 개발된 대중적인 자바스크립트 프론트엔드 프레임워크이다. Vue는 Component를 사용하여 재사용성을 높힌다. Vue는 여러 디바이스 개발 시 컴포넌트를 재사용하여 개발 시간을 단축시킨다. Vue는 반응형 시스템 이다. 반응형 시스템이란 무엇인가? 예를 들어 아래와 같은 코드가 있다고 하자 절차형인 JavaScript는 중간에 가격(price)을 20으로 바꾸는 것과 상관없이 이전에 계산한 10이라는 값이 출력된다. 하지만 반응형인 Vue는 가격(price)이 20으로 변경되면서 가격 값을 참고하는 총액 역시 함께 변경되므로 20이라는 값이 출력된다. Vue를 사용하는 이유 Vue를 사용하는 이유에는 여러가지가 있겠지만 내가 생각하는.. 2023. 4. 25. Vue Swipe Tabs 구현 탭을 스와이프해서 넘기는 것을 구현하고자 한다. vuetify 라이브러리를 사용 할수도 있지만 세부 커스터 마이징이 어려워서 라이브러리를 쓰진 않았다. HTML - 이벤트 캐치할 div - 탭의 개수만큼 Transition 생성 - 선택된 탭만 보이도록 하위 div에서 v-if 조건으로 설정한다. JS /* TAB 관련 Method */ switchtab (n) { if (this.activetab > n) { this.transition = 'slide-prev' } else if (this.activetab < n) { this.transition = 'slide-next' } }, start (e) { this.settouchpos(e, 'start') }, move (e) { this.settou.. 2020. 10. 8. Vue 앱 개발 후기 vue를 이용하여 어플리케이션 개발을 하면서 느낀점을 간략하게 정리해보려고 한다. 낮은 진입장벽 이건 맞는말인것 같다. 사실 vue전에 angular를 먼저 배워서 그런가 금방 개발할수 있었다. 문법이 어려운 편도 아니고 핵심개념들도 명쾌하다. 때문에 짧은 개발기간 안에 개발하기에 적합했던 것 같다. 오픈 소스 및 라이브러리 아 Vue에는 왜이렇게 중국어로된 라이브러리가 많은지... 애니메이션 효과좀 이쁘게 넣어보려고 찾아보면 죄다 중국어다. 처음엔 개발에 급급하여 라이브러리를 가져다 썼는데 자유도가 너무 떨어지거나 너무 많은 불필요한 소스들이 있는 등 불편함이 자꾸 눈에 밟혔다. 차라리 그 소스들을 참고해서 필요한 부분만 가져와 구현하는게 나을 것 같다. 다음에 또 vue 어플리케이션 개발 하게될 기회.. 2020. 9. 25. 이전 1 2 다음 728x90
