요약

template 구문을 선언해 DOM 에 데이터를 렌더링하는것이 vue 의 핵심
디렉티브 (뷰 제공 특정 속성)
- v-bind : 속성에 바인딩
- v-if : bool 체크, true 면 태그 안의 내용 수행
- v-for : 태그에 정의된 배열을 iterate 하며 태그 안의 내용 수행
- v-model : 양 방향 바인딩
component 대규모 프로그램 구축을 위한 컴포넌트 단위로의 모듈화.
- 예제 : 속성을 정의한 컴포넌트를 코드에서 정의후, 이 컴포넌트를 정의한 속성의 데이터를 변경하여 렌더링

예제

<template>
  <div id="intro">
    <!-- directive. 렌더링된 DOM 에 반응형 동작을 함. span 요소의 tile 속성을 message 로..
    bind: 콜론하위의 속성에 데이터 값을 바인드-->
    <span v-bind:title="message">테스트트트</span>
    <p v-if="seen">if !</p>
    <ol>
      <li v-for="todo in todos" v-bind:key="todo">{{todo.text}}</li>
    </ol>
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">메시지뒤집기</button>
    <p>{{ modelmessge }}</p>
    <!-- 양방향 바인딩 -->
    <input v-model="modelmessge" />
    <ol>
      <!-- todo 속성에 item 을 바인드하고, key 는 id -->
      <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item"></todo-item>
    </ol>
  </div>
</template>

<script lang="ts">
export default {
  props: {
    name: String
  },
  components: {
    // declare componets in code
    "todo-item": {
      props: ["todo"],
      template: "<div id='test'> <li>{{todo.text}}</li> </div>"
    }
  },
  data() {
    return {
      message: "메시지",
      seen: true,
      todos: [{ text: "javascript " }, { text: "Vue" }],
      modelmessge: "v 모델 메시지",
      groceryList: [
        { id: 0, text: "Vegetables" },
        { id: 1, text: "Cheese" },
        { id: 2, text: "Whatever else humans are supposed to eat" }
      ]
    };
  },
  methods: {
    reverseMessage() {
      this.message = this.message
        .split("")
        .reverse()
        .join("");
    }
  }
};
</script>

beyolk / study

01. 시작하기 #5

요약

예제