본문 바로가기
WEB/Vue.js

[Vue.js] 데이터 바인딩

by Raymond 2022. 7. 9.

데이터 바인딩

폴더 구조

views, components 폴더

Views폴더에서는 화면 전체를 구성하는 컴포넌트를 다룹니다. 또한 이름의 마지막에 View를 붙이는 룰이 있습니다.

components폴더에서는 화면의 특정 영역이나 다른 여러 곳에 사용이 되어 재사용이 가능한 컴포넌트를 다룹니다.

 

데이터 바인딩 string

Vue에서는 모든 데이터는 data() 함수에 정의하고 아래의 코드는 {{}} 중괄호 2개를 통해서 string 값을 단방향 데이터 바인딩을 하였습니다. 

일반 바닐라 자바스크립트로 서버로부터 가져온 데이터를 바인딩하여 출력을 하려면 해당 태그에 id값을 할당하고 Document.getElementById()를 통해서 DOM에 접근하여. innerText 또는. innerHTML을 통해서 값을 바꿔야 한다.
<template>
  <div>
    <h1>Hello {{ userName }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userName: 'John Doe',
      message: 'Welcome'
    }
  }
}
</script>

<style scoped></style>

 

데이터 바인딩 HTML

자바스크립트의 코드를 사용하기 위해 사용하는 속성을 디렉티브라고 합니다.

v-html 디렉티브 속성을 통해서 HTML을 바인딩이 가능합니다.

<template>
  <div>
    <div>{{ htmlString }}</div>
    <div v-html="htmlString"></div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      htmlString: '<p style="color:red;">빨간색 문자</p>'
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {}
}
</script>

 

데이터 바인딩 input

input 태그 안의 속성을 보면 v-model 속성이 있는데 이를 통해서 data가 양방향 바인딩되어 들어간다.

v-model은 사용자가 값을 변경시킬 수 있는 곳에 사용이 된다.

v-model.number를 사용하면 v-model의 값을 숫자로 인식하여 더하기가 된다.

양방향 데이터 바인딩의 의미는 input안의 내용이 바뀌면 바로 userId의 값이 바뀌어 들어가는 것을 말한다.
즉, 자바스크립트로 사용자의 입력값을 확인을 하는 코드를 작성하지 않아도 바로 값을 읽어올 수 있다.
<template>
  <div>
    <input type="text" v-model="userId" />
    <button @click="myFunction">클릭</button>
    <button @click="changeData">변경</button>
    <br />
    <!-- 더하기 안됨 -->
    <input type="text" v-model="num1" /> +
    <input type="text" v-model="num2" /> =
    <span>{{ num1 + num2 }}</span>
    <br />
    <!-- 더하기 됨 -->
    <input type="text" v-model.number="num3" /> +
    <input type="text" v-model.number="num4" /> =
    <span>{{ num3 + num4 }}</span>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      userId: 'kimjaewon',
      num1: 0,
      num2: 0,
      num3: 0,
      num4: 0
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {
    myFunction() {
      console.log(this.userId)
    },
    changeData() {
      this.userId = 'change Data'
    }
  }
}
</script>

더하기

 

 

데이터 바인딩 select

v-model로 양방향 바인딩

<template>
  <div>
    <select name="" id="" v-model="selectedCity">
      <option value=""></option>
      <option value="02">서울</option>
      <option value="051">부산</option>
      <option value="064">제주</option>
    </select>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      selectedCity: '02'
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {}
}
</script>

 

데이터 바인딩 checkbox

checkbox는 여러 개가 들어갈 수 있으므로 data에 보면 배열로 favoriteLang 변수를 만들어 주었습니다.

바닐라 자바스크립트에서는 checkbox를 동일한 그룹으로 묶으려면 name값을 일치시켜주어야 하지만 Vue에서는 favoriteLang  변수를 checkbox에 v-model로 연결을 하면 동일 그룹으로 인식하고 데이터 바인딩을 시켜줄 수 있습니다.

v-model 특이점
input, select인 경우를 예로 들면 value값과 양방향 데이터 바인딩이 일어납니다. 그러나 checkbox는 사용자가 check를 하는지 안 하는지를 입력받으므로 value값과 양방향 바인딩이 일어나지 않고 checked속성이 양방향 바인딩이 됩니다. 즉, checked가 된 checkbox가 있으면 value값을 읽어와서 배열에 value값을 넣게 됩니다. v-model이라고 해서 모두 value값과 양방향 데이터 바인딩이 일어나지 않는다는 점을 유의해야 합니다.

 

<template>
  <div>
    <div>
      <input
        type="checkbox"
        name=""
        id="html"
        value="HTML"
        v-model="favoriteLang"
      />
      <label for="html">HTML</label>
    </div>
    <div>
      <input
        type="checkbox"
        name=""
        id="css"
        value="CSS"
        v-model="favoriteLang"
      />
      <label for="css">CSS</label>
    </div>
    <div>
      <input
        type="checkbox"
        name=""
        id="js"
        value="JS"
        v-model="favoriteLang"
      />
      <label for="js">JavaScript</label>
    </div>

    <div>선택한 지역: {{ favoriteLang }}</div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      favoriteLang: []
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {}
}
</script>

checkbox

 

데이터 바인딩 radio

checkbox와 데이터 바인딩 방법은 동일하고 radio는 하나만 선택이 가능하기 때문에 data에 favoriteLang변수를 보면 문자열로 값을 바인딩해줘야 합니다.

<template>
  <div>
    <div>
      <input
        type="radio"
        name=""
        id="html"
        value="HTML"
        v-model="favoriteLang"
      />
      <label for="html">HTML</label>
    </div>
    <div>
      <input type="radio" name="" id="css" value="CSS" v-model="favoriteLang" />
      <label for="css">CSS</label>
    </div>
    <div>
      <input type="radio" name="" id="js" value="JS" v-model="favoriteLang" />
      <label for="js">JavaScript</label>
    </div>

    <div>선택한 지역: {{ favoriteLang }}</div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      favoriteLang: ''
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {}
}
</script>

radio

 

데이터 바인딩 HTML 속성에 바인딩 하기

readonly인 속성을 가진 태그가 있는 경우에는 v-model로 양방향 데이터 바인을 하는 것은 위험합니다. 사용자가 개발자 도구를 이용해서 값을 강제로 바꿀 수 있기 때문입니다. 이런 경우에는 v-blind:을 통해서 value속성 값을 단방향 바인딩을 할 수 있습니다.  v-bind:는 :로 생략이 가능합니다.

<template>
  <div>
    <!-- input type="text" 바인딩 -->
    <input type="text" name="" id="" v-bind:value="userId" readonly />
    <input type="text" name="" id="" :value="userId" readonly />
    <br />
	<!-- 이미지 데이터 바인딩 -->
    <img :src="imgSrc" alt="" style="width: 100px; height: auto" />
    <br />
	<!-- input type="search"에 입력값이 있는경우 조회버튼 활성화 -->
    <input type="search" v-model="txt1" />
    <button :disabled="txt1 === ''">조회</button>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      userId: 'won',
      imgSrc: 'https://upload.wikimedia.org/wikipedia/commons/f/f1/Vue.png',
      txt1: ''
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {}
}
</script>

데이터 바인딩 list

v-for를 이용하여 for문을 사용할수 있습니다. v-for를 쓰는 경우에는 :key가 존재해야 하고 유일한 값이 들어가야 합니다.

<template>
  <div>
    <div>
      <select name="" id="">
        <option value=""></option>
        <option :value="city.code" :key="city.code" v-for="city in cities">
          {{ city.title }}
        </option>
      </select>
    </div>

    <div>
      <table>
        <thead>
          <tr>
            <th>제품번호</th>
            <th>제품명</th>
            <th>가격</th>
            <th>주문수량</th>
            <th>합계</th>
          </tr>
        </thead>
        <tbody>
          <!-- key로 쓸만한 유일값이 없는경우는  v-for="(drink, index) in drinkList"를 사용하여 index를 key에 할당가능  -->
          <tr :key="drink.drinkId" v-for="drink in drinkList">
            <td>{{ drink.drinkId }}</td>
            <td>{{ drink.drinkName }}</td>
            <td>{{ drink.price }}</td>
            <!-- 수량은 사용자가 바꿀수 있게만듬 -->
            <td><input type="number" v-model="drink.qty" /></td>
            <td>{{ drink.price * drink.qty }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      cities: [
        { title: '서울', code: '02' },
        { title: '부산', code: '051' },
        { title: '제주', code: '064' }
      ],
      drinkList: [
        {
          drinkId: '1',
          drinkName: '코카콜라',
          price: 700,
          qty: 1
        },
        {
          drinkId: '2',
          drinkName: '오렌지주스',
          price: 1200,
          qty: 1
        },
        {
          drinkId: '3',
          drinkName: '커피',
          price: 500,
          qty: 1
        },
        {
          drinkId: '4',
          drinkName: '물',
          price: 700,
          qty: 1
        },
        {
          drinkId: '5',
          drinkName: '보리차',
          price: 1200,
          qty: 1
        },
        {
          drinkId: '6',
          drinkName: '포카리',
          price: 1000,
          qty: 1
        },
        {
          drinkId: '7',
          drinkName: '보리차',
          price: 1300,
          qty: 1
        }
      ]
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {}
}
</script>

 

데이터 바인딩 class

클래스를 바인딩 하면 true, false로 컨트롤이 가능해집니다. :class 바인딩을 할 때 아래 style 태그 안의 text-red와 같이 -가 붙은 클래스 이름은 '(홑 따옴표)로 감싸줘야 합니다.

<template>
  <div>
    <div :class="{ 'text-red': hasError, active: isActive }">클래스 바인딩</div>
    <div :class="class2">클래스 바인딩2</div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      // 클래스 바인딩 방법1
      isActive: false,
      hasError: false,
      // 클래스 바인딩 방법2
      class2: ['active', 'text-red']
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {}
}
</script>

<style scoped>
.active {
  background-color: greenyellow;
  font-weight: bold;
}
.text-red {
  color: red;
}
</style>

 

데이터 바인딩 style

:style을 통해서 오브젝트 형태로 바인딩이 가능합니다. font-size와 같이 -가 붙은 경우에는 fontSize로 -가 없어지고 첫 문자가 대문자가 됩니다.

<template>
  <div>
    <div style="color: red; font-size: 30px">
      스타일 바인딩: 글씨는 red, 폰트크기:30px
    </div>
    <div :style="style1">스타일 바인딩: 글씨는 green, 폰트크기: 30px</div>
    <button @click="style1.color = 'blue'">색상바꾸기</button>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      style1: {
        color: 'green',
        fontSize: '30px'
      }
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {}
}
</script>

style

 

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

[Vue.js] 렌더링 조건(v-if,v-show)  (0) 2022.07.11
[Vue.js] 이벤트  (0) 2022.07.10
[Vue.js] 라우터 이해하기  (0) 2022.07.07
[Vue.js] Vue 프로젝트 생성  (0) 2022.06.28
[Vue.js] Vue CLI & 기본 구조 이해하기  (0) 2022.06.27

관련글

댓글

​

티스토리툴바