보안 전공생의 공부

디렉티브 | v-for, v-bind, v-model 본문

WEB/Vue

디렉티브 | v-for, v-bind, v-model

수잉 2021. 1. 18. 10:52

◆ 디렉티브(directive) : html 엘리먼트의 특별한 속성 형태

v- 접두사 형태로 사용 !

​

​

◆ v-for

다수의 item을 포함하는 집합 형태의 list를 나타낸다.

​

· 형식

<html_element v-for="item in items" v-bind:key="item의 한 속성"> (일반)

<html_element v-for="item in items" :key="item의 한 속성"> (축약)

​

 -items : 데이터 집합

 -item : 데이터 집합 內 하나의 데이터

 -v-bind : v-for 디렉티브를 이용해 리스트 나타낼 때 사용

             key의 속성 설정 → vue가 각 item을 검색하고 정렬할 수 있도록 함

​

​

예제를 작성하기 위해 우선 프로젝트 생성 · 구동을 시킨다.

cmd창에 vue create vfor --default 를 입력해 vfor 프로젝트를 생성하였다.

​

그리고 cd vfor , npm run serve를 입력해 서버를 구동시켰다.

​

​

​

생성된 vfor 프로젝트의 src폴더 내 App.vue를 밑에처럼 작성하였다. 

<template>
  <div id="app">
    <h1> 필요한 생활용품 </h1>
    <u1>
      <li v-for="item in goods" v-bind:key="item.id">{{item.name}}</li>
    </u1>
  </div>
</template>

<script>
export default{
  name: 'app',
  data(){
    return{
      goods : [
        {id:1, name:'계란', price:5500, store:'market', amount:30},
        {id:2, name:'칫솔', price:5000 ,store:'coupang', amount:5},
        {id:3, name:'juice', price:3000, store:'market', amount:1},
        {id:4, name:'shelf', price:300000, store:'coupang', amount:1},
        {id:5, name:'thread', price:10000, store:'coupang', amount:4}
      ]
    }
  }
}
</script>

<style>

</style>
​

위와 같이 name이 나열되어 표시되는 것을 확인할 수 있다!

​

​

이제 모든 데이터가 나타나도록 테이블 형태로 출력할 것이다.

밑 주소는 코드를 짜는데 필요한 테이블 태그들에 대한 소개가 되어있다!

https://studyingych.tistory.com/6

 

HTML5 테이블 태그

, , , ,

 

테이블 태그 표를 만드는 태그, 코딩으로 표를 만들때 사용하지만 웹사이트의 프레임(구조)를 잡을때도 사용한다. 예전에는 HTML 테이블로 웹페이지 레이아웃 구조를 잡는데 많이 사용했으나, 최

studyingych.tistory.com

, 
<template>
  <div id="app">
    <h1> 필요한 생활용품 </h1>
    <table>
      <thead>
        <tr><th>번호</th><th>물품명</th><th>가격</th>
        <th>파는 곳</th><th>수량</th></tr>
       </thead>
      <tbody>
        <tr v-for="item in goods" v-bind:key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.price}}</td>
          <td>{{item.store}}</td>
          <td>{{item.amount}}</td>
        </tr>
       </tbody>
    </table>
  </div>
</template>

<script>
export default{
  name: 'app',
  data(){
    return{
      goods : [
        {id:1, name:'계란', price:5500, store:'market', amount:30},
        {id:2, name:'칫솔', price:5000 ,store:'coupang', amount:5},
        {id:3, name:'juice', price:3000, store:'market', amount:1},
        {id:4, name:'shelf', price:300000, store:'coupang', amount:1},
        {id:5, name:'thread', price:10000, store:'coupang', amount:4}
      ]
    }
  }
}
</script>

<style>
  table{
    width:80%;
    border-collapse:collapse;
  }
  tr:nth-of-type(odd){
    background:#eee;
  }
  th{
    background:#333;
    color:white;
    font-weight:bold;
  }
  td,th{
    padding:6px;
    border:1px solid #ccc;
    text-align:left;
  }
</style>

table, thead,tbody 같은 html 엘리먼트로 테이블 구조를 만들었다.

tbody 내에서 v-for 디렉티브를 이용해 각 데이터행에 속한 컬럼값을 표시하였다.

​

적용하면 위와 같다.

​

​

◆ v-bind

​

HTML 엘리먼트에 하나 or 둘 이상의 속성을 연결하는 데 사용

​

· 형식 : v-bind:argument (일반)

:argument (축약)

​

(1) 이미지 연결 : v-bind:src or :src

- <img v-bind:src="image.png"> or <img :src="image.png">

​

(2) 링크 연결 : v-bind:href or :href

- or

​

​

이미지와 링크 연결하기

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div class="imgdiv" v-for="img in images" :key="img.text">
            <a :href="img.url">{{img.text}}</a>
            <img v-bind:src="img.src"/>
        </div>
    </div>
    <script src="http://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data : {
                images : [
                    {text:'로제떡볶이', src:'./img.jpg', url:'https://www.10000recipe.com/recipe/6865767'},
                    {text:'순대곱창전골',src:'./unnamed.jpg',url:'https://m.blog.naver.com/jupippi/221559480524'},
                    {text:'청년피자 허니비', src:'./다운로드.jpeg',url:'https://m.blog.naver.com/lnk2721/221922618322'},
                    {text:'닭발&주먹밥',src:'./다운로드 (1).jpeg',url:'https://haemukja.com/recipes/1205'}
                ]
            }
        })
    </script>
    <style>
        .imgdiv{margin:4px; border:4px solid yellow; display:inline-block;}
        img{width:240px; height:180px; padding:3px;}
        a{text-align:center: display:block;}
    </style>
</body>
</html>

이미지와 링크를 연결하였다.

 

​

(3) 스타일 관련 연결 : v-bind:class, v-bind:style or :class, :style

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1 v-bind:class="{'applycolor':applycolor}">동적으로 class 속성 적용</h1>
        <input type="checkbox" v-model="applycolor">
        <span>h1 엘리먼트 색바꾸기</span>
    </div>
    <script src="http://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data : {
                applycolor:false
            }
        })
    </script>
    <style>
        .applycolor{color:blue;}
    </style>
</body>
</html>

체크박스를 클릭하면 h1의 색상이 <style>태그에서 정의한 blue로 바뀐다.

h1태그의 class 속성에 applycolor가 추가된걸 확인할 수 있다.

​

​

(4) key 연결 : v-bind:key or :key

​

​

​

◆ v-model

​

양방향 데이터 바인딩 가능하도록 해줌

- HTML from 엘리먼트와 관련된 input, checkbox, textarea, select같은 엘리먼트의 속성 형태로 사용됨

​

· 형식 : <input v-model="name">

출처 :  https://m.mkexdev.net/331

 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
       <label>이름 :</label>
       <input type="text" v-model="name">
       <p>{{name}}</p>
       <input type="checkbox" v-model="checked">
       <span>찜닭에 당면  추가 하실래요?{{checked?'예':'아니요'}}</span>
    </div>
    <script src="http://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data : {
                name:'',
                checked:false
            }
        })
    </script>
</body>
</html>

v-model="~~"형태로 text와 checkbox같은 엘리먼트의 속성을 사용하였다.

체크박스 클릭

checked의 값을 false로 초기화하여 웹상에 '아니요'가 출력되게 하였지만,

웹페이지에서 체크박스를 체크하면 그 값이 true로 바뀌고 웹상에 '예'가 출력된다 ⇒ 양방향 바인딩

​

'WEB > Vue' 카테고리의 다른 글

컴포넌트 정의 및 등록 / 컴포넌트 간의 통신  (0) 2021.01.27
디렉터리 | 이벤트 처리 : v-on  (0) 2021.01.27
디렉티브 | v-if, v-for : 조건 렌더링  (0) 2021.01.18
프로퍼티(2)  (0) 2021.01.18
vue.js 설치, 프로젝트 생성 및 구동, 종료  (0) 2021.01.18
'WEB/Vue' Related Articles more
Comments