본문 바로가기
Tech/Front End

[Vue공부] 3. vue 기초문법

by Augustine™ 2021. 11. 3.
반응형

https://augustines.tistory.com/211

 

[Vue공부] 2. Vue-cli 와 설치

https://augustines.tistory.com/209 [Vue공부] 1. 알고 있어야 하는 개념들-1) Vue.js를 공부하기 전에 MVVM 에 대해 간단히 알아보자. Vue.js에서는 반응형 웹을 지원하기 위해 MVVM(Model-View-ViewModel)을 따..

augustines.tistory.com

 

간단한 준비 작업

생성한 프로젝트인 test-vue 에 App.vue를 열면, HelloWorld 라는 예제 컴포넌트가 import 되어 있다. 이를 지우고, 위에 template에 있는 태그도 지우자. 그리고 StartVue라는 컴포넌트를 만들어서 기본적인 Vue 문법에 대해 알아볼 것이다.

우선 App.vue는 아래와 같이 수정하자.

<template>
  <div id="app">
    <Start-Vue></Start-Vue>
  </div>
</template>

<script>
import StartVue from './components/StartVue.vue'

export default {
  name: 'App',
  components: {
    StartVue,
  },
}
</script>

<style></style>

당연히, StartVue.vue라는 파일도 만들어야 한다. 우선 내용이 없어도 된다.

텍스트 바인딩

Vue의 템플릿 태그 안에서, 컴포넌트의 데이터를 렌더링하기 위해선 {{ data명 }} 를 사용한다. StartVue.vue의 script 안에 data를 아래와 같이 넣고 template 에는 script에 있는 data 명을 {{ }} 감싸서 코딩한다.

<template>
  <h1>{{ message }}</h1>
</template>

<script>
export default {
  data() {
    return {
      message: "left's start",
    }
  },
}
</script>

 

반복 렌더링

반복을 위해 v-for 디렉티브를 사용한다. 작성한 StartVue.vue를 보면 data에 items이 배열로 입력되어 있다. 이를 반복 렌더링을 하려면, v-for 를 사용한다. vue 버전 2.2.0 이상부터는 v-for를 사용할 때, v-bind:key 값이 요구된다고 한다. 

<template>
  <div>
    <ul>
      <!-- <li v-for="바인딩 명 in 데이터" v-bind:key="바인딩 키">{{바인딩 키}}</li> -->
      <li v-for="item in items" v-bind:key="item">{{ item }}</li>
    </ul>
    <ul>
      <li v-for="item in itemObjects" v-bind:key="item.name">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['menu1', 'menu2', 'menu3'],
      itemObjects: [{ name: '길동' }, { name: '명동' }],
    }
  },
}
</script>

 

v-model 사용

v-model을 사용해서 vue의 데이터와 동기화를 해서 반응형을 구현할 수 있다. StartVue.vue에 input 태그를 만들고 v-model 을 사용해서 vue의 data를 컨트롤해보자. 그리고 data에 빈 값으로 title이라는 데이터를 선언하자.

//  template 부분
<input type="text" v-model="title" />
//script의 data 부분
title: ''

아래 그림 처럼, StartVue 컴포넌트의 title이 동적으로 바인딩되는 것을 확인할 수 있다.

v-if 사용

템플릿에서 조건별 분기를 사용할 수 있다. button 태그를 만들어서 click event로 changeShow 함수를 호출한다. changeShow는 show의 상태를 변경시키고, v-if에서는 show의 상태별로 태그 자체를 보이고 감출 수 있다.

<template>
  <div>
    <h1 v-if="show">Loading..........</h1>
    <button v-on:click="changeShow()">click</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
    }
  },
  methods: {
    changeShow() {
      this.show = !this.show
    },
  },
}
</script>

그 밖에...

속성에 데이터를 반인딩 하려면, v-bind 디렉티브를 사용해야 한다. 

<!-- 아래의 경우엔 컴파일 에러가 발생한다. -->
<input type="text" value="{{text}}">

<!-- 속성에 데이터 바인딩을 위해 아래 처럼 v-bind를 사용해야 한다.-->
<input type="text" v-bind:value="text">

<!-- v-bind는 아래처럼 생략할 수 있다 -->
<input type="text" :value="text">
반응형

댓글