[vue.js] 3-1. vue 템플릿 문법 및 v-for

// 참고 url : https://mkil.tistory.com/518

Vue.js개념 총정리(4)_템플릿문법,데이터바인딩,데이터변화감지

0. 템플릿 문법

데이터 및 로직들을 연결해 브라우저에서 볼 수 있는 형태의 html 변환

크게 데이터바인딩과 디렉티브로 나뉜다.

 

0.1 데이터 바인딩

문법	설명
{{}}	뷰 인스터의 데이터를 html 태그에 연결하는 텍스트 삽입 방식
v-bind	아이디, 클래스, 스타일 등의 html 속성 값에 뷰 데이터값 연결

0.2 디렉티브

이름	설명
v-for	지정한 뷰 데이터의 개수만큼 출력
v-if	지정한 뷰 데이터의 참, 거짓에 따라 html 표시 여부 선택
v-show	지정한 뷰 데이터의 참, 거짓에 따라 html 표시 여부 선택 v-if 는 완전삭제, v-show는 disyplay: none; 처리
v-on	화면 요소의 이벤트 감지

 

 

1. v-for

임시로 사용할 데이터를 만들어 줍니다.

// ./src/asset/data.json

{
  "data": [
    {
      "col1" : "col1",
      "col2" : "col2",
      "col3" : "col3",
      "col4" : "col4"
    },
    {
      "col1" : "col5",
      "col2" : "col6",
      "col3" : "col7",
      "col4" : "col8"
    },
    {
      "col1" : "col9",
      "col2" : "col10",
      "col3" : "col11",
      "col4" : "col12"
    }
  ]
}

 

v-for를 연습할 수 있게 라우터를 하나 넣어줍니다.

// ./src/App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">home</router-link> |
      <router-link to="/router1">router1</router-link> |
      <router-link to="/vfor">vfor</router-link> | // v-for 연습
    </div>
    <router-view/>
  </div>
</template>

<script>

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

// ./src/router/router.js

import {createWebHistory, createRouter} from 'vue-router';

// import App from '../App.vue';
import Router1 from '../view/router1.vue';
import Vfor from '../view/vfor.vue';

const routes = [
  {
    path: '/router1', // 경로
    name: 'Router1',
    component: Router1 // 컴포넌트
  },
  {
    path: '/vfor',
    name: 'Vfor',
    component: Vfor
  }
]

export const router = createRouter({
  history: createWebHistory(),
  routes
});

 

// ./src/view/vfor.vue

<template>
<div>
  <table>
    <thead>
      <th>col1</th>
      <th>col2</th>
      <th>col3</th>
      <th>col4</th>
    </thead>
    <tbody>
      <tr v-for="(data, idx) in dataList" v-bind:key="idx"> <!-- for문 순회 idx를 key값으로 설정해야함. 안그러면 에러 -->
        <td>{{data.col1}}</td>
        <td>{{data.col2}}</td>
        <td>{{data.col3}}</td>
        <td>{{data.col4}}</td>
      </tr>
    </tbody>
  </table>
</div>
  
</template>

<script>
import json from "../assets/data.json"; // json 데이터를 가져옵니다.

export default {
  data: function() {
    return {
      dataList: [] // 사용할 객체를 선언합니다.
    }
  },
  mounted() {
    this.dataList = json.data; // 사용할 객체에 가져온 데이터를 넣어줍니다.
  }
}
</script>

<style scoped>
table, tr, td, th {
  border: 1px solid black;
  border-collapse: collapse;
}


</style>