티스토리

allblack의 개발 새발

검색하기

블로그 홈

allblack의 개발 새발

tistory.allblack.dev/m

고졸 신입 개발자의 개발일지

구독자: 1

방명록 방문하기

주요 글 목록

vue Option-3 정리(methods vs computed vs watch) 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.. 공감수 0 댓글수 0 2021. 9. 9.
vue options정리-2 (props) 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) 리스트/해쉬 속성입니다. 배열 기반의 단순한 문법과 형 검사, 사용자 정의 유효성 검사와 기본값 같은 고급 구성을 허용하는 객체 기반의 문법이 있.. 공감수 0 댓글수 0 2021. 9. 8.
vue options정리-1 (data) -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.. 공감수 0 댓글수 0 2021. 9. 8.
Vue3 Provide / Inject 정리 컴포넌트끼리 값을 공유하는 방법 props storage 상태 관리 라이브러리 props 이용해서 최상위 component에서 최하위 component로 정보를 props를 이용해서 보내는 것은 너무나도 비효율적입니다. 그러나 storage, 상태 관리 라이브러리를 이용하기에는 애매한 경우가 있습니다. vue는 이러한 상황을 해결하기 위해 provide/inject개념을 만들게 되었습니다. Provide / Inject란? provide는 값을 제공하는 역할 Inject는 제공받은 값을 component에 추가하는 역할 사용방법 parents child {{ test }} *provide 값을 반드시 변수값으로 할 필요는 없습니다. 이렇게만 보면 엄청나게 편리한 기능이라고 느껴집니다. 귀찮게 props .. 공감수 0 댓글수 0 2021. 9. 7.
vue3.js 세팅하기(vue-router) vue.js cli 설정 하는 방법을 알아보겠습니다. npm install -g @vue/cli // cli3 버전 npm install vue-cli //cli2 버전 cli툴을 설치해주세요! vue create {project명} //3.x vue init {탬플릿} {파일 경로} //2.x 프로젝트 생성 //3.x npm run serve yarn serve //2.x npm run dev yarn dev 로컬 실행 방법 cli2 vs cli3 cli2는 기본 세팅이 없음, 탬플릿 선택해야됨, webpack이 밖에 들어나 있음, node module이 자동설치 안됨 cl3는 기본 설정 있음,탬플릿 따로 없음,내장 webpack, node module자동 설치됨 (자세한건 제가 참고한 블로그를 봐주세.. 공감수 2 댓글수 0 2021. 6. 8.

반응형

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.