진스

도로명+건물명,도로명,지번,건물명 data() { return { address: '', }; }, computed: { isAddressValided() { return this.address != ''; }, }, methods: { chageAddress(e) { this.address = e.target.value; }, },​

참고 Vue.js 개발 생산성을 높여주는 도구 3가지 뷰로 개발할 때 반복적인 코드 작성을 줄이고 코드 리뷰를 편하게 해주는 도구 알아보기 joshua1988.github.io Vue VSCode Snippets 마지막으로 살펴볼 도구는 Vue VSCode Snippets이라는 VSCode 확장 플러그인입니다. Vue의 코어팀 멤버이자 마이크로소프트웨어 개발자인 Sarah Drasner가 제작하였습니다. 개인적으로 자주 사용하는 스니펫은 vdata, vimport, vmethods 정도가 있습니다. 관심 있으신 분들은 아래 링크로 접속해서 살펴보세요.

참고 Vue.js 개발 생산성을 높여주는 도구 3가지 뷰로 개발할 때 반복적인 코드 작성을 줄이고 코드 리뷰를 편하게 해주는 도구 알아보기 joshua1988.github.io .eslintrc.js prettier 설정 내용까지 여기에 써줘서 eslint설정을 우선시해서 오류가 안남 (설정후 서버재가동) module.exports = { root: true, env: { node: true, }, extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"], parserOptions: { parser: "babel-eslint", }, rules: { 'prettier/prettier': [ 'error', // 아래 규칙들은 개인 ..

video 태그 video태그는 웹페이지에 영상파일을 재생할 때 사용합니다. 예전에는 웹페이지에 동영상을 재생하기 위해 외부 프로그램을 설치하는등 복잡한 과정이 필요했으나 지금은 video태그로 간단하게 이를 구현할 수 있습니다. video 태그 사용 방법 1 2 3 웹브라우저가 video태그를 지원하지 않을 때 표시할 문구 cs 비디오 태그는 여러 속성을 사용할 수 있습니다. video 태그에 사용하는 속성 src : 비디오 파일의 주소 controls : 컨트롤러 표시 autoplay : 자동 재생 loop : 반복 재생 width : 영상의 가로길이 height : 영상의 세로길이 muted : 음소거 예제를 통해 확인하겠습니다. 1. 123456 해당 브라우저는 video 태그를 지원하지 않습니다..

codesandbox slot 이용한 modal - CodeSandbox slot 이용한 modal by baejm using @vue/cli-plugin-babel, store, vue codesandbox.io Input.vue (상위 컴포넌트) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 빈칸 엔터면? 알림! 할일을 입력하세요. import Modal from "..

vue에서 css 스타일 적용 1 2 3 4 Colored by Color Scripter cs 이제 div태그에는 백그라운드 이미지가 적용되었습니다. 이 외에 필용한 스타일(크기, 사이즈 방식 등등)은 따로 지정하시면 됩니다. 위에 필요한 속성 등 알아둘 사항은 아래와 같죠. 일반 css 적용 1 2 3 4 5 #box2-2{ width: 300px; height: 150px; background-image: url("/images/attach/earth.jpg"); } Colored by Color Scripter cs 1. 혹시 위와 같이 적용하였음에도 이미지가 안나오는 경우 필요한 css 속성이 적용되었는지 확인하세요. 적용된 div 영역에는 width, height 등의 다른 스타일이 필요할 수..

api/index.js //index.js function kakaoFetch(keyword) { return axios.create({ baseURL: "https://dapi.kakao.com/v3/search/book?target=title", headers: { Authorization: " KakaoAK 나의REST API키", }, params: { query: keyword}, }); } export { kakaoFetch }; Colored by Color Scripter cs 작업할 vue 내에 //KakaoList.vue 카카오 검색 import { kakaoFetch } from "@/api";// import axios from "axios";export default { data(..

출처 vuex 새로고침시 상태 초기화 방지 vuex 새로고침시 상태 초기화 방지 kyounghwan01.github.io vue를 쓰시면 vuex를 거의 대부분 쓰실 것입니다. 그런데 이 vuex가 한가지 문제가 있습니다. 어떠한 화면에서 vuex의 store값을 의존해서 사용하고 있다 가정하고, 새로고침을 하면 store값에 의존하는 데이터가 사라지게 된다는 것이죠 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 contextText export default { name: 'HelloWorld', computed :{ contextText : function(){ return this.$store.getters['test']; } }, } Colored by Color Sc..