for문과 if문, 이벤트 핸들러, Vue 함수, import와 export

반복문(for)

vue에서는 반복문으로 for문을 쓴다.

for문을 따로 선언하지 않고 태그안에다 끼워서 쓴다.

export default {
  name: 'App',
  data() {
    return {
      animals : ['cat', 'dog', 'mouse'],
    }
  },
  components: {
    HelloWorld
  }
}

<a v-for="animal in animals" :key="animal">{{ animal }}</a>

animals라는 배열을 animal이라는 변수에 하나씩 넣어 출력한다.

animals자리에 배열이 아닌 object 자료형도 넣을 수 있다.

key는 반복문을 사용할 때 꼭 써야한다.(안쓰면 에러남)

key 컴퓨터가 반복문을 돌릴때 각각의 요소를 구분하기 위한 값이라고 보면된다.

그래서 key에다가는 유니크한 숫자같은 값을 넣어준다.

그래서 아래와 같이 사용한다.

<a v-for="(animal,i) in animals" :key="i">{{ animal }}</a>

animal에는 animals 배열의 원소가 담기고 i는 인덱스가 담긴다.

즉 반복 횟수에 따라 0, 1, 2... 이런 값이 담긴다.

그래서 그 값을 보통 키값으로 사용한다.

 

 

 

조건문(if)

if문도 for문과 같이 태그안에 끼워넣어서 쓴다.

<span v-if="조건문"></span>

 

 

 

이벤트 핸들러

onclick : 클릭시 이벤트 실행

<button v-on:click="자바스크립트 코드"></button>

or

<button @click="자바스크립트 코드"></button>

 

mouseover : 마우스 올려놓을 시 이벤트 실행

<span @mouseover="count++">마우스 대기</span>

 

+ 자바스크립트 코드 집어넣는 곳에 코드가 길어지면 자바스크립트 함수를 만들어서 넣는다.

예시

<span @mouseover="add_count">마우스 대기</span>

함수를 넣을 때는 ()를 포함시키지 않은 함수명만 넣는다.

 

 

 

Vue 함수 만드는 방법

methods를 추가하여 안에 함수를 만든다.

state안에 있는 변수를 쓰려면 앞에 꼭 this.을 써줘야 한다.

 

 

 

import, export

외부에 있는 js 파일의 데이터를 App.js에서 가져다 쓰고 싶을 때가 있다.

그때 사용하는 키워드가 import이다.

 

변수 가져다 쓰기

외부 js 파일

var ksy = "김소영";

export default ksy

ksy 변수를 외부에서 사용할 수 있게 하려면 export를 사용해야 한다.

 

App.js

<script></script>안 맨 윗줄에다가 아래의 코드를 입력한다.

import ksy from '경로';

ksy 말고 다른 변수이름을 지어서 입력해도 된다.

주의사항 : import를 한 변수는 반드시 사용을 해야한다. 안하면 error남.

 

 

변수 2개 이상 넘길 때

var ksy = "김소영";
var hi = 'hi!!';

export {ksy, hi}

이렇게 넘겨야 한다.

그리고 받을 때는 

import {ksy, hi} from './asset/test.js';

이렇게 받는다.

 

 

 

또다른 방법

export default [{name: 'ksy'}, {hi: 'hi!!'}]

외부 js 파일에서 오브젝트 형의 배열을 export한다.

 

import data from './asset/test.js';


그리고 사용
return (
	me : data,
)


출력
{{ me[0].name }}
<!--결과 : ksy-->

 

 

 

 

 

 

 

출처 : https://www.youtube.com/playlist?list=PLfLgtT94nNq3Br68sEe26jkOqCPK_8UQ- 변형 및 요약