Vue 기본 문법 정리

 

Vue 기본적인 문법 정리

 

 

 

 

---

 

 

1. Vue 선언

 

 

https://ko.vuejs.org/guide/quick-start.html

Vue.js

 

 

- Vue 공식 홈페이지에서 확인 할 수 있는 Vue JS를 import 해야한다

 

[ 현재 버전 Vue.js ]

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

 

[ Vue의 기본 형태 ]

const app = Vue.createApp({
	-- method, data 등 입력 가능
});

app.mount('#test');

 

- Vue는 Vue.createApp을 통해서 선언 한 뒤 해당 Vue를 사용할 영역을 설정한다

- app.mout('#[ ID ]') <- 의 형태를 통해서 해당 ID에 해당하는 영역에 Vue를 사용할 수 있도록 설정한다

 

 

 

2. 데이터 바인딩

 

- Vue 양방향 바인딩을 사용한다

<span>메세지: {{ msg }}</span>

 

위 형태와 같이 {{ data }} 형태를 통해 html 영역에서 사용이 가능하며, 

 

const app = Vue.createApp({

	data(){
    	return {
    		msg : 'hello'
        }
    },
});

app.mount('#test');

 

위 와같이 data에 해당 바인딩 테이터를 선언해두면 된다

 

 

[ 양방향 바인딩 ]

<input type="text" v-model="name">
//   v-bind:value v-on:input의 경우
//     <input type="text" :value="name" @input="inputData">
<input type="text" @input="enteredGoalValue = $event.target.value"/>
<button v-on:click="resetInput">Reset Input</button>
<p>Your Name: {{ name }}</p>

// 현재 data : name 에는 '' 로 데이터 입력 X

 

기존 name data ' ' 공백이기에 출력 X

name에 name : data! 를 입력하고 해당 데이터를 alert으로 출력하여 확인

 

 

위와 같이 name에 데이터를 입력하면, 자동으로 Vue.js에 선언 된 name에도 동일한 데이터가 양방향 바인딩을 통해 입력 된 것을 확인할 수 있다

 

 

3. v-bind, v-on, v-model

 

v-bind : class, style, value 등 속성(attribute)을 표현식에 동적으로 바인딩한다. 축약하여 " : "로 표현

 

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

// :class = v-vind:class 

data() {
  return {
    isActive: true,
    hasError: false
  }
}

// 결과 <div class="static active"></div>

 

 

v-on : 해당 element에 event listener를 연결한다. 축약하여 "@"로 표현

 

[ v-on 속성 ]

@click="event": 클릭했을 때 실행
@change="event": 요소가 변경될 때 실행
@dbclick="event": 더블 클릭했을 때 실행
@mouseover="event": 마우스의 포인트가 요소 위로 올라왔을 때 실행
@submit="event": form이 제출될 때 실행
@reset="event": form이 재설정될 때 실행
@select="event": select 값이 선택되었을 때 실행
@focus="event": 태그에 포커스가 있을 때 실행
@keyup="event": 키보드의 키를 놓았을 때 실행
@keydown="event": 키보드의 키를 눌렀을 때 실행
@keypress="event": 키보드의 키를 눌렀다가 놓았을 때 실행

 

<div id="event-with-method">
  <button @click="clickMethod">clickMethod</button>
  // v-on:click = @click
</div>


Vue.createApp({
  data(){
  	return{
    	name : 'test'
    };
  },
  methods: {
    clickMethod(event) {
     	alert(event.target.tagName);
        // 해당 Element target 데이터를 가지고있음
    }
  }
});


// Data 바인딩 시

<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>


methods: {
    clickMethod(msg, event) {
    	alert(msg);
        // Form cannot be submitted yet. 출력
     	alert(event.target.tagName);
        // 해당 Element target 데이터를 가지고있음
    }
  }

 

 

 

v-model : v-bind와 v-on을 편하게 쓸 수 있게 합쳐놓은 문법

    ** 단, 한글호환이 제대로 이뤄지지않기에 한글의 경우 v-bind, v-on 방식을 사용하는 것이 좋음

 

<input type="text" v-model="name">
//   v-bind:value v-on:input의 경우 
//    <input type="text" :value="name" @input="inputData">
<button v-on:click="resetInput">Reset Input</button>
<p>Your Name: {{ name }}</p>

// 현재 data : name 에는 '' 로 데이터 입력 X


// v-bind의 경우 value에는 data의 name을, input에는 method의 inputData를 참조한다고 보면된다

 

[ v-bind:input의 경우 바로 데이터를 입력할 때 ]

      <input type="text" @input="enteredGoalValue = $event.target.value"/>

 

 

** v-model의 경우 아직 완벽하게 한글에 호환되고 있지 않다. 한글을 사용하려면 다른 조치가 필요하니 필요 시 조치

아래의 @input을 사용할 경우 v-model과 동일한 효과를 볼 수 있다

4. method, computed, watch

 

 

[ 참고 블로그 ]

 

https://leffept.tistory.com/322

[Vue]Computed 와 Watch 언제 사용할까? (feat. computed vs methods)

 

 

Vue에서 method, computed, watch는 컴포넌트로 선언 가능

 

const app = Vue.createApp({
  data() {
    return {
     
    };
  },
  computed:{
    // 데이터 바인딩에 보통 사용
    // 데이터 변화시에만 실행
  },
  watch: {
    // 업데이트 문에 보통 사용
  },
  methods: {
   // 이벤트 바인딩에 보통 사용
   // 매번 재실행
  }
});

app.mount('#events');

 

 

간단하게 정의하자면

 

- method : 캐싱에 등록되지 않기에 매번 재실행되며, 이벤트 바인딩에 사용하기 적합함

- computed : 캐싱에 등록되어 데이터가 변할 때만 실행되며, 데이터 바인딩에 사용하기 적합함

- watch : 업데이트 작업에 적합함, 사용빈도가 가장 낮음

 

 

 

 

5. v-if, v-show

 

  <section id="user-goals">
      <h2>My course goals</h2>
      <input type="text" :input="enteredGoalValue"/>
      <button @click="addGoal">Add Goal</button>
      
      // v-if, v-else-if, v-else 사용법
      
      <p v-if="goals.length === 0">No goals have been added yet - please start adding some!</p>
      <ul  v-else-if="goals.length === 1">
        <li>Goal</li>
      </ul>
      <ul v-else>
        <li>Goalssssssssss</li>
      </ul>
      
      // 단, v-if, v-else-if, v-else 사이에 다른 마크업 코드가 있으면 정상작동 x
      
      // v-show 사용법
      
      <ul v-show="goals.length < 1">
        <li>no Goal!</li>
      </ul>
      
  </section>

 

 

** v-if와 v-show의 차이점

 

v-if, v-else-if, v-else의 경우 조건에 맞지 않는 것들은 완전히 html 코드가 사라지지만, v-show의 경우 display:none 처리가 될 뿐 직접적인 코드가 사라지는 것은 아니다

 

 

 

6. v-for

 

 

<ul v-else>
	// goal in goals 기본 문법 (goals : 배열, 객체 등 , goal 배열 담는 파라미터)
        <li v-for="goal in goals">{{ goal }}</li>
        <li v-for="(goal, idx) in goals">{{ goal }} - {{ idx }}</li>
      </ul>
      <ul>
        <li v-for="(key, value) in {name: 'Max', age: 31}">{{ key }} : {{ value }}</li>
        <li v-for="value in {name: 'Max', age: 31}">{{ value }}</li>
      </ul>
      <ul>
        <li v-for="num in 10">{{ num }}</li>
      </ul>

 

v-for의 기본 사용법은 위와 같은 형태로 사용하면 된다

 

<li v-for="(goal, idx) in goals" :key="goal" @click="removeGoal(idx)">
          <p>{{ goal }} - {{ idx }}</p>
          <input type="text" :value="goal" @click.stop>
        </li>

 

 

v-for의 key 선언 이유 

 

[ 참고 블로그 ] 

 

https://zzang9iu.tistory.com/101

[VUE] v-for key속성 사용하는 이유

 

https://mytory.net/archives/15356

Vue의 v-for에서 :key를 사용해야 하는 이유

 

 

        <li v-for="(goal, idx) in goals" :key="goal" @click="removeGoal(idx)">
          <p>{{ goal }} - {{ idx }}</p>
          <input type="text" :value="goal" @click.stop>
        </li>

 

위 코드의 경우 아래와 같은 html 코드이다

 

 

 

위 경우 박스를 클릭 시 박스가 삭제되게 되는데, 22를 삭제하면 11,33번 박스만 남게된다.

하지만 Vue의 경우 key를 설정하지 않을 시 식별 기준이 없기에 33번 박스의 text 박스 값이 33이 아닌 22가 재사용되게 된다.

 

이러한 문제를 해결 및 대부분의 경우에는 key를 설정하는 것이 좋다

 

단, key는 고유한 식별 번호가 필요하며, 해당 식별 번호는 v-for(data, index)의 index를 사용해서는 안된다.

이유는 index는 해당 데이터 삭제시 가변적으로 변하는 데이터 이기 때문이다.