vuejs

[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

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

[Django] Vue.js 사용하기 본 글은 AHackersDay의 https://ahackersday.com/blog/how-to-use-vue-and-django-together/ 글을 원작자의 동의를 받고 번역했습니다. Vue와 Django를 함께 사용하는 방법은 여러가지가 있고, 이 글에서는 우린 그 중 세 가지를 할 것입니다. 두 가지를 합치는 것은 큰 도전이 아니지만 몇 가지 생각해야 할 것이 있습니다. 1. Django Templates에 Vue 통합하기 (Integrate Vue into Django templates) Vue와 Django를 통합하는 가장 쉬운 방법은 vue script를 html코드에 포함시키는 겁니다. 이 작업이 완료되면 vue app 과 components를 만들 ..