vue.js

[Vue.js] Global Component 만들기 (컴포넌트 전역 등록하기) 들어가기에 앞서... 매번 자주 사용하는 컴포넌트를 만들고, 매번 해당 컴포넌트를 사용하는 곳마다 import 하여 사용하는 것은 불편할 뿐더러 컴포넌트의 파일 위치가 바뀐다면 해당 컴포넌트를 사용하는 모든 파일마다 수정을 해줘야 하기 때문에 좋지 않다. 그렇기 때문에 자주 사용하는 컴포넌트를 전역(Global)로 등록하여 사용한다. 🎈 간단한 글로벌 버튼 컴포넌트 만들기 `버튼` 컴포넌트를 이용해서 전역 컴포넌트 생성 방법에 대해 설명한다. Vuetify 라는 UI Framework를 이용해서 버튼(v-btn)을 생성하였다. 1. 버튼 컴포넌트 생성 `버튼`을 컴포넌트로 만들었다. $attrs는 부모로 부터 전달받은 pro..

[Vue.js] Vue에서 JQuery 사용하기 jquery datetimepicker 추가해서 사용하기 1. 방법 index.html에 jquery cdn을 추가해주면 vue 어디서나 사용이 가능하다. 2. 예제 [ JQuery datetimepicker를 Vue에서 사용하기 ] 1. CDN 추가 public/index.html 에 jquery, jquery-ui, jquery-datetimepicker 를 추가해 준다. 2. 컴포넌트 생성 jquery datetimepicker option 은 jquery datetimepicker document 와 동일하게 원하는대로 넣어주면 된다. 여기서 가장 중요한 점은 onChangeDateTime 함수 부분이다. 변경된 값을 부모에게 전달해주는 emit을 ..

[Vue.js] Custom Directive | 본 글은, Vue.js Guide 문서를 읽고 정리한 내용입니다. 1. 선언 전역 // main.js Vue.directive('[디렉티브_이름]', { ... }); 지역 export default { ... directives: { '[디렉티브_이름]': { ... } } } 사용방법 // 예) 2. Hook(훅) 함수 bind 처음 엘리먼트에 바인딩 될 때 한 번만 호출 insert 바인딩 된 엘리먼트가 부모 노드에 삽입 되었을 때 호출 update 포함하고 있는 컴포넌트가 업데이트 된 후 호출. 자식이 업데이트 되기 전일 가능성이 있음. componentUpdated 포함하고 있는 컴포넌트와 자식들이 업데이트 된 후 호출 unbind 디렉티브가 엘..

contenteditable 👍 contenteditable 사용자가 요소를 편집할 수 있게 하는 옵션이다. HTML 태그를 입력하더라도 vue의 v-html과는 달리 문자열 그대로 표시한다. https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/contenteditable true: 편집 가능 / false: 편집 불가능 ex) textarea 의 값만 표기하고, 변경 불가능하게 할 경우 contenteditable = false disabled 예) textarea 에 입력한 값을 div 에 표시 (vuejs) {{ contents }} contenteditable에 css 속성 적용 // .scss div[contenteditable] ..

v-html 👍 v-html vue에서 html 그대로 적용시킬 경우, v-html 옵션을 이용해서 적용 가능하다. ex) TextEditor(quill)에서 입력한 내용을 표시할 때, 값을 html 로 반환하기 때문에 html을 그대로 표시하기 위해서는 v-html을 이용한다. vue에서 v-html사용 시 XSS 공격 예방을 위해 eslint 에서 경고(warning)를 발생한다. 경고를 없애기 위해서는 코드 최상단에 아래 코드를 추가해주면 된다. 참고: https://github.com/vuejs/eslint-plugin-vue/issues/260

babel plugin 중 하나인 babel-plugin-transform-remove-console를 사용하여 한 번에 지울 수 있다. 1. babel-plugin-transform-remove-console 설치 babel-plugin-transform-remove-console $ npm install --save-dev babel-plugin-transform-remove-console 2. nuxt.config.js에 설정 export default { build: { babel: { // 옵션 있는 경우 plugins: [['transform-remove-console', { "exclude": [ "warn" ] }]], // 옵션 없는 경우 plugins: [['tra..