2. 기초

• script부분 구조

  • <script>
    import '??' from '??'
    
    export default {
    	name : '???',
        data() {
        	return {
            	?? : ??
            }
        },
        methods : {
        	??() {
            	??
            }
        },
        components : {
        	??,
        },
        LifeCycleHook...
    }
    </script>

• 데이터 바인딩
  • 데이터 보관함

  • <script>
    export default {
    	name : 'App',
        data() {
        	return {
            	testData : 10,
                mainColor : 'color : red'
            }
        }
    }
    </script>

  • 데이터 사용

  • <h1 :style="mainColor">{{testData}}</h1>

• 반복문

  • <div v-for="i in data" :key="i"></div>

  • 자바스크립트 for...in 문과 같으며 i부분에 변수를 두개까지 할당 가능
  • 변수 두개 할당시 첫번째 변수는 실제 데이터, 두번째 변수는 인덱스 값이다.
  • :key는 일반적으로 인덱스값을 잡아줌
• 조건문

  • <div v-if="true">이 부분은 보이는 부분</div>
    <div v-if="false">이 부분은 안보이는 부분</div>
    <div v-if="물론 변수 사용 가능"></div>

  • <div v-if="num === 1"></div>
    <div v-else-if="num === 2"></div>
    <div v-else="num === 1"></div>

• 이벤트

  • <div @click="클릭했을때 일어날 이벤트내용 혹은 함수 호출"></div>

• 함수

  • ...
    methods: {
    	함수명(매개변수 명) {
        	실행 코드
        }
    }
    ...

  • ex) 클릭이벤트 실행시 작동해야 하는 코드가 길때 사용하고 기타 등등이 있다.
• Component

  • <template>
    	<h1>component 부분 마크업</h1>
    </template>
    
    <script>
    <!-- vue 코드 작성 부분 -->
    
    export default {
    	...
    }
    </script>
    
    <style scoped> <!-- 해당 컴포넌트에만 유효한 스타일을 적용하고싶으면 scoped를 style옆에 붙여주자 -->
    <!-- 스타일 적용 부분 -->
    </style>

  • 컴포넌트 파일 내부 구조는 위와 같이 작성하면 되고 파일 이름은 관례상 PascalCase를 사용해주는것이 일반적이다.
  • ex) Menu.vue

  • <template>
    	<Menu/>
        <Menu></Menu>
    </template>
    
    <script>
    import Menu from './Menu.vue'
    
    export default {
    	component : {
        	Menu,
        }
    }
    </script>
    
    <style>
    
    </style>

  • 컴포넌트 사용
    • 1. 해당 컴포넌트 파일을 import해온다.
    • 2. 컴포넌트에 import해온 파일을 등록해 준다.
    • 3. template부분에서 등록해놓은 컴포넌트를 태그 형식으로 사용할 수 있다. 
• 컴포넌트간 데이터 통신
  • 부모요소에서 자식요소로 데이터를 보내는방법

  • <template>
    
    <Menu :menuNumber="menuNumber"/>
    
    </template>
    
    <script>
    export default {
    	data() {
        	return {
            	menuNumber : 1
            }
        }
    }
    </script>

  • 자식요소에서 부모요소에게 데이터를 받는 방법

  • <template>
    	{{menuNumber}}
    </template>
    
    <script>
    export default {
    	name: 'Menu'
    	props: {
        	menuNumber : Number
        }
    }
    </script>

  • 자식요소가 부모에게 데이터 변경을 요청하는 방법

  • <!-- 자식 컴포넌트 -->
    <template>
    	<button @click="$emit('eventName')"></button>
    </template>
    
    <script>
    export default {
    	name: 'Menu',
    	props: {
        	menuNumber : Number
        }
    }
    </script>
    
    <!-- 부모 컴포넌트 -->
    <template>
    	<Menu @eventName="menuBtnClick"/>
    </template>
    
    <script>
    export default {
    	name: 'Menu',
    	methods : {
        	menuBtnClick() {
    			alert('메뉴를 클릭했네요??')
            }
        }
    }
    </script>

  • 위와 같은 방법으로 특정 데이터를 변경 혹은 함수를 호출해서 이벤트 처리가 가능하다.
• input Data 가져오기

  • <template>
      <div>
        <input @input="show1 = $event.target.value" type="text"/>
        <input @input="changeShow" type="text" />
        <input v-model="show3" type="text">
        <p>{{ show1 }}</p>
        <p>{{ show2 }}</p>
      </div>
    </template>
    
    <script>
    export default {
      name: "App",
      data() {
        return {
          show1: "",
          show2: "",
          show3: "",
        };
      },
      methods: {
        changeShow(e) {
          this.show2 = e.target.value;
        },
      },
    };
    </script>

  • $event.target.value : 이벤트가 발생했을때 이벤트 타겟의 값을 가져올 수 있다.
  • v-model : $event.target.value와 같음 / input에 데이터 입력시 show3의 값이 바뀜
• watcher
  • 데이터의 변경을 감지하고 변경이 일어났을때 어떠한 동작을 할 지 정의할 수 있다.

  • <template>
      <div>
        <input type="text" v-model="text" />
      </div>
    </template>
    
    <script>
    export default {
      name: "App",
      data() {
        return {
          text: "",
        };
      },
      watch: {
        text(a) {
          alert(a + "변경");
        },
      },
    };
    </script>