vue.js) Html 데이터바인딩 부터 vue.js 기초 데이터바인딩 내용 끝

티스토리 뷰

vue.js

vue.js) Html 데이터바인딩 부터 vue.js 기초 데이터바인딩 내용 끝

JadeStone 2023. 3. 5. 16:23

# user Snippet 등록

* view component 파일 생성시 자주 쓰는 템플릿 구문을 따로 user snippet 에 등록해서

이후에 간단하게 만들 수 있다

아래 사진은 뷰 수업 중 유저스니핏 등록할 구문

	"Generate Basic Vue Code":{
		"prefix":"vue-start",
		"body": [
			"<template>\n\t<div></div>\n</template>\n<script>\nexport default {\n\tcomponents: {},\n\tdata() {\n\t\treturn {\n\t\t\tsampleData: ''\n\t\t}\n\t},\n\tsetup() {},\n\tcreated() {},\n\tmounted() {},\n\tunmounted() {},\n\tmethods: {}\n}\n</script>" ],
			 "description": "Generate Basic Vue Code" 
			}

User Snippets 클릭 후 나오는 검색창에 vue 검색 ->vue 클릭 (vue.json)

이후 컴포넌트 파일 생성후

위에서 prefix를 vue-start 로 지정해준걸 치면

아래와 같이 구문 생성완료

* 자꾸 이상하게 오류떠서 기본구문 메모

<template>
  <div></div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      sampleData: ''
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {}
}
</script>

------------------------------------------------------------------------------------------------------------------------------------------------

index.js 에서

웹팩청크네임을 동일하게 지정해주는 것의 효과 :

메뉴에서 예를들어 조회라는 메뉴를 눌렀을 때

같은 웹팩청크네임으로 묶여있는 페이지들 모두가 한번에 내려 받아진다.

그렇게 됨으로써 조회페이지에서 같은 webpackChunkName으로 묶여져있는 페이지로 넘어가면
이미 페이지가 다 받아져있으므로 로드하는 시간없이 바로 들어가질 수 있다.

그래서 연관성 있는 애들은 같은 이름으로 해주는게 좋다.

webpackChunkName: "databinding",

* html 데이터 바인딩

- html 데이터 바인딩은 {{}} 를 사용하는게 아니라

태그에 v-html 속성을 넣고 data에 저장해둔 키값을 가져와서 넣어주면 됨. (아래 코드에서 확인)

- v-html 과 같이 v- 로 시작되는 속성들은 자바스크립트 코드에서 사용하기 위한 속성이라고 해서

디렉티브라고 일컬음.

<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>

<양방향 데이터 바인딩>

* vue에서는

js의 document 객체를 쓸 일이 없음.

태그내에 name, id 속성도 전혀 쓸 일이 없음.

★ input, select 태그의 경우 html 태그의 value 라는 속성 값하고 양방향데이터바인딩이 이루어지는 것.

# input 태그 양방향 데이터 바인딩

DataBindingInputView.vue

* 태그에 v-model 디렉티브를 넣어주고 data 함수내에 해당하는 키값을 가져다 넣어주면

양방향 데이터 바인딩을 위한 연결이 됨.

- 데이터 함수내에서 값을 입력해도 html 태그내에 값이 입력되고

반대로 html 내에서 값을 입력하면 동시에 데이터 함수내에 해당하는 키에대한 값 또한 변경됨.

- 숫자 연산 같은경우

아래와 같이 하면 문자열로 연산 되기 때문에

        <input type="text" v-model="num1"/> +
        <input type="text" v-model="num2"/> =
        <span>{{num1 + num2}}</span>

num1 에 5를 넣고

num2 에 8을 넣으면

num1 + num2 는 58이 됨.

왜냐하면 문자열 끼리 + 하게 되기 때문.

그럼 입력받은 값을 원래 js 에서는 parseInt 로 바꿔줬어야 하는데

vue 에서는 그럴필요 없이

v-model.number 로 디렉티브를 바꿔주면 받는 값을 저절로 숫자로 인식해줌.

        <input type="text" v-model.number="num3"/> +
        <input type="text" v-model.number="num4"/> =
        <span>{{num3 + num4}}</span>

그래서

num3 에 3

num4 에 4 를 넣어주면

num3 + num4 는 7이 됨.

<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: 'seungwon.go',
      num1: 0,
      num2: 0,
      num3: 0,
      num4: 0
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {
    myFunction () {
      console.log(this.userId)
    },
    changeData () {
      this.userId = 'Jeremy'
    }
  }
}
</script>

# select 태그 양방향 데이터 바인딩

* v-model 은 사용자가 데이터값을 변경할 수 있는 곳에만 사용 가능.

★ input, select 태그의 경우 html 태그의 value 라는 속성 값하고 양방향데이터바인딩이 이루어지는 것.

<template>
  <div>
    <select 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: '051'
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {}
}
</script>

# checkbox 양방향 데이터 바인딩

★ chekcbox 의 양방향 데이터 바인딩의 경우에는

value 라는 속성과 양방향데이터바인딩이 되는게 아니라

checked 라는 속성과 양방향 데이터 바인딩이 이루어지는 것.

check박스는 사용자가 checked 속성을 on, off 만 할수 있기 때문.

따라서 체크박스에서의 v-model은 checked 속성과 연결되어 있는것이다.

*data 함수내에서 체크박스는 여러건을 선택할 수 있기 때문에 반드시 배열 형태로 선언해야함

<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">CSS</label>
    </div>
    <div>선택한 지역: {{favoriteLang}}</div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      favoriteLang: ['JS'] // 이렇게 써주면 체크박스에 js 가 선택되어있는 채로 페이지나타남.
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {}
}
</script>

# radio 태그 양방향데이터바인딩

* checkbox 와 사용하는 법은 똑같은데

radio 는 하나만 체크가 가능 하므로

데이터 선언시에

배열이 아닌 문자열로 선언한다.

<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">JS</label>
    </div>
    <div>선택한 지역: {{favoriteLang}}</div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      favoriteLang: ''
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {}
}
</script>

# 속성 (attribute)에 데이터 바인딩 하기.

* 속성을 데이터 바인딩 하는 방법은

속성값 앞에 v-bind: 을 붙여주면 된다.

단, v-bind는 생략이 가능해서

:속성 만 써주더라도 속성을 데이터 바인딩해주는구나라고 인식을 한다고 함.

* 아래 버튼 사용하는 부분.

사용자가 input 태그에 무언가를 입력해야지만 button 태그를 활성화 할 수 있도록하려고함.

button 의 disabled 속성을 바인딩해서

input 태그에 데이터가 입력이 되면 txt1 변수에 데이터가 저장이 되고,

disable 속성에서는 txt1 의값이 '' 이 아니게 되니 false 가 됨으로서

조회 button이 활성화 됨.

<template>
  <div>
    <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" name="" id="" v-model="txt1">
    <button :disabled="txt1 === ''">조회</button>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      userId: 'seungwongo',
      imgSrc: 'https://upload.wikimedia.org/wikipedia/commons/f/f1/Vue.png',
      txt1: ''
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {}
}
</script>

# 서버로 부터 배열로된 데이터가 넘어왔을 때의 데이터를 바인딩 하는 법.

* v-for 이용

v-for 내에는 for in 구문 사용하듯이 작성해주고

- v-for 를 사용할 때에는 반드시 key값을 지정해줘야함.

데이터 내에서 키 값이 될만한 것을 아래처럼 key 값에 넣어주던가 .

아니면

v-for="(city, i) in cities" ctiy 는 데이터를 받아서 담는 변수이름, i는 인덱스 값

i 처럼 인덱스 값을 지정해서 key 값으로 인덱스를 설정해줘도 됨.

* 또 v-for 을 이용해서 아래와 같이 table을 빠르게 그릴수도 있음.

<template>
  <div>
    <div>
      <select >
        <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>
          <tr :key="drink.drinkId" v-for="(drink) in drinkList">
            <td>{{drin.drinkId}}</td>
            <td>{{drin.drinkName}}</td>
            <td>{{drin.price}}</td>
            <td><input type="number" name="" id="" v-model="drink.qty"></td>
            <td>{{drin.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' }
      ]
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {}
}
</script>

# class 속성 데이터 바인딩 하는 법. (시간 3:04:10 부터 보면됨.)

https://www.youtube.com/watch?v=b0ImUEsqaAA&t=3368s

* 클래스 바인딩 방법 1

class 속성에는 값이 여러개 들어갈 수 있기 때문에 객체형태로 사용가능.

키값으로 클래스이름을 주고 키의 값으로 true 나 false 를 줌으로서

클래스 속성을 사용하거나 사용 안하게 할 수도 있음.

* 클래스 바인딩2

- 데이터에 배열과 같이 선언해놓고 사용할 수도 있으나, 실무에서도 이런식으로는 사용하는 경우는 거의 없었다고 함.

<template>
  <div>
    <!-- 첫번째 클래스 바인딩과 같은 형태로 정말 많이 사용됨 -->
    <div :class="{ 'text-red': hasError, active: isActive}">클래스 바인딩</div>
    <div :class="class2">클래스 바인딩2</div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      isActive: false,
      hasError: false,
      class2: ['active', 'text-red']
    }
  },
  setup() {},
  created() {},
  mounted() {},
  unmounted() {},
  methods: {}
}
</script>

<style scoped>
.active{
  background-color: greenyellow;
}

.text-red{
  color:red;
}
</style>

# style 속성 데이터 바인딩

* 스타일 속성은

- style="color: red; font-size: 30px 이렇게

키: 밸류 , 키:밸류 같은 형식이니까

데이터를 선언할 때 오브젝트로 선언해놓는다.

- 스타일 속성에 style1 을 그냥 갖다 넣어줘도 style1 객체 안에 style 속성이 그대로 적용됨.

단, JS에서 style 을 다룰 때에는 font-size 같이 중간에 -으로 연결되있는거는

카멜표기법으로 바꿔서 쓴다는 점 주의하기.

- button 부분에 보면 style1.color 즉 객체의 키값에 접근해서 값을 바꿔주는 식으로

style 속성의 값을 변경해줄 수도 있음.

<template>
  <div>
    <div style="color: red; font-size: 30px">
      스타일 바인딩: 글씨는 red, 폰트크기:30px
    </div>
    <div :style="style1">
      스타일 바인딩: 글씨는 red, 폰트크기: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>

vue.js 의 기본 데이터 바인딩 내용 끝.

데이터 바인딩의 내용은 기초문법이기 때문에 반드시 외워야 함.

다음 강의는

vue.js - 이벤트

에 관한 내용.

강의동영상 3:16:25 부터 보면 됨.

https://www.youtube.com/watch?v=b0ImUEsqaAA&t=3368s

저작자표시

'vue.js' 카테고리의 다른 글

vue.js) event (0)	2023.03.06
Vue.js - 데이터바인딩 (0)	2023.03.03
vue.js - 라우터 이해하기 (1)	2023.03.03
vue 설치 환경세팅, 구조 (0)	2023.03.02

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/05 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

글 보관함

웹 개발

티스토리 뷰

vue.js) Html 데이터바인딩 부터 vue.js 기초 데이터바인딩 내용 끝

'vue.js' 카테고리의 다른 글

티스토리툴바