38일차(2) : Vue.js 예제(2)
- 각각의 클래스 추가 방법. vue에서는 어떻게 할까?
<Step03_class>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step03_class.html</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<h1>class 제어 하기</h1>
<div id="app">
<button class="btn btn-primary btn-lg">버튼</button>
<br>
<button class="btn"
v-bind:class="{'btn-primary':isPrimary, 'btn-lg':isLg}">Vue 버튼</button>
<br>
<label>
파란색 버튼 <input type="checkbox" v-model="isPrimary">
</label>
<label>
큰 버튼 <input type="checkbox" v-model="isLg">
</label>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app=new Vue({
el:"#app",
data:{
isPrimary:false,
isLg:false
},
methods:{
}
});
</script>
</body>
</html>
v-bind:class="{}"
- 안에 object 형태로 작성한다.
- key값이 클래스의 이름일 수도 있고 아닐 수도 있다.
: 뒤에 들어가는 value값이 true이면 추가되고, false이면 삭제된다.
- true로 해보면 클래스 2개가 추가된 것을 볼 수 있다.
{'btn-primary' : isPrimary , 'btn-lg' : isLg }
- 그리고 T/F 부분을 동적으로 바뀌게 하고싶다면 저 위치에 동적으로 바뀔 수 있는 값을 넣으면 된다.
- 체크박스는 체크 여부에 따라 class가 바뀐다.
- object를 사용해서 특이하게 제어하고 있다!
- v-model을 활용해서 true/false 가 바뀌게 함으로써 클래스의 추가/삭제를 제어할 수 있다.
<Step03_class2>
- 사용하는 object를 따로 만들어놓은 것뿐 앞 예제와 동작은 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step03_class2.html</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<h1>class 제어 하기</h1>
<div id="app">
<button class="btn btn-primary btn-lg">버튼</button>
<br>
<button class="btn"
v-bind:class="classObject">Vue 버튼</button>
<br>
<label>
파란색 버튼 <input type="checkbox" v-model="isPrimary">
</label>
<label>
큰 버튼 <input type="checkbox" v-model="isLg">
</label>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app=new Vue({
el:"#app",
data:{
isPrimary:false,
isLg:false
},
methods:{
},
//종속된 모델이 바뀌면 다시 호출되어서 연산된(computed) 값을 리턴하는 함수
computed:{
classObject:function(){
return {'btn-primary':this.isPrimary, 'btn-lg':this.isLg};
}
}
});
</script>
</body>
</html>
- v-bind:class="classObject" 를 작성해두고
아래에서 classObject: f 함수를 실행시킬 때
리턴값에 클래스정보를 넣어서 리턴하는 object를 직접 사용할 수 있도록 한 것!
<Step03_class3>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step03_class3.html</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<h1>class 제어 하기</h1>
<div id="app">
<button class="btn btn-primary btn-lg">버튼</button>
<br>
<button class="btn"
v-bind:class="[ isPrimary ? 'btn-primary' : '', isLg ? 'btn-lg' : '']">Vue 버튼</button>
<br>
<label>
파란색 버튼 <input type="checkbox" v-model="isPrimary">
</label>
<label>
큰 버튼 <input type="checkbox" v-model="isLg">
</label>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app=new Vue({
el:"#app",
data:{
isPrimary:false,
isLg:false
},
methods:{
},
//종속된 모델이 바뀌면 다시 호출되어서 연산된(computed) 값을 리턴하는 함수
computed:{
}
});
</script>
</body>
</html>
- 추가하고 싶은 클래스를 배열[ ] 안에 넣어주었다.
- 3항 연산자를 활용해서 true 면 초록색 부분, false면 빨간색 부분이 남도록 한 것!
<Step03_class4>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step03_class4.html</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
<h1>클래스 테스트</h1>
<div id="app">
<h2>{{greet}}</h2>
<button class="btn btn-primary">버튼1</button>
<br>
<button v-bind:class="{'btn':true, 'btn-primary':true}">버튼2</button>
<br>
<button v-bind:class="['btn', 'btn-primary']">버튼3</button>
<br>
<button v-bind:class="classObject">버튼4</button>
<br>
<button v-bind:class="classArray">버튼5</button>
<br>
<button v-bind:class="{'btn':isBtn, 'btn-primary':isPrimary}">버튼6</button>
<label>
btn <input type="checkbox" v-model="isBtn">
</label>
<label>
btn-primary <input type="checkbox" v-model="isPrimary">
</label>
<br>
<button v-bind:class="arr">버튼7</button>
<input type="text" v-model="inputClass"/>
<button v-on:click="add2">추가</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app=new Vue({
el:"#app",
data:{
greet:"좋은 아침 입니다.",
classObject:{'btn':true, 'btn-primary':true},
classArray:['btn', 'btn-primary'],
isBtn:true,
isPrimary:true,
arr:[],
inputClass:""
},
methods:{
add:function(){
// arr 배열에 입력한 클래스명을 추가하기
this.arr.push(this.inputClass);
},
add2(){
this.arr.push(this.inputClass);
}
}
});
</script>
</body>
</html>
2번) object 형태로 클래스 직접 넣어주기
3번) array 형태로 클래스 직접 넣어주기
4,5번) 외부에 모델 배열[]을 만들어놓고 클래스에 추가
6번) object의 true/false 바뀌도록
7번) input 요소에서 직접 입력하게 하고, 함수를 사용해서 클래스 추가
- 다양한 방법으로 클래스를 추가/삭제할 수 있다.
- vue에서 CSS 를 조작하는 방법은?
<Step04_style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step04_style.html</title>
</head>
<body>
<div class="container" id="app">
<h1>vue js 에서 css 조작하기</h1>
<p v-bind:style="{color:'red', fontSize:'30px'}">Lorem ipsum dolor sit amet consectetur adipisicing elit. Id, aperiam minima autem quae commodi ab laborum ad. Accusamus nulla, error commodi sed dolor a! Numquam atque tempore porro quos illo?</p>
<p v-bind:style="{color:fontColor, fontSize: fontSize+'px'}">Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, placeat aliquam maxime tempora earum illo porro sapiente numquam soluta est temporibus, rem mollitia magni corrupti officiis ab similique fuga laudantium.</p>
<p v-bind:style="pStyle">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore unde voluptatem non ea ipsam animi quidem minus sunt aliquam quaerat optio officia eius veniam, temporibus cupiditate ab soluta! Labore, rem.</p>
<input type="text" placeholder="글자색 입력..." v-model="fontColor">
<input type="text" placeholder="글자의 크기 입력..." v-model="fontSize">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app=new Vue({
el:"#app",
data:{
fontColor:"black",
fontSize:16
},
computed:{
pStyle:function(){
return {color:this.fontColor, fontSize: this.fontSize+'px'};
}
}
});
</script>
</body>
</html>
v-bind:style="{key:value}"
- key-css 속성명, value-css속성값
- {font-size} 라고 쓸 수 없기 때문에 Camel case {fontSize}로 작성한다. (js영역에서는 - 빼기 로 인식해서..)
- pStyle에 적용할 함수를 Vue 안에 넣어준다.
이 object를 활용하고 있다.
- 동적으로 적용하고 싶으면 모델의 데이터를 활용하면 된다.
<Step05_if>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step05_if.html</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: yellow;
border: 1px solid red;
}
</style>
</head>
<body>
<h1>v-if and v-show 사용하기</h1>
<div id="app">
<!-- v-if 는 문서객체를 만들지 말지를 결정한다(추가,제거) -->
<div class="box" v-if="true">box1</div>
<div class="box" v-if="false">box2</div>
<div class="box" v-if="isMake">box3</div>
isMake <input type="checkbox" v-model="isMake">
<!-- v-show 는 문서객체를 보일지 숨길지를 결정한다 -->
<div class="box" v-show="true">box4</div>
<div class="box" v-show="false">box5</div>
<div class="box" v-show="isShow">box6</div>
isShow <input type="checkbox" v-model="isShow">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app=new Vue({
el:"#app",
data:{
isMake:true,
isShow:false
}
});
</script>
</body>
</html>
v-if : 어떤 문서객체를 만들지 말지 결정하는 것
v-show : 만들어져 있는 문서객체를 화면상에 보이게 할지 말지 여부를 결정하는 것
- 체크를 해제하면 box3는 사라진다.
- 어떤 객체를 조건부로 출력하고 싶을 때, 클라이언트 사이드에서도 v-if 를 사용해서 제어할 수 있다.
- box6의 경우, 체크 여부에따라 style의 display:none; 이 생겼다 사라졌다 한다.
보이게 할지 말지를 결정하는 요소!
<Step06_for>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step06_for.html</title>
</head>
<body>
<h1>v-for 사용하기</h1>
<div id="app">
<h2>목록출력</h2>
<ul>
<li v-for="item in [10,20,30]">{{item}}</li>
</ul>
<h2>목록출력2</h2>
<ul>
<li v-for="item in nums">{{item}}</li>
</ul>
<h2>목록출력3</h2>
<ul>
<li v-for="(item, index) in nums">{{item}} {{index}}</li>
</ul>
<h2>목록출력4</h2>
<ul>
<li v-for="item in members">
이름 : {{item.name}}
주소 : {{item.addr}}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app=new Vue({
el:"#app",
data:{
nums:[10,20,30],
members:[
{name:"바나나", addr:"서울"},
{name:"딸기", addr:"부산"},
{name:"복숭아", addr:"대전"}
]
}
});
</script>
</body>
</html>
- 배열에 있는 것을 반복문 돌면서 아이템 여러개가 출력되도록 한다.
- object 가 들어있는 배열이면 . 으로 참조할 수 있다.
- 이름 : {{item.name}}
- 주소 : {{item.addr}}
- 원래 전송받은 내용은 페이지 소스보기의 내용인데
클라이언트 사이드에서 렌더링해서 브라우저에서는 다르게 보이는 것!
- <li>에 object 형태로 들어가 있음
<Step06_for2>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step06_for2.html</title>
</head>
<body>
<h1>v-for 사용 예제</h1>
<div id="app">
<input type="text" v-model="inputMsg" ref="one">
<button v-on:click="clicked">추가</button>
<ul>
<li v-for="(item, index) in msgs">{{item}} <button v-on:click="deleteItem(index)">x</button></li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app=new Vue({
el:"#app",
data:{
inputMsg:"",
msgs:[]
},
methods:{
//clicked:function(){}
clicked(){//추가 버튼을 클릭했을때 호출되는 함수
//배열에 아이템 추가하고
this.msgs.push(this.inputMsg);
//입력창 초기화
this.inputMsg="";
//입력창에 포커스 주기
this.$refs.one.focus();
},
deleteItem(i){
// i 는 삭제할 배열의 방번호 이다.
this.msgs.splice(i, 1);
}
}
});
</script>
</body>
</html>
- 추가하고 나면 내용이 사라지고, focus도 자동으로 놓인다.
- 2개의 모델이 있다. 빈 문자열, 빈 배열이다.
- 각각 input요소의 초기값 "" / 반복문 돌며 출력할 li의 초기값 [] 이다.
- 문자열을 입력하고 추가를 누르면 li가 추가됨
- 위에서 '추가'버튼을 클릭하면 메소드 영역에서 clicked가 호출된다.
- 모델을 바꾸는 것만으로 UI 가 자동 업데이트됨
{ clicked : function(){} }
{ clicked(){} }
- {} object를 작성하는데 쓰는 문법
- 아래는 최신 자바스크립트 문법에서 추가된 문법이다.
ECMA5 -> ECMA6가 되면서 추가된 문법
- a라는 방에 함수를 넣은 것이나 마찬가지다!! 결과는 같다.
- object작성을 좀더 편하게 할 수 있도록 도와주는 문법
- 변수의 이름, key값을 동일하게 위와 같이 작성하면
변수의 이름과 똑같이 object 의 키값을 넣어달라고 할 수 있다.
- 이렇게 작성할 수도 있다!
- { } 안에 변수명을 적으면 변수명을 알아서 키값으로 만들어서 변수의 내용을 value로 담아준다.
- key 값만 { } 안에 넣어도 자동으로 object를 작성해준다. 새로운 문법으로 편리하게 사용가능.
- 함수를 나열한 듯한 모양이다.
- 참조값을 얻어내어 참조값.focus 해준 것(그러면 그 위치에 커서가 놓인다)
- ref="one"이라고 id를 부여하듯이, ref 속성을 부여한다.
this.$refs.one.focus();
- 이렇게 작성하면 해당객체를 딱 지정할 수 있다
- vue가 $refs 라는 모델을 알아서 따로 관리한다.
- 삭제할 때는?
<li v-for="(item, index) in msgs"
- 반복문 돌면서 index값도 전달받는다. 이 인덱스를 삭제하는데에 사용한다.
- 배열에서 해당 li를 splice해주면 된다.
'국비교육(22-23)' 카테고리의 다른 글
| 39일차(2) : Vue.js 예제(3) (0) | 2022.12.01 |
|---|---|
| 39일차(1) : javascript로 작성했던 폼 Vue.js로 수정하기 (0) | 2022.12.01 |
| 38일차(2) : Vue.js 예제(1) (1) | 2022.12.01 |
| 38일차(1) : 정규 표현식 (0) | 2022.11.30 |
| 37일차(4)/jsp(28) : jQuery 예제 (1) | 2022.11.30 |