본문 바로가기
Front-End/JavaScript

Vue.js (3)

by newny 2023. 5. 26.
반응형

✔️데이터 바인딩

※ 작업폴더 : /src/views/1_databinding
 

1. HTML 바인딩

/src/views/1_databinding/DataBindingHtmlView.vue 생성

<template>
  <div>{{ htmlString }}</div> <!-- 문자열 그대로 들어감(innerText) -->
  <div v-html="htmlString"></div> <!-- html로 들어감(innerHtml) -->
</template>

<script>
export default {
  data() {
    return {
      htmlString: '<p style="color:red">빨간색 문자</p>'
    }
  }
}
</script>

 
/src/router/index.js

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/databinding/html',
    name: 'dataBindingHtml',
    component: () => import(/* webpackChunkName: "databinding", webpackPrefetch:true */ '../views/1_databinding/DataBindingHtmlView.vue')
  }
]

 
/src/App.vue

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/databinding/html">Html</router-link>
  </nav>
  <router-view/>
</template>

 

2. Input 바인딩 - 양방향, 숫자 바인딩

이벤트 이용하여 바인딩
 
/src/views/1_databinding/DataBindingInputView.vue 생성

<template>
    <div>
    <h3>input 바인딩 - 양방향</h3>
    <input type="text" v-model="userId"> <!-- request, response 역할을 한꺼번에 해줌 -->
    <hr>

    <h3>이벤트</h3>
    <button @click="myFunction">클릭</button> <!-- 파라미터가 없다면 괄호() 생략 가능 -->
    <button @click="changeData">변경</button>
    <hr>

    <h3>숫자 바인딩</h3>
    <span>문자열 연산</span>
    <input type="text" v-model="num1">
    <input type="text" v-model="num2">
    <span>{{ num1+num2 }}</span>
    <br>
    <span>숫자형 연산</span>
    <input type="text" v-model.number="num3">
    <input type="text" v-model.number="num4">
    <span>{{ num3+num4 }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userId: 'itwill.co.kr',
      num1: 0,
      num2: 0,
      num3: 0,
      num4: 0
    }
  },
  methods: {
    myFunction() { // function 키워드 생략, 주석 띄어쓰기 주의
      alert(this.userId)
    },
    changeData() {
      this.userId = 'KOREA'
    }
  }
}
</script>

 
/src/router/index.js

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/databinding/input',
    name: 'dataBindingInput',
    component: () => import(/* webpackChunkName: "databinding", webpackPrefetch:true */ '../views/1_databinding/DataBindingInputView.vue')
  }
]

/src/App.vue

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/databinding/input">Input</router-link>
  </nav>
  <router-view/>
</template>

 

3. select 바인딩

/src/views/1_databinding/DataBindingSelectView.vue 생성

<template>
  <div>
    <h3>select 바인딩</h3>
    <select name="" id="" v-model="selectedCity">
      <option value=""></option>
      <option value="02">서울</option>
      <option value="054">부산</option>
      <option value="064">제주</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedCity: '054' // "02", "064"
    }
  }
}
</script>

 
/src/router/index.js

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/databinding/select',
    name: 'dataBindingSelect',
    component: () => import(/* webpackChunkName: "databinding", webpackPrefetch:true */ '../views/1_databinding/DataBindingSelectView.vue')
  }
]

 
/src/App.vue

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/databinding/select">Select</router-link>
  </nav>
  <router-view/>
</template>

 

4. checkbox / radio 바인딩

/src/views/1_databinding/DataBindingCheckView.vue 생성

<template>
  <div>
    <h3>checkbox 바인딩</h3>
    <div>
      <input type="checkbox" id="html" value="HTML" v-model="favoriteLang">
      <label for="html">HTML</label>
    </div>
    <div>
      <input type="checkbox" id="css" value="CSS" v-model="favoriteLang">
      <label for="css">CSS</label>
    </div>
    <div>
      <input type="checkbox" id="js" value="JavaScript" v-model="favoriteLang">
      <label for="js">JavaScript</label>
    </div>
    <div>선택한 과목 : {{ favoriteLang }}</div>
  </div>
  <hr>

  <div>
    <h3>radio 바인딩</h3>
    <div>
      <input type="radio" id="java" value="JAVA" v-model="favoriteLang1">
      <label for="java">JAVA</label>
    </div>
    <div>
      <input type="radio" id="python" value="PYTHON" v-model="favoriteLang1">
      <label for="python">PYTHON</label>
    </div>
    <div>
      <input type="radio" id="kotlin" value="KOTLIN" v-model="favoriteLang1">
      <label for="kotlin">KOTLIN</label>
    </div>
    <div>선택한 과목 : {{ favoriteLang1 }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      favoriteLang: ['JavaScript'], // checkbox속성은 여러개 선택 가능하므로 배열로 선언
      favoriteLang1: '' // radio속성은 하나만 선택 가능하므로 문자열로 선언
    }
  }
}
</script>

 
/src/router/index.js

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
	{
    path: '/databinding/check',
    name: 'dataBindingCheck',
    component: () => import(/* webpackChunkName: "databinding", webpackPrefetch:true */ '../views/1_databinding/DataBindingCheckView.vue')
  }
]

 
/src/App.vue

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/databinding/check">Check</router-link>
  </nav>
  <router-view/>
</template>

 

5. attribute 속성 데이터 바인딩

/src/views/1_databinding/DataBindingAttributeView.vue 생성

<template>
  <div>
    <h2>다양한 속성 바인딩</h2>
    <hr>
    <h3>v-bind 바인딩</h3>
    <!-- v-model이면 양방향 바인딩이 됨(request, response둘 다 가능) -->
    <input type="text" v-model="userId">

    <!-- value 속성에 단방향 데이터 바인딩할 수 있음(response만 받음) -->
    <input type="text" v-bind:value="userId">

    <!-- v-bind 생략할 수 있음 -->
    <input type="text" :value="userId">
    <hr>

    <!-- 이미지 속성도 데이터 바인딩 할 수 있음 -->
    <h3>src 속성</h3>
    <img :src="imgSrc" alt="" style="width: 100px; height: auto;">
    <hr>

    <!-- disabled 속성 -->
    <h3>disabled 속성 바인딩 - 검색어를 입력하지 않으면 조회버튼 비활성화</h3>
    <input type="search" name="" id="" v-model="txt1">
    <button :disabled="txt1 === ''">조회</button> <!-- 빈 문자열일경우 버튼 비활성화 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      userId: 'korea',
      imgSrc: 'https://www.itwill.co.kr/css/wvtex/img/wvUser/logo.png',
      txt1: ''
    }
  }
}
</script>

 
/src/router/index.js

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/databinding/attribute',
    name: 'dataBindingAttribute',
    component: () => import(/* webpackChunkName: "databinding", webpackPrefetch:true */ '../views/1_databinding/DataBindingAttributeView.vue')
  }
]

 
/src/App.vue

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/databinding/attribute">Attribute</router-link>
  </nav>
  <router-view/>
</template>

 

6. 배열 데이터 바인딩

/src/views/1_databinding/DataBindingListView.vue 생성

<template>
  <div>
    <h2>배열 데이터 바인딩</h2>
    <hr>

    <h3>목록</h3>
    <select name="" id="">
      <option value=""></option>
      <option v-for="city in cities" :value="city.code" :key="city.code">{{ city.title }}</option>
    </select> <!-- 반복문이 오면 유일한 값으로 :key 반드시 추가해야함 -->
    <hr>

    <h3>표 작성 후 목록 출력</h3>
    <table>
      <thead>
        <tr>
          <th>제품번호</th>
          <th>제품명</th>
          <th>제품가격</th>
          <th>주문수량</th>
          <th>합계</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="drink in drinkList" :key="drink.drinkId"> <!-- :key == primary key -->
          <td>{{ drink.drinkId }}</td>
          <td>{{ drink.drinkName }}</td>
          <td>{{ drink.price }}</td>
          <td>
            <select name="" id="" v-model="drink.qty">
              <option value=0>0</option>
              <option v-for="m in 5" :key=m :value=m>{{ m }}</option>
            </select>
          </td>
          <td>{{ drink.price * drink.qty }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cities: [
        { title: '서울', code: '02' },
        { title: '부산', code: '051' },
        { title: '제주', code: '064' }
      ],
      drinkList: [
        { drinkId: '1', drinkName: '코카콜라', price: 700, qty: 0 },
        { drinkId: '2', drinkName: '오렌지주스', price: 1200, qty: 0 },
        { drinkId: '3', drinkName: '커피', price: 500, qty: 0 },
        { drinkId: '4', drinkName: '물', price: 700, qty: 0 },
        { drinkId: '5', drinkName: '보리차', price: 1200, qty: 0 },
        { drinkId: '6', drinkName: '포카리', price: 1000, qty: 0 },
        { drinkId: '7', drinkName: '뽀로로', price: 1300, qty: 0 }
      ]
    }
  }
}
</script>

 
/src/router/index.js

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/databinding/list',
    name: 'dataBindingList',
    component: () => import(/* webpackChunkName: "databinding", webpackPrefetch:true */ '../views/1_databinding/DataBindingListView.vue')
  }
]

 
/src/App.vue

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/databinding/list">List</router-link>
  </nav>
  <router-view/>
</template>
반응형
저작자표시 비영리 변경금지

'Front-End > JavaScript' 카테고리의 다른 글

Vue.js (4)  (0) 2023.05.30
Vue.js (2)  (0) 2023.05.26
Vue.js (1)  (0) 2023.05.25

관련글

댓글

티스토리툴바