템플릿 문법

• 화면을 조작하기 위한 vue.js 제공하는 문법

 

<뷰 디렉티브>

• 형식 : v-
• "" 안에는 js 문법이 들어올 수 있음

 

1. v-on : 엘리먼트에 이벤트 리스너를 연결

<!-- 메서드 핸들러 -->
<button v-on:click="doThis"></button>

<!-- 동적 이벤트 -->
<button v-on:[event]="doThis"></button>

** v-on:submit -> @submit 과 동일하다. 

 

 

2. v-bind : 하나 이상의 속성 또는 컴포넌트 prop을 표현식에 동적으로 바인딩

형식 -  v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"

<app-header v-bind:propsdata="message"></app-header>

** v-bind 생략하고 :propsdata 과 동일하다. 

 

3. v-model  : 양방향 바인딩을 구현

<input v-model="searchText" />

 

4. v-if, v-else : if-else 구문과 동일. if, else두 개는 인접해 있어야 한다. 

    <div id="root">
        <div v-if="liked">좋아요 눌렀음</div>
        <button v-else v-on:click="onClickButton">like</button>
    </div>

 

5. v-for : 반복문 구현, v-if 와 같이 사용하지 않는다

- arrary/object는 자료안의 데이터 갯수만큼 반복된다.

- 변수는 2개까지 작명이 가능하다. 왼쪽 ; array내의 데이터, 오른쪽 ; 1씩증가하는 정수

ex) <a v-for="(a,i) in 메뉴들"  :key = "i">{{ i }}</a> => 1 2 3 출력

{{ a }} => 데이터 출

data() {
  return {
    todos: [
      {
        id: 1,
        text: 'Learn to use v-for'
      },
      {
        id: 2,
        text: 'Learn to use key'
      }
    ]
  }
}

<ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

 - v-if와 같이 사용해야하는 경우 

<ul>
  <template v-for="user in users" :key="user.id">
    <li v-if="user.isActive">
      {{ user.name }}
    </li>
  </template>
</ul>

 

6. v-show : -if 와 거의 동작이 비슷하지만 v-show는 단순히 css의 display 속성만 변경된다. 

ok 의 값이 참이면 화면에 표시된다.

<h1 v-show="ok">Yes</h1>

 

공식문서 : 

https://v3-docs.vuejs-korea.org/api/reactivity-core.html#watcheffect

반응형 API: 핵심 | Vue.js

 

<데이터 바인딩>

• reactivity 개념
• 형식 : {{ data }}  콧수염괄호 2개를 사용.
• 이유 :

- 데이터 변경이 용이함.

- 실시간 자동 렌더링 가능

ㅗhtml 속성도 데이터 바인딩이 가능하다. 

 

<template>
  <div>
    <div>
      <h4 :style="스타일">XX 원룸</h4>
      <p>{{ price1 }} 만원</p>    
    </div>
    <div>
        <h4>XX 원룸</h4>
        <p>{{ price2 }} 만원</p>    
    </div>
  </div>
  
</template>

<script>
export default {
  name : 'App',
  data(){
    return{
      price1:60,
      price2:70,
      스타일 : 'color : red',
    }
  }
}
</script>