VUE 썸네일형 리스트형 [vue2] vuetify 기본 구성 들어가기 vuetify는 vue.js에서 사용하는 대표적인 UI 컴포넌트 프레임워크 중에 하나이다. 라이센스는 MIT license이다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 설치 yarn add vuetify yarn add sass@~1.32 sass-loader deepmerge -D plugin src 밑에 plugins 폴더에 vuetify.js 파일 생성한다. plugins 폴더가 없다면 새로만들면 된다. import Vue from 'vue'; import Vuetify from 'vuetify/lib/framework'; // import 'vuetify/dist/vuetify.min.css'; Vue.use(Vuetify); exp.. 더보기 [vue2] 목록에서 체크박스 선택 처리 vue.js에서 배열 데이터를 목록 또는 표 형태로 출력하는 방식은 매우 간편하다. 그러나, 출력된 목록에서 일부 데이터를 선택해서 처리하는 경우는 어려워보인다. 이 부분도 쉽게 처리 하는 방법이 있다. 들어가기 목록으로 출력하고 데이터 선택은 체크박스로 처리하는 예제이다. 저도 예전에는 상당히 복잡하게 만든 기억이 있다. 여기서는 최종 3가지 방식으로 처리하는 예를 살펴보겠다. 물론 다른 방식도 있을 수도 있지만, 제가 사용했던 것 중에 그나마 좋다고 생각하는걸 정리했다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 간단한 목록 출력 처리할 데이터는 vue.js에 있는 가이드 문서를 참고해서 사용했다. data() { return { todos: [ {.. 더보기 [vue2] vuetify 팝업 모달창 사용 vuetify를 사용한 팝업 모달창 사용법을 간단하게 정리해보았다. 들어가기 vuetify의 v-dialog을 사용해서 팝업모달창을 만들어보자. 작성자: ospace114@empal.com, http://ospace.tistory.com/ template 작성 확인 script 작성 사용예 등록된 컴포넌트명이 "Popup"이라고 가정하겠다. 사용할 팝업창을 ref 형태로 추가한다. let res = this.$refs.popup.open(this.popupValue); if (res) { console.log('result is', res); } else { console.log('popup cancel'); } $refs 통해서 open()을 호출한다. 참고 [1] Dialogs, https://vue.. 더보기 [vue2] 여러 숫자 자동입력 컴포넌트 작성자: ospace114@empal.com, http://ospace.tistory.com/ 속성 size: 숫자 입력 개수 사용예 소스코드 더보기 [vue2] 레이아웃 구성 웹페이지는 여러 화면으로 구성되어 있다. 일반적으로 상단에 로고와 메뉴, 가운데에 컨텐츠, 하단에 사이트정보 등 형태로 되는 경우가 많다. 이런 화면을 모든 페이지에 반복적으로 나타나는데, 모든 페이지에 같은 작업을 반복적으로 하기에는 매우 비효율적이다. 이때 필요한게 레이아웃을 구성해여 화면 분할해서 작업하는 형식이다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 들어가기 vue.js에서 레이아웃은 기본 기능이기 보다는 라우터의 기능과 컴포넌트 기능을 적절하게 활용하는 형태이다. 다른 프레임워크에서는 페이지를 임포트하여 구성하거나 이를 위한 별도 라이브러리를 사용하는 경우가 많다. 물론 더 훌륭한 기능을 사용하고 싶다면 추가 라이브러리를 사용할 수도 있.. 더보기 [vue2] Vue.js 프로젝트 기본 구성 초기 소스코드를 구성할 경우 해야할 일이 많다. 최근 프레임워크는 많이 간소화되어서 해야할 작업이 매우 많이 줄어들었지만 그래도 해야할 일이 좀 있다. 사용할 목적에 따라 달라질 수 있지만, 웹 어플리케이션을 만든다고 가정해서 가장 기본적인 환경 구성을 정리해보았다. 작성자: ospace114@empal.com, http://ospace.tistory.com/ 들어가기 Vue.js을 몇번 사용하면서 반복적으로 구성하면서 필요로 하는 작업이 있다. 그때마다 검색하면서 똑같은 작업하기가 번거롭기 때문에 한번 정리해보았다. Vue.js는 버전 3까지 나왔지만, 여기서는 버전 2에 대한 환경 구성을 다룰려고 한다. Vue.js 프로젝트 구성은 vue cli을 사용해서 초기 구성을 할 수 있다. vue cli도 .. 더보기 이전 1 다음
