Web (22) 썸네일형 리스트형 [Vue] 4-1. Component 부모에서 자식으로 데이터전송 컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 컴포넌트 작성 컴포넌트는 부모-자식 관계에서 가장 일반적으로 함께 사용하기 위한 것입니다. 컴포넌트 A는 자체 템플릿에서 컴포넌트 B를 사용할 수 있습니다. 그들은 필연적으로 서로 의사 소통이 필요합니다. 부모는 자식에게 데이터를 전달해야 할 수도 있으며, 자식은 자신에게 일어난 일을 부모에게 알릴 필요가 있습니다. 그러나 부모와 자식이 명확하게 정의된 인터페이스를 통해 가능한한 분리된 상태로 유지하는 것도 매우 중요합니다. 이렇게하면 각 컴포넌트의 코드를 상대적으로 격리 할 수 있도록 작성하고 추론할 수 있으므로 유지 관리가 쉽고 잠재적으로 쉽게 재사용 할 수 있습니다. Vue.js에서 부모-자식 컴포넌.. [Javascript] 문자열 앞에 0 채우기 String.prototype.padStart() padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환합니다. 채워넣기는 대상 문자열의 시작(좌측)부터 적용됩니다 예시 'abc'.padStart(10); // " abc" 'abc'.padStart(6,"123465"); // "123abc" 'abc'.padStart(8, "0"); // "00000abc" 1.toString().padStart(3, "0"); // "01" 12.toString().padStart(6, "R00000"); // "R00012" 참조: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global.. [Vue] 본인인증 sms 3분 유효체크 타이머 setInterval let timerId = setInterval(func|code, [delay], [arg1], [arg2], ...) setInterval은 함수를 주기적으로 실행하게 만듭니다. 함수 호출을 중단하려면 clearInterval(timerId)을 사용하면 됩니다. 예제 Vue 에서 3분타이머 만들기 export default { name: "Timer", data: function() { return { Timer: null, TimeCounter: 180, TimerStr: "03:00" }; }, mounted: function() { //문자발송성공시 호출 if(this.Timer != null){ this.timerStop(this.Timer); this.Timer = nul.. [JavaScript] 자주쓰는 정규 표현식 이메일 정규표현식 var regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i; 휴대폰 정규 표현식 var regExp = /^\d{3}-\d{3,4}-\d{4}$/; 일반 전화번호 정규식 var regExp = /^\d{2,3}-\d{3,4}-\d{4}$/; 비밀번호 정규표현식 숫자와 문자 포함 형태의 6~12자리 이내의 암호 정규식 (1 가지 조합) var regExp = /^[A-Za-z0-9]{6,12}$/; 영문, 숫자, 특수문자 중 2가지 이상 조합하여 10자리 이내의 암호 정규식 ( 2 가지 조합) var regExp = /^(?!((?:[A-Za-z]+)|(?:[~!@#$%^&*(.. [Javascript] html2canvas + jspdf 사용방법 1. html2canvas + jspdf 사용하여 Html화면을 Pdf 파일로 출력하는방법 https://rawgit.com/MrRio/jsPDF/master/docs/jsPDF.html jsPDF - Documentation For compatibility reasons jsPDF offers two API modes which differ in the way they convert between the the usual screen coordinates and the PDF coordinate system. "compat": Offers full compatibility across all plugins but does not allow arbitrary transforms rawgit.com htm.. [Vue] 3. 페이지이동 및 변수사용 [Vue] 2-2. 프로젝트 생성 (Manually select features) 2021.03.10 - [Programing/Vue] - [Vue] 2-1. 프로젝트 생성 Defualt ([Vue2] bavel , es.." data-og-host="tjddnjs625.tistory.com" data-og-source-url="https://tjddnjs625.tistory.com/17" data-og-url="https.. tjddnjs625.tistory.com 1. 페이지 생성 앞선 포스팅에서 생성한 프로젝트의 Views 폴더안에 vue 파일을 생성한뒤 template 태그 안에 Html 내용을 작성한다. 위처럼 생성한 Index.vue 파일을 Router 에 등록 해줘야 페이지 라우팅이 가능하므.. [Vue] 2-2. 프로젝트 생성 (Manually select features) [Vue] 2-1. 프로젝트 생성 1. CMD 실행 하여 프로젝트 파일 설치 경로 이동 cd D:\WorkSpace_Study d: 2. Vue 프로젝트생성 vue create study-project 해당명령어 입력시 아래와 같은 옵션선택창이 노출된다. > Defualt ([Vue2] bavel , es.. tjddnjs625.tistory.com 위글에서 셋팅한 방법은 Java 에서 Legacy Project 처럼 하나하나 직접 셋팅해줘야하는 불편함이 있었다. spring boot 처럼 자동으로 설치하기 위해선 Manually select features 로 자동셋팅이 가능하다. 1. Vue 프로젝트생성 vue create study-project 해당명령어 입력시 아래와 같은 옵션선택창이 노출된다... [Vue] 2-1. 프로젝트 생성 1. CMD 실행 하여 프로젝트 파일 설치 경로 이동 cd D:\WorkSpace_Study d: 2. Vue 프로젝트생성 vue create study-project 해당명령어 입력시 아래와 같은 옵션선택창이 노출된다. > Defualt ([Vue2] bavel , eslint) > Defualt (Vue3 Preview) ([Vue3]bavel , eslint) > Manually select features 위옵션중 Vue 버전을 선택하면된다. vue3는 아직 preview 이기때문에 vue2 로 설치 3. VS Code에서 해당 프로젝트 열기 위와 같이 프로젝트가 생성되었다면 packpackage.json 에서 프로젝트의 정보를 정의하고, 의존하는 패키지 버전 정보를확인할수 있다. 이제 해당 프로.. [Vue] 1. 설치 및 VS Code 셋팅 1. Node 설치 npm(node package manager)을 이용해 vue를 설치하기 위해 Node.js 를 설치한다. Node.js Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 설치후 cmd 창을 열어 아래 명령어를 실행하여 vue 와 vue-cli 를 설치한다 Vue CLI는 Vue.js 프로젝트 생성을 돕는 vue 공식 CLI 이다. Vue CLI를 통해서 vue 명령어를 사용할 수 있게되고, 빠른 프로젝트 생성 및 관리를 할 수 있게 된다. 아래와 같이 npm, yarn 명령어를 사용해서 설치 할 수 있다. --vue.js 설치 npm install -- vue-cli설치.. [JavaScript] CheckBox 중복 방지 사과 딸기 포도 Html 사과 딸기 포도 Script function NoMultiChk(chk){ var obj = document.getElementsByName("box"); for(var i=0; i 이전 1 2 3 다음
