methods type:{ [key: string]: Function } Ex> import { Vue } from "vue-class-component"; export default class Home extends Vue { methodsCount() { console.log("methods"); return this.countMethods; }, } import { Vue, Options } from "vue-class-component"; @Options({ methods: { methodsCount() { console.log("methods"); return this.countMethods; }, }, }) export default class Home extends Vue {} compute..
-
웹 버튼누르면 다운로드하는프로그램 만들기
잡담 제목을 간결하게 만들기 힘들어서 그냥 이렇게 적었다 ㅎㅎ 어.. 간단히 말하면 뭐 한글파일,ppt등 버튼? 제목등 누르면 다운로드 되는 거랑... 화면 캡처하는 방법??? 등등 시작전 유희사항 이건 노드모듈이 필요해서 node.js를 반드시 설치하고 오세요!! 저는 리액트로 만들었습니다.(반드시 리액트일 필요는 없고.. 모듈을 import할수만 있으면 될껍니다..) 만들기 npm i html2canvas yarn add html2canvas 모듈을 설치한 다음에 import Htmlcanvas from 'html2canvas';//필수 function printDiv(id){ Htmlcanvas(id).then((canvas) => {//id부분 캡처 let myImg=canvas.toDataURL..
-
Vue3 Provide / Inject 정리
컴포넌트끼리 값을 공유하는 방법 props storage 상태 관리 라이브러리 props 이용해서 최상위 component에서 최하위 component로 정보를 props를 이용해서 보내는 것은 너무나도 비효율적입니다. 그러나 storage, 상태 관리 라이브러리를 이용하기에는 애매한 경우가 있습니다. vue는 이러한 상황을 해결하기 위해 provide/inject개념을 만들게 되었습니다. Provide / Inject란? provide는 값을 제공하는 역할 Inject는 제공받은 값을 component에 추가하는 역할 사용방법 parents child {{ test }} *provide 값을 반드시 변수값으로 할 필요는 없습니다. 이렇게만 보면 엄청나게 편리한 기능이라고 느껴집니다. 귀찮게 props ..
리스트 : 콘텐츠가 있으면 최근 5건을 불러옵니다.
-
vue Option-3 정리(methods vs computed vs watch)vue 2021.09.09 10:31
methods type:{ [key: string]: Function } Ex> import { Vue } from "vue-class-component"; export default class Home extends Vue { methodsCount() { console.log("methods"); return this.countMethods; }, } import { Vue, Options } from "vue-class-component"; @Options({ methods: { methodsCount() { console.log("methods"); return this.countMethods; }, }, }) export default class Home extends Vue {} compute..
-
vue options정리-2 (props)vue 2021.09.08 13:18
type: Array | Object options type : 기본생성자 타입 모두 가능하고 커스텀한 생성자 타입도 가능합니다! types: String, Number, Boolean, Array, Object, Date, Function, Symbol... default: prop의 기본값을 설정합니다. types: any required: prop의 필수 여부를 정의합니다. types: Boolean validator:사용자 정의 유효성 검사 함수입니다. types:Function 설명 부모 컴포넌트의 데이터를 얻기 위한(exposed to accept) 리스트/해쉬 속성입니다. 배열 기반의 단순한 문법과 형 검사, 사용자 정의 유효성 검사와 기본값 같은 고급 구성을 허용하는 객체 기반의 문법이 있..
-
vue options정리-1 (data)vue 2021.09.08 13:13
-data- type: function 설명 컴포넌트 인스턴스에 데이터 객체를 반환하는 함수입니다. Ex> // 인스턴스를 생성합니다. const data = { a: 1 } // 객체를 컴포넌트 인스턴스에 추가합니다. const vm = Vue.createApp({ data() { return data } }).mount('#app') console.log(vm.a) // => 1 import { Options, Vue } from "vue-class-component"; @Options({ data() { return { test2: "etst2", }; }, }) export default class Home extends Vue {} import { Vue } from "vue-class-comp..
-
Vue3 Provide / Inject 정리vue 2021.09.07 09:48
컴포넌트끼리 값을 공유하는 방법 props storage 상태 관리 라이브러리 props 이용해서 최상위 component에서 최하위 component로 정보를 props를 이용해서 보내는 것은 너무나도 비효율적입니다. 그러나 storage, 상태 관리 라이브러리를 이용하기에는 애매한 경우가 있습니다. vue는 이러한 상황을 해결하기 위해 provide/inject개념을 만들게 되었습니다. Provide / Inject란? provide는 값을 제공하는 역할 Inject는 제공받은 값을 component에 추가하는 역할 사용방법 parents child {{ test }} *provide 값을 반드시 변수값으로 할 필요는 없습니다. 이렇게만 보면 엄청나게 편리한 기능이라고 느껴집니다. 귀찮게 props ..
-
attribute(특성) vs property(속성)카테고리 없음 2021.09.06 09:47
사전적정의 attribute 는 html 문서에서 elements 에 추가적인 정보를 넣을 때 사용되는 요소입니다. property는 html DOM 안에서 attribute 를 가리키는(혹은 대신하는) 표현입니다. ex> class 라는 특성이 attribute이고 className(클래스명)은 property입니다! ..? 뭔 차이인가? 한줄요약 attribute는 정적인 값 property는 동적인 값 attributes는 html document/file안에 존재하는 값(파일) property는 html dom tree안에 존재하는 값이기 때문입니다!(로컬) 이해하기 쉽게 예시를 들어보죠! 이상태에서 각각의 값 attributes: "test" property : "test" 지금은 이렇게 같은 ..