Vue 컴포넌트 기초

Vue 컴포넌트

 

미리 앞서 es-lint를 사용한다면 컴포넌트 이름을 작성 할 때는 한 단어로 작성해선 안된다.

예를 들어 "ToDo"는 가능 하지만 "Todo"는 오류가 난다.

 

Vue 영역 태그

 

Vue에서는 html, script, css를 한 페이지 안에 작성할수 있다.

<template>

</template>

<script>
export default {


}
</script>

<style scoped>

</style>

(각각 Emmit 기능으로 쉽게 쓸 수 있다. )

template 영역에는 html 코드를 쓸 수 있고, script에는 자바 스크립트를, style영역에는 css를 사용할 수 있다.

Vue의 가장 기본적인 스트립트 형태는 아래와 같다.

<script>
export default {
  name: 'scriptOne',
  components: {},
  data() {
    return {
      title: 'Hi',
    };
  },
};
</script>

name은 컴포넌트의 이름이며, 둘 이상의 단어로 이루어져야 한다.

components는 외부에서 컴포넌트를 임포트 할 때 사용가능하다.

마지막으로 data()는 말그대로 안에 데이터를 저장 할 수 있다. 위처럼 'title:"hi"'라고 적고 template 안에 title을 적어보자.

(Vue의 template 안에는 상위 태그(안의 태그를 감싸는 거다란 하나의 태그)가 반드시 필요하다)

<template>
    <div>
        <h1>Hello</h1>
        <p>{{ title }}</p>
    </div>
</template>

2개의 중괄호 안에 data 값을 넣으면 실행했을 때, Hello 밑에 Hi라는 글자가 출력 될 것이다. 만약 title의 값을 바꾸면 바로 바뀐 값이 적용된다.

또 다른 특이한 점은 data의 값이 양방향으로 정의 될 수 있다는 점이다.

<template>
  <div>
    <h1>Hello</h1>
    <p>{{ title }}</p>
    <input type="text" v-model="title" />
  </div>
</template>

이대로 실행하면 페이지의 input 안에 title의 값이 담기게 된다. 이 때 input에 입력을 해서 값을 바꾸면 p태그안의 값 역시 input 값과 똑같이 변한다.

그외에 많이 쓰이는 메소드에는

setup(){},
    created(){},
    mounted(){},
    unmouted(){},
    methods:{
    }

등등이 있다. 앞으로 차차 배워보도록 하자.