프론트엔드/Vue.js (7) 썸네일형 리스트형 [vue] selectbox default 값 지정하는 방법 (v-model) vue.js에서 v-model을 사용하여 셀렉스박스를 생성할때, 'default' 또는 'checked'와 같은 속성은 무시된다. (아래 글 참고) 때문에 디폴트 값은 해당 속성을 사용하는것이 아닌, v-model에 값을 할당하여 디폴트값을 지정해주는 방식으로 사용되어야 한다. 🎵 예시코드 /** template */ {{ list.text }} /** 변수 */ sampleList = [{ text: '선택', value: 0 }, { text: '정민', value: 1 }] // 셀렉트박스 리스트 sampleModel = 1 // 1로 하면 '정민'이라는 리스트가 선택됨 만약 기본으로 선택 을 선택하고 싶다면, 예시코드 기준으로 v-model 값에 0을 할당해주면 된다! [vue.js] 요소 외부클릭 감지하기 (외부클릭시 요소 변경) vue 개발환경에서 특정 버튼 클릭시 드롭다운을 활성화 하며, 해당 드롭다운 외부를 클릭할 시 드롭다운을 없애야하는 기능을 구현해야 했다. 이를 위해 특정 요소 외부클릭을 인식해야했다. dom 요소 직접접근하는 방식과 라이브러리를 사용하는 방식 등이 있었으며 나는 추후 이벤트값 활용을 위해 후자를 선택했다. 버튼을 클릭하여 드롭다운을 활성화 한 상태일때, 화면은 아래와 같은 모양이다. 1. 라이브러리 인스톨 나는 v-click-outside 라이브러리를 사용하였다. 우선 라이브러리 인스톨을 수행한다. npm install v-click-outside 2. import 및 directives 추가 import vClickOutside from 'v-click-outside' export default { .. [웹팩] webpack.config.js VS vue.config.js Vue CLI로 생성한 프로젝트의 웹팩인 webpack.config.js와 vue.config.js 의 차이를 적어보려 한다. Vue CLI로 생성한 프로젝트와 웹팩의 관계? 실제 서비스를 만들기 위해 뷰 CLI를 이용해서 프로젝트를 생성했다. 이렇게 생성된 뷰 프로젝트는 웹팩을 기반으로 동작합니다. (웹팩은 최신 프런트엔드 빌드 시스템의 핵심이 되는 빌드 도구이다!) npm run serve : 로컬 서버를 웹팩 데브 서버로 실행 npm run build : 웹팩으로 최종 결과물 변환(빌드) webpack.config.js와 vue.config.js의 차이? 뷰 CLI 버전 2 이하에서는 웹팩 설정 파일(webpack.config.js)이 프로젝트 루트 레벨에 노출되어 있었다. 하지만 뷰 CLI 버전 .. [웹팩] Vue에 jquery 전역 등록하기 웹팩에 외부 라이브러리를 추가하는 방식에 대해 정리된 글이 많이 없어서 정리하고자 한다. 나는 오픈소스인 bootsrtap을 설치해 사용했으며, 이때 기반이 되는 jquery를 웹팩에 추가하는 방식으로 진행했다.CLI로 신규프로젝트 생성 및 bootstrap이 설치되었다는 가정 하에 진행한다! (npm i bootstrap) 1. Bootstrap 설정 Bootstrap이란? 반응형 웹사이트를 개발하기 위해 트위터에서 오픈소스로 공개한 UI Framework이다. jQuery기반으로 되어 있으며, PC, Tablet, Mobile의 스크린을 자유롭게 설계하여 UI의 표현을 가능하게 한다. Bootstrap의 경우는 js 이외의 UI를 표현해주는 css파일도 포함시켜줘야 합니다. 따라서 아래와같이 두가지를.. Vue.js 플러그인 사용하기 (install, use 메소드) 앞서 Vue 객체의 prototype으로 인스턴스 메소드를 추가하는 방법을 기재하였다! https://pro-jm.tistory.com/89?category=1064702 main.js 공통함수 전역 선언하기 컨포넌트에서 공용으로 사용할 파일 이름을 생성한다. common-plugin.js common-plugin.js 예시 const methods = { setTestOpts: () => { return 'test' } } export default { install (Vue) { Vue.prototype.$set.. pro-jm.tistory.com 전역설정을 할때 글로벌메소드 install과 use에 대해 찾아보다가 발견한 플러그인에 대해 적어보려 한다. 플러그인(plugin) 이란? plugin은.. main.js 공통함수 전역 선언하기 컨포넌트에서 공용으로 사용할 파일 이름을 생성한다. common-plugin.js common-plugin.js 예시 const methods = { setTestOpts: () => { return 'test' } } export default { install (Vue) { Vue.prototype.$setTestOpts = methods.setTestOpts } } 나는 테스트용으로 'test'라는 스트링 값을 리턴하는 함수를 작성하였다. vue의 글로벌 메소드인 install을 사용하여 프로토타입의 객체로 함수를 셋팅하여준다. 원하는 작업을 setTestOpts에 구성하면 되겠다. 다음은 해당 속성을 전역으로 등록해주는 작업이 필요하다. main.js import CommonPlugin from .. Vue.js 자식에서 부모로 데이터 전송하기 (객체 일부값만 변경하는법) 부모 컴포넌트에서 데이터 바인딩을 통해 자식 컴포넌트로 데이터를 전달한다. (v-bind 디렉티브 사용!) 자식컴포넌트에서 데이터 변경이 발생시 v-on으로 선언된 함수로 데이터를 전송해 변경할 수 있다. 이때, 객체의 일부값만 변경하고싶다면 Object.assign 을 활용할 수 있다. 1. 부모에서 자식으로 데이터 전달하기 /* 부모컴포넌트 */ /* 자식컴포넌트 */ 위와같은 구조일때, 부모 컴포넌트에서 item 이라는 변수를 자식컴포넌트(child)에 바인딩 하였다. 자식컴포넌트에서 해당 데이터를 전달받아 아래의 방식으로 부모에게 전달할 수 있다. 2. 자식 컴포넌트에서 데이터 변경 후 부모로 전달하기 /* 스크립트부분 */ export default { props: ['item'], method.. 이전 1 다음
