WEB/Vue.js

[Vue.js] Eslint + Prettier ⏎······· 오류 1. 오류 vue-cli 로 프로젝트를 만들고 실행하니 다음과 같은 줄바꿈을 하라는 오류가 나왔다. 2. 해결 .eslintrc.js 에 prettier 규칙 추가 [참고] [Prettier] htmlWhitespaceSensitivity 속성 // .eslintrc.js rules: { "prettier/prettier": [ "error", { htmlWhitespaceSensitivity: "ignore", } } } 그리고, vscode eslint 설정에 autoFixOnSave 옵션을 true로 변경 변경한 파일을 저장할 때마다 자동으로 eslint를 실행시켜 문제(오류)가 있으면 수정후 저장해주는 기능이다. [참고] htt..

[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 : Outside Click Event | `Custom Directive`란? 👉 itinerant.tistory.com/181 Custom Directive를 이용해서, 디렉티브를 갖고 있는 엘리먼트 바깥(외) 부분을 클릭할 경우를 감지하는 이벤트를 만들어 보고자 한다. 1. 원리 ☝️ 바깥 부분을 선택하는지 감지하기 위해서는 Body 클릭 이벤트를 감지해서 현재 클릭한 타겟이 해당 엘리먼트인지 체크하는 방식으로 쉽게 만들 수 있다. 2. 순서 1. 가장 먼저, bind 를 이용해서 처음 엘리먼트에 바인딩 될 때 실행할 것을 선언해 준다. { bind: function (el, binding, vnode) { // ... }, } 2. 우리는 디렉티브를 ..

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

[Vuejs][VScode] 'v-slot' directive doesn't support any modifier. [vue/valid-v-slot] 'v-slot' directive doesn't support any modifier. eslint-plugin-vue 👍 해결방법 .vscode/settings.json 파일에 아래 옵션을 추가해 주면 된다. // .vscode/settings.json { "vetur.validation.template": false } [참고] https://gitmemory.com/issue/vuejs/eslint-plugin-vue/1269/668921391

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