[FE] Vue2 문법 정리 1

Vue 문법 정리 1

Vue2 기준으로 정리 

 

 

1. 인스턴스와 라이프사이클

 

✴️ 인스턴스 생성 

// main.js
import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App),
}).$mount('#app');

 

생성된 인스턴스는 애플리케이션의 주요 구성 요소로 데이터와 메서드를 관리하고 DOM과의 상호작용 처리

 

✳️ 주요 속성 및 옵션 

• 데이터 (Data) : Vue 인스턴스의 데이터는 data 옵션을 통해 정의되며 반응성을 가짐 👉 데이터가 변경되면 DOM이 자동으로 업데이트됨

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
});

 

• 메서드 (Methods) : Vue 인스턴스에서 사용할 수 있는 함수 포함

<script>
import Fruit from './components/FruitList.vue'

export default {
  components:{
    Fruit
  },
  data(){
    return{
      count: 0,
      fruits:['Apple', 'Banana', 'Cherry']
    }
  },
  methods:{
    increase(){
      this.count += 1
    }
  }
}
</script>

 

✴️ 라이프사이클 훅

각 컴포넌트는 생성될 때 일련의 초기화 단계 거치면서 라이프사이클 훅이라 불리우는 함수도 실행하여 사용자가 특정 단계에서 자신의 코드 추가 가능 

 

 

1. 인스턴스 생성 단계

• beforeCreate: 컴포넌트가 생성되기 직전에 실행되는 함수 
• created: 데이터들과 기본적인 반응성들이 만들어지는 과정 거친 후 즉, 컴포넌트가 생성된 직후에 실행 👉 html 구조에 연결되기 전 

 

2. DOM 부착 단계

• beforeMount : html과 연결되기 전 상태이므로 html 구조 조회 불가능 
• mounted : 인스턴스가 element에 연결된 후 호출됨 👉 인스턴스의 element가 DOM에 삽입됨.
  실제 현재의 컴포넌트가 html 구조에 연결되어 있으므로 html 구조를 조회해서 출력 가능

 

 

 

2. 템플릿 문법

✴️ 보간법 (Interpolation) & 디렉티브 (v- )

👉 텍스트나 HTML 요소에 데이터를 삽입하는 방법

 

• 텍스트 : 이중 중괄호 사용
  • v-once : 데이터 변경 시 업데이트되지 않는 일회성 보간 수행

<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
});
</script>

<span v-once>다시는 변경하지 않습니다: {{ msg }}</span>

 

 

• HTML : HTML 태그를 포함한 문자열을 DOM에 삽입
  • v-html

<div id="app">
  <p>Using mustaches: {{ rawHtml }}</p>
  <p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    rawHtml: '<span style="color: red">This should be red.</span>'
  }
});
</script>

 

• 전달 인자 : HTML 속성에 데이터를 바인딩할 때 사용
  • v-bind : HTML 속성에 데이터를 바인딩할 때 사용 👉 HTML 속성 갱신하는데 사용
  • v-on : DOM 이벤트 수신

<!-- 전체 문법 -->
<a v-bind:href="url"> ... </a>

<!-- 약어 -->
<a :href="url"> ... </a>

👉 href는 전달인자로 element의 href 속성을 표현식 url의 값에 바인드

 

<!-- 전체 문법 -->
<a v-on:click="doSomething"> ... </a>

<!-- 약어 -->
<a @click="doSomething"> ... </a>

👉 전달인자 = 이벤트를 받을 이름

 

 

 

 

3. computed 속성

반응형 데이터의 계산된 속성을 정의할 때 사용 👉 종속된 데이터가 변경될 때만 다시 계산됨
caching 기능이 있기 때문에 한 번 연산해 놓은 값이 있으면 반복적으로 화면에 데이터처럼 출력할 때 다시 한 번 연산 X

<template>
  <div>
    <p>원본 메시지: {{ message }}</p>
    <p>역순 메시지: {{ reversedMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue.js!'
    };
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  }
};
</script>

 

reversedMessage ➔ 계산된 데이터는 읽기 전용이므로 할당 연산자를 통해 어떤 값을 할당하더라도 반응적으로 동작 X
👉 값을 얻어내는 용도로만 사용하므로 Getter

message ➔ 값을 얻어내는 용도 or 값을 지정하는 용도 
👉 Getter, Setter 모두 정의 가능 

 

✴️ computed 속성에서도 setter 사용하기

// ...
computed: {
  reversedMessage: {
    // getter
    get() {
      return this.msg.split('').reverse().join('')
    },
    // setter
    set(value) {
      this.msg = value
    }
  }
},

methods:{
	add(){
    	this.reversedMessage += '!?'
    }
}
// ...

 

add 메소드 실행 ➔ set 메소드 실행 ➔ value 부분에는 기존에 reversedMessage에 !?가 붙어있는 새로운 값 들어옴 ➔ value가 원본의 msg라는 데이터에 할당 ➔ msg는 할당된 값으로 변경됨 ➔ getter로 split, reverse, join 통해 새로 변경된 값을 다시 반환해서 출력

 

 

 

4. 클래스와 스타일 바인딩

 

✴️ HTML 클래스 바인딩

특정한 데이터를 기준으로 해서 해당하는 요소에 특정한 클래스 이름이 연결될 것인지 정의 가능 

 

 

✳️ 객체 구문

<div v-bind:class="{ active: isActive }"></div>

isActive의 참 속성에 의해 active 클래스의 존재 여부가 결정됨 
👉 isActive가 true면 active 클래스가 연결됨 

 

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

객체에 더 많은 필드를 포함하여 여러 클래스를 전환 가능 
⚠️ 특수기호가 들어가는 camelcase가 아닌 문법을 사용해야한다면 따옴표('') 사용

 

 

✳️ 배열 구문

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

 

 

✴️ 인라인 스타일 바인딩 

스타일 객체에 직접 바인딩하여 템플릿을 더 간결하도록 만드는 것이 좋음 

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

 

---

<template>
	<h1
    	:style="[fontStyle, backgroundStyle]"
        @click="changeStyle">
    </h1>
</template>

<script>
export default {
	data() {
    	return {
        	fontStyle: {
            	color: 'orange',
                fontSize: '30px'
            },
            backgroundStyle: {
            	backgroundColor: 'black'
            }
        }
    },
    
    methods: {
    	changeStyle() {
        	this.fontStyle.color = 'red'
            this.fontStyle.fontSize = '50px'
        }
    }
}
</script>

 

 

5. 조건부 렌더링

조건에 따라 블록을 렌더링할 때 사용

<h1 v-if="awesome">Vue is awesome!</h1>

• v-if 
• v-else-if
• v-else
• v-show

✴️ v-if와 v-show의 차이 

👉 v-if는 true일 때만 화면에 렌더링.
👉 v-show는 항상 렌더링되어 구조적인 렌더링이 화면에 출력되지 않게끔 style 속성에 display:none 부여
그러므로 <template> 엘리먼트 지원하지 않으며 v-else와 함께 사용 불가 

💥 자주 전환해야 한다면 v-show 사용하는 게 좋고, 런타임 시 조건이 변경되지 않는다면 v-if 사용하는 게 더 나음!

 

 

6. 리스트 렌더링 v-for

<template>
  <ul>
    <li
        v-for="fruit in newFruits"
        :key="fruit.id">
      {{ fruit.name }}
      </li>
  </ul>
</template>

<script>
export default {
  data(){
    return{
      fruits:['Apple', 'Banana', 'Cherry']
    }
  },
  computed:{
    newFruits(){
      return this.fruits.map((fruit, index) => {
        return {
          id: index,
          name: fruit
        }
      })
    }
  }
}
</script>

 

✴️ 변이 메소드 

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

 

✴️ 배열 교체 → 원본배열 변형하지 않고 항상 새 배열 반환 

• filter()
• concat()
• slice()

👉 기존 DOM을 버리고 전체 목록을 다시 렌더링하는 것 X → DOM 요소 재사용해서 효율적으로 작업

 

 

참고자료 

https://v2.ko.vuejs.org/v2/guide/instance.html