https://www.youtube.com/watch?v=b0ImUEsqaAA
화면 전체를 차지하는 컴포넌트를 만듬
views 폴더에 생성하는 컴포넌트는 네이밍 룰이 있음
'~~~~View.vue' 로 뒤에 View를 붙여줌
재사용이 가능한 컴포넌트를 여기에 만듬
- HTML
<input type="text" v-model="vue변수명" /> 으로 사용하면됨
<input type="text" v-model.number="vue변수명" /> 로 사용하면 숫자 타입으로 됨
-Vue
export default {
data() {
return {
obj: {
userId: '',
userPassword: ''
},
num1: 0,
num2: 0,
num3: 0,
num4: 0
}
},
views 폴더 밑에 1_databinding 폴더 생성
1_databinding 폴더 밑에 DataBindingStringView.vue 파일 생성
DataBindingStringView.vue 파일 수정
* javascript.vue 를 사용
* css-scoped.vue 를 사용
=================================================================================================================
<template>
</template>
<script>
export default {
data() {
return {
userName : "sungchul Kim"
}
}
}
</script>
<style scoped>
</style>
=================================================================================================================
HTML 태그는 template 에 작성
javscript 코드는 script 에 작성
CSS 는 style에 작성 , css-scoped 를 사용하면 해당 파일에서만 작성한 css만 적용됨
data() 에 지정한 값만 사용할수 있음
=================================================================================================================
export default {
data() {
return {
userName : "sungchul Kim"
}
}
}
=================================================================================================================
HTML 태그는 template 안에 작성하면 되며
vue2에서는 html 태그를 묶어 줬어야 하나
=================================================================================================================
<template>
<div>
<h1></h1>
<p></p>
</div>
</template>
=================================================================================================================
vue3에서는 html 태그를 묶지 않아도 됨
=================================================================================================================
<template>
<h1></h1>
<p></p>
</template>
=================================================================================================================
일단은 아래처럼 묶어서 사용하긴 할것임
{{userName}} 에는 데이터가 들어갈것임
=================================================================================================================
<template>
<div>
<h1>Hello {{userName}} </h1>
<p></p>
</div>
</template>
=================================================================================================================
=================================================================================================================
export default {
data() {
return {
userName : "sungchul Kim",
message: '',
arr:[],
obj:{}
}
}
}
=================================================================================================================
route 폴더의 index.js 파일에 아래의 내용 추가
=================================================================================================================
{
path: '/databinding/string',
name: 'DataBindingStringView',
component: () => import(/* webpackChunkName: "databinding" ,webpackPrefetch : true */'../views/1_databinding/DataBindingStringView.vue')
}
=================================================================================================================
##################################################################################################################
[Vue - HTML 바인딩 ]
## Input 바인딩
v- 로 시작하는 디텍티브로 바인딩 해줌
문자열로 바인딩 할때는 {{ htmlString }}
HTML 바인딩 할때는 v-html="htmlString"
=================================================================================================================
<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() {},
crewate() {}
}
</script>
=================================================================================================================
## Select 바인딩
v-model 로 초기 셀렉트 값을 지정해줄수 있음
=================================================================================================================
<template>
<div>
<select v-model="selectCity">
<option value=""></option>
<option value="02">서울</option>
<option value="051">부산</option>
<option value="064">제주</option>
</select>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
selectCity: '051'
}
},
methods: {},
setup() {},
created() {},
mounted() {},
unmounted() {}
}
</script>
=================================================================================================================
## Checkbox 바인딩
checkbox 의경우에는 value와 데이터 바인딩이 이뤄지는게 아닌
checked 옵션의 true / false 와 데이터바인딩이 이뤄짐
checkbox 는 여러개 선택이 가능하기 때문에 배열로 선언해야함
=================================================================================================================
<template>
<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="js" v-model="favoriteLang" />
<label for="js">js</label>
</div>
<div>
<input type="checkbox" id="vue" value="vue" v-model="favoriteLang" />
<label for="vue">vue</label>
</div>
<div>선택한 언어 : {{ favoriteLang }}</div>
<div>
<button @click="myFunction">콘솔확인</button>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
favoriteLang: []
}
},
methods: {
myFunction() {
console.log(this.favoriteLang)
}
},
setup() {},
created() {},
mounted() {},
unmounted() {}
}
</script>
=================================================================================================================
## Radio 바인딩
라디오 버튼은 하나만 선택이 가능하기때문에
변수 선언시 문자로 선언해야함
=================================================================================================================
<template>
<div>
<input type="radio" id="html" value="HTML" v-model="favoriteLang" />
<label for="html">HTML</label>
</div>
<div>
<input type="radio" id="css" value="css" v-model="favoriteLang" />
<label for="css">css</label>
</div>
<div>
<input type="radio" id="js" value="js" v-model="favoriteLang" />
<label for="js">js</label>
</div>
<div>
<input type="radio" id="vue" value="vue" v-model="favoriteLang" />
<label for="vue">vue</label>
</div>
<div>선택한 언어 : {{ favoriteLang }}</div>
<div>
<button @click="myFunction">콘솔확인</button>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
favoriteLang: 'js'
}
},
methods: {
myFunction() {
console.log(this.favoriteLang)
}
},
setup() {},
created() {},
mounted() {},
unmounted() {}
}
</script>
=================================================================================================================
## Attribute(속성)에 바인딩
readonly 처럼 사용자가 변경하면 안되는 데이터에 속성값으로 바인딩 해줄수 잇음
v-bind:value 로 input에 바인딩 해줄수 있음
또한 v-bind:value 는 줄여서 :value로 쓸수 있음
여러가지 속성들을 v-bind:속성명 으로 사용할수 잇으며
전부다 줄여서:속성명으로 가능함
button 에 disableed 에도 매핑이 가능함
=================================================================================================================
<template>
<div>
<input type="text" v-bind:value="userId" readonly /><br />
<input type="text" :value="userId" readonly /><br />
<img :src="imgSrc" style="width: 200; height: auto" />
<br />
<input type="search" v-model="txt1" />
<button :disabled="txt1 === ''">조회</button>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
userId: 'sungchulkim',
imgSrc: 'https://upload.wikimedia.org/wikipedia/commons/f/f1/Vue.png',
txt1: ''
}
},
methods: {},
setup() {},
created() {},
mounted() {},
unmounted() {}
}
</script>
=================================================================================================================
## 배열 바인딩 (배열의 갯수만큼 select의 option 생성)
v-for 를 사용하여 배열의 크기만큼 반복문을 돌면서 생성해줌
반복문 : v-for="city in cities"
반복문은 cities만듬 반복을 돌것이며 꺼내온 값을 city로 사용할수 있도록함
※자바의 향상된 for문과 비슷함
key값은 필수이며 유니크한 값이여야 함 : key="city.code"
key값이 없을 경우 인덱스 값을 지정해서 줄수 있음
<option :value="city.code" :key="i" v-for="(city,i) in cities">
바인딩 할 value : :value="city.code"
=================================================================================================================
<template>
<div>
<div>
<select>
<option></option>
<option :value="city.code" :key="city.code" v-for="city in cities">
{{ city.title }}
</option>
</select>
</div>
<div>
<table border="1">
<thead>
<tr>
<th>제품번호</th>
<th>제품명</th>
<th>가격</th>
<th>수량</th>
<th>합계</th>
</tr>
</thead>
<tbody>
<!--키값을지정할수 없을때는 아래와같이 i 를 변수로줘서 인덱스 값을 잡아서 키값으로 지정할 수 있음-->
<!--<tr :key="i" v-for="(drink, i) in drinkList">-->
<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: 8
},
{
drinkId: '2',
drinkName: '콜라',
price: 1100,
qty: 99
},
{
drinkId: '3',
drinkName: '환타 오렌지',
price: 600,
qty: 3
},
{
drinkId: '4',
drinkName: '환타 포도',
price: 700,
qty: 21
},
{
drinkId: '5',
drinkName: '맥콜',
price: 700,
qty: 17
},
{
drinkId: '6',
drinkName: '레쓰비',
price: 500,
qty: 51
}
]
}
},
methods: {},
setup() {},
created() {},
mounted() {},
unmounted() {}
}
</script>
=================================================================================================================
## Class 바인딩 (CSS)
클래스 속성을 HTML 에 바인딩 할 수 있음
:class="{}" 로 되어 있으며, 오브젝트 형태로 key : value 형태임
key 에는 class 에서 지정한 클래스명이 들어가며 value 에는 true / false 로 사용 미사용을지정할수 있음
클래스명에 "-" 가 들어간 경우 '' 로 클래스 명을 묶어줘야함
또한 data에서 설정한 변수값을 위에 value 부분에 넣어줄수 있음
key value에는 배열로도 사용이 가능함
=================================================================================================================
<template>
<div :class="{ 'text-red': isActive, active: hasError }">Class binding 1</div>
<br />
<div :class="class2">Class binding 2</div>
</template>
<script>
export default {
components: {},
data() {
return {
isActive: true,
hasError: true,
class2: ['active', 'hasError']
}
},
methods: {},
setup() {},
created() {},
mounted() {},
unmounted() {}
}
</script>
<style scoped>
.active {
background-color: greenyellow;
font-weight: bold;
}
.text-red {
color: red;
}
</style>
=================================================================================================================
## Style 바인딩
style 는 오브젝트 형태로 선언해서 사용하면 됨
style 태그에 바로 해당 변수를 넣으면 됨
=================================================================================================================<template>
<div>
<div :style="style1">style binding , font color red , font size 30px</div>
<div :style="style2">style binding , font color green , font size 20px</div>
<br />
<button @click="style1.color = 'yellow'">
스타일1 색상 노란색으로 변경
</button>
<button @click="style1.color = 'red'">스타일1 색상 원래대로 변경</button>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
style1: {
color: 'red',
fontSize: '30px'
},
style2: {
color: 'green',
fontSize: '20px',
backgroundColor: 'black'
}
}
},
methods: {},
setup() {},
created() {},
mounted() {},
unmounted() {}
}
</script>
=================================================================================================================
##################################################################################################################
[ Vue - 양방향 데이터 바인딩 ]
v-model 을 써서 data 를 바인딩 해줄 수 있음
v-model 하면 양방향 데이터 바인딩이 가능함
vue 에서 따로 수정할 필요가 없이, 클라이언트에서 사용자가 수정을 하면 자동으로 vue에도 수정됨
=================================================================================================================
<template>
<div>
<input type="text" v-model="userId" />
</div>
</template>
<script>
export default {
data() {
return {
userId: 'sungchul'
}
}
}
</script>
=================================================================================================================
맵 형태로도 데이터 바인딩이 가능함
=================================================================================================================
<template>
<div>
<input type="text" v-model="obj.userId" /><br />
<input type="password" v-model="obj.userPassword" />
</div>
</template>
<script>
export default {
data() {
return {
obj: {
userId: '',
userPassword: ''
}
}
}
}
</script>
=================================================================================================================
click 이벤트로 console 에 데이터를 찍어봄
=================================================================================================================
<template>
<div>
<input type="text" v-model="obj.userId" /><br />
<input type="text" v-model="obj.userPassword" />
<button @click="myFunction">클릭</button>
<button @click="changeData">변경</button>
</div>
</template>
<script>
export default {
data() {
return {
obj: {
userId: '',
userPassword: ''
}
}
},
methods: {
myFunction() {
console.log(this.obj.userId)
console.log(this.obj.userPassword)
},
changeData() {
this.obj.userId = '변경'
this.obj.userPassword = '비번변경'
}
}
}
</script>
=================================================================================================================
=================================================================================================================
<template>
<div>
<input type="text" v-model="obj.userId" /><br />
<input type="text" v-model="obj.userPassword" />
<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 {
data() {
return {
obj: {
userId: '',
userPassword: ''
},
num1: 0,
num2: 0,
num3: 0,
num4: 0
}
},
methods: {
myFunction() {
console.log(this.obj.userId)
console.log(this.obj.userPassword)
},
changeData() {
this.obj.userId = '변경'
this.obj.userPassword = '비번변경'
}
}
}
</script>
=================================================================================================================