로메오의 블로그

VUE.JS 목록 $ touch src/components/Checkbox.vue Checkbox.vue를 만들고 아래와 같이 코딩합니다. src/component/Home.vue {{ text }} VUE.JS 목록

VUE.JS 목록 src/component/Home.vue src/component/Child.vue {{ message }} kr.vuejs.org/v2/api/#provide-inject 공식 문서에 공통 컴포넌트를 위해서 사용하고, 개별 컴포넌트에서는 사용을 권장하지 않습니다. 가독성이 prop보다 떨어지기 때문입니다. VUE.JS 목록

VUE.JS 목록 src/component/Home.vue 자식에게 받은 counter: {{ count }} src/component/Child.vue 숫자 올리기 VUE.JS 목록

VUE.JS 목록 src/component/Home.vue 버튼 버튼을 추가합니다. /src/component/Child.vue {{ alertMessage }} {{ parentMessage }} Watch 함수를 생성합니다. parentMessage가 변경되면 Watch 함수 updateMessage가 실행됩니다. VUE.JS 목록

VUE.JS 목록 $ touch src/components/Child.vue src/components/Child.vue 파일을 생성하고 아래와 같이 코딩합니다. {{ parentMessage }} src/components/Home.vue 파일을 아래와 같이 수정합니다. 서버를 구동합니다. $ yarn serve 표현식 변수 사용하기 Home.vue에서 parentMessage를 동적인 변수로 사용할수 있습니다. ... ... /src/componets/Home.vue 파일을 위와 같이 수정합니다. 전체 코드는 아래와 같습니다. parent로 데이터 전송하기 1. Propsync 사용 update 2. Prop and Emit 사용 update VUE.JS 목록

VUE.JS 목록 $ touch src/components/Message.vue Message.vue파일을 생성하고 아래와 같이 코딩합니다. src/components/Message.vue {{ message }} src/views/Home.vue 서버 구동하기 ## yarn인 경우 $ yarn serve ## npm인 경우 $ npm run serve The class property 'message' must be marked either 'private', 'public', or 'protected' 오류가 발생할 경우 tslint.json 파일을 열어서 "member-access": false 추가하고 다시 서버를 구동합니다. { "defaultSeverity": "warning", "extend..

VUE.JS 목록 vue cli 설치 ## npm 으로 설치 $ npm install -g @vue/cli $ vue --version @vue/cli 5.0.1 ## 특정버전으로 설치 $ npm install -g @vue/cli@5.0.1 $ vue --version @vue/cli 5.0.1 현재 저의 vue-cli 버전은 5.0.1 입니다. $ vue --version @vue/cli 5.0.1 프로젝트 생성 $ vue create first-project ? Please pick a preset: (Use arrow keys) Default ([Vue 2] babel, eslint) Default (Vue 3 Preview) ([Vue 3] babel, eslint) > Manually sele..

VUE.JS 목록 vue.js 폼 유효성 검사 프로토타입입니다. HTML Template 아래 오류를 수정하세요.: {{ error }} 이름 이메일 최애 영화 토이스토리 알라딘 겨울왕국 CSS #app { margin: 10px; } input,select { margin-left: 10px; } Script var app = new Vue({ el: "#app", data: { errors: [], name: null, email: null, movie: null }, methods: { checkForm(e) { e.preventDefault(); this.errors = []; if (!this.name) { this.errors.push("이름은 필수입니다."); } if (!this.email..