(국비교육) 72 - vue ( 반복문 + 구구단 + 소리버튼 + 증가버튼 + div)

■ vue

 

 

* 요청사항

- babel :

Babel은 최신 버전의 JavaScript 코드(ES6+ 문법)를 브라우저나 환경에서 지원하는

이전 버전의 JavaScript 코드로 변환해주는 도구

 

- eslint :

ESLint는 코드에서 발견된 잠재적인 문제나 스타일 가이드의 위반을 식별하고 보고해주는 도구

 

 

vs 코드에서 새 터미널로 npm new serve 로 열어주기 

 

 

중요한 파일 3가지

 

 

scope 이 스타일은 여기서만 쓰이고 다른 곳에서는 쓰이지 않는다는 뜻이다. 

 

 

여기서의 #app 의 스타일은 index.html 의 id="app" 의 스타일을 주는 것이다. 

 

props 와 emit

prop 는 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달 방법

emit 은 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달 방법

 

https://webruden.tistory.com/925

Vue emit 사용법 및 간단 예제 (How to Emit Data in Vue)

 

 

 

각각  webkit, moz 렌더링 엔진마다 달라서 브라우저마다 효과를 다르게 주는 것이다. 

 

 

3가지를 추가해준다. 

참고로 Board 는 생성 안돼서 BoardVue 로 이름 바꿔준다. 

 

 

효과주기

 

 

items 배열 만들어주기

 

 

v-for 을 통해 반복문 값 찍어주기 가능하다.

v-bind:key 기준값을 설정해줘야 올바르게 찍힌다. 

 

 

다음과 같이 찍을 수 있다.

n 은 1부터 index 는 0부터 찍힌다. 

 

■ 구구단 찍기

 

 

구구단을 옆으로 나란히 찍어줄 수 있다. 

 

■ 버튼 누르면 소리나기

 

 

메소드 사용해서 파일이 있다면 오디오 플레이 시킬 수 있다. 

 

■ 1씩 증가하는 버튼 만들기

 

 

머스타쉬 태그 선언해준다.

data 로 변수 초기값 설정해주고 

클릭해보세요 버튼 클릭 시 1씩 증가하는 메서드 this.count += 1 을 통해 만들어준다. 

 

 

마찬가지로 up, down, reset 버튼도 만들 수 있다. 

 

■ Div 박스 만들기

 

 

app.vue 에서 DivBox 불러주면 쓸 수 있다.

여러개 부르는 것도 가능하다. 

 

 

3개 div 영역 출력된다.