내가 보려고 만든 블로그

ckeditor 설치 npm install ckeditor4-vue vue 선언한곳에 사용하기 (main.js) import CKEditor from 'ckeditor4-vue'; Vue.use( CKEditor ); vue 파일에서 사용하기 원래는 editor5 쓰려고했는데 계속 오류가 발생해서 editor4로 변경하여 하니 한번에 바로 되었다! #공식사이트 ckeditor.com/docs/ckeditor4/latest/guide/dev_vue.html Vue Integration - CKEditor 4 Documentation Learn how to install, integrate and configure CKEditor 4. More complex aspects, like creating plug..

vue2-google-map 에서 gmap-authocomplete를 사용중에 하단의 오류가 발생했다. utc_offset의 지원이 중단되었으며, 2020년 11월에 사용이 중단되니 사용하지 말라는 뜻인데 나는 아무리 봐도 사용하고있지않는듯 한데 다음과 같은 오류에 어리둥절해서 구글링을 해보니 쉽게 해결 할 수 있었다! :options="{fields: ['geometry', 'formatted_address', 'address_components']}" 위에 옵션만 추가해주면 해결된다!

javascript에서 event.target.hasClass('classname') 으로 클릭한 div에 내가 찾으려고하는 div가 포함되어있는지 없는지 확인 했었다. vue에서는 조금 다르게 선언해주어야된다! @click="clickFunc($event)" 우선 클릭 함수는 다음과 같이 $event를 매개변수로해서 넘겨준다 clickFunc(event){ if(event.target.classList.contains('classname')){ console.log('포함되어있다.') }else{ console.log('포함되어있지않다.') } } event.target.classlist.contains으로 확인하면된다. 포함되어있으면 true를 반환하고 포함되어있지않으면 false를 반환한다!

이글은 vuejs 진입/진출 그리고 트랜지션 글을 나중에 제가 보려고 작성한 글이기 때문에 정보가 부족할 수도 있고 잘못 이해한 부분이 있을 수 있습니다. :) 또한 이 글에는 단일 엘리먼트/컴포넌트에 대한 정보만 작성되어있습니다. 다른 부분이 필요하신 분은 공식 문서 및 다른글을 참고바랍니다. 감사합니다 kr.vuejs.org/v2/guide/transitions.html 진입/진출 그리고 리스트 트랜지션 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org Vue에서 DOM에 삽입, 갱신 또는 제거될 때 트랜지션 효과를 어떻게 지원하는지에 대해 알아보았다. 기존 HTML과 같은 JAVASCRIPT나 JQUERY에서와 달리 vue에서 지원하는데 지원하는 조건은 다음..

vue에서 화면을 이동할때 컴포넌트를 변경하는데 렌더링이 아닌 값에 따라 동적으로 컴포넌트를 선언해서 변경하는 방법을 알아보았다! 1. 컴포넌트 갈아끼우는 방법 모든 컴포넌트들을 선언 한 뒤, 값에 따라 가져오는것이다. 만약 부모 컴포넌트로 받은 auth가 있을경우 마이페이지 컴포넌트로 이동하고 아닐경우 로그인 화면으로 이동한다. auth 값에 따라 component 엘리먼트의 is 속성에 바인딩 된 값이 변경된다. 2. 필요한 컴포넌트만 로딩하여 사용하기 로딩해야하는 컴포넌트가 한두개가 아닌 여러개일 경우에 위의 방식보다 더 효율적인데 필요한 컴포넌트만 import 하여 사용하는 방식이다. 위와 같이 하면 동적으로 필요한 컴포턴트 마다 import 할 수있다. 출처 및 참고자료 lovemewithout..

개발환경 laravel vue.js sass 안녕하세요 오랫만에 글을 쓰는거같아요! 이번에는 라라벨/뷰에서 sass를 연동해보았습니다. 먼저 resources/sass 디렉토리가 있는지 확인합니다. 저는 없어서 만들어야했어요 처음엔 그냥 수기로 만들려다가 이건 좀 아닌거같아서 구글링 해보았습니다. composer require laravel/ui --dev php artisan ui vue 코드를 다음과 같이 입력하면 이렇게 디렉토리가 생기는걸 볼수있어요! 그리고 webpack.mix.js 를 확인해보니 코드가 이렇게 바껴있는걸 볼 수있었어요 여러개의 Sass 파일을 대응하는 css 파일로 컴파일 할 수있으며, CSS 결과 파일의 위치를 커스텀마이징 할 수있대요! 그리고 만들어진 app.scss 파일을 ..

할때마다 헷갈리는 자식 컴포넌트에서 부모 컴포넌트로 값 전달하기 그제했는데 또 헷갈려서 검색하는걸 보고 절레절레하고 적기로했다🤦🏻‍♀️ . . . . . . . . . . . 이렇게하면 부모 컴포넌트로 값이 전달되어 alert이 출력된다 :) (이거쓰면서도 적어놓은거 참고한거 안비밀ㅠㅠ) 출처 구글 친구들 🙇🏻‍♀️

자바스크립트에서는 input 박스에 keyPress 를 넣어주면 되지만 이것도 역시 vue에서는 vue만의 방법이 있을거같아서 검색을 해보아따 🔍 pressEnterOnSearchFunc(event){ if(event.keyCode === 13){ console.log(event.target.value) } } 이러면 input 에서 Enter키를 입력했을때 input 박스에 있는 값을 출력한다! 이것도 굉장히 간단하게 해결할수 있었다. 그럼 안뇽 🙇🏻‍♀️👋

vue가 아닌 일반 자바스크립트에서는 글자 변경하는건했느데 vue는 vue만의 방식이 있을거같아서 검색을 해보았다! (자바스크립트로 할사람은 요기⬇️⬇️⬇️⬇️⬇️⬇️) 2020/01/06 - [WEB/JS] - [jquery] inputbox text 변경 실시간 감지 역시 vue만의 방식이 있더라🧏🏻‍♀️ #코드 searchChangeFunc(event){ console.log(event.target.value) } 잉게 끝이다. input 누르고 키보드 움직이면 내가 입력한 값이 콘솔에 잘 출력되는걸 볼 수 있다😄 뷰랑 자바스크립트 둘다 해본결과 뷰가 더 간단하고 편리한거같다! 이번에도 도움이 됬길 바라며 그럼 빠이빠이👋 #참고 구글 선생님들

vue에서 다른거 클릭했을때 사라지게 하고싶다! select box div로 만들때 다른거 누르면 사라지게하고싶고 그럴때! jquery 없이 간단하게 할수없을까? v-click-outline 을 쓰면된댱 키키키키 https://www.npmjs.com/package/v-click-outside 깃 업데이트도 얼마 되지않은 좋은 칭구다! 내가 잘못한걸수도있는데 저거 methods 에 함수 선언할때 매개변수 event나 e 없으면 오류나니까 조심하자!