Vue Directive
보간법(interpolation)
- 문자열
- 데이터 바인딩의 가장 기본형태는 "Mustache"구문 (이중 중괄호)을 사용한 텍스트 보간
- v-once 디렉티브를 사용하여 데이터 변경 시 업데이트 되지 않는 일회성 보간을 수행
실습1 : v-once 사용
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-once>{{message}}</h2>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
message:"안녕 VueJs~~~"
}
},
})
</script>
</body>
</html>
-> message데이터 수정 시 v-once 디렉티브를 사용한 h2구문은 변하지 않은것을 확인할 수 있다.
(참고로 수정은 Vue.js devtools라는 구글확장프로그램을 사용하였다)
- 원시 HTML
- 이중 중괄호는 HTML이 아닌 일반 텍스트로 데이터를 해석
- 실제 HTML을 출력하려면 v-html 디렉티브를 사용
실습2: v-html 디렉티브 통해 html 구문 출력 ( 해당실습부터는 body만 올림. 이외 실습 1과 동일)
<body>
<div id="app">
<h2>{{message}}</h2>
<h2 v-html="message"></h2>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
message:"<span style='color: red;'> 안녕하세요",
}
},
})
</script>
</body>
- JavaScript
- Vue.js는 모든 데이터 바인딩 내에서 JavaScript표현식의 모든 기능을 지원
실습3 : JavaScript 출력
<body>
<div id="app">
<h2>{{message}}</h2>
<h2>{{number+1}}</h2>
<h2>{{number>10?"YES" : "NO"}}</h2>
<h2>{{msg.split('').reverse().join('')}}</h2>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
message:"안녕 VueJs~~~",
number : 5,
msg:"HELLO SSAFY",
}
},
})
</script>
</body>
디렉티브(Directive)
- v-접두사가 있는 특수속성
- 디렉티브 속성값은 단일 JavaScript 표현식이 된다(v-for 제외)
- 디렉티브의 역할은 표현식의 값이 변경될 때 사이드 이펙트를 반응적으로 DOM에 적용
| v-text | v-bind | v-else |
| v-html | v-show | v-for |
| v-once | v-if | v-cloak |
| v-model | v-else-if | v-on |
- v-model
- 양방향 바인딩 처리를 위해 사용 (form의 input, textarea)
실습4 : v-model
<body>
<div id="app">
<input type="text" name="" id="" v-model="message"/>
<div>{{message}}</div>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
message:"안녕 VueJs~~~"
}
},
})
</script>
</body>
=> v-model이 화면단에서 바꾸던, message변수 자체를 수정하던 양방향에서 통신된다는 것을 알 수 있다.
- v-bind
- 엘리먼트의 속성과 바인딩처리를 하기 위해 사용
- 약어로 ":" 로만 사용 가능
실습5 : v-bind
<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>Document</title>
<style>
#btn1{
width: 200px;
background-color: pink;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div v-bind:id="idValue">메세지</div>
<button v-bind:[key]="btnId">버튼</button>
<a :href="url1"> 이동하기</a>
<!-- <div :id="idValue">메세지</div>
<button :[key]="btnId">버튼</button> -->
</div>
<script>
new Vue({
el: "#app",
data() {
return {
idValue:"test-id1", //div의 아이디가 test-id1이 된다.
key:"id",
btnId:"btn1",
url1:"http://www.naver.com",
};
},
})
</script>
</body>
-> 각각 id에 data()의 값들이 바인딩 된것을 확인할 수 있다.
: btn1의 스타일이 적용되었으며, 개발자 도구창에서 <div>의 id가 test-id1 인것을 확인
-> key와 같이 속성일 경우에는 [ ] 로 묶어주어야 한다.
- v-show
- 조건에 따라 엘리먼트를 화면에 렌더링한다.
- style의 display를 변경
실습6 : v-show
<body>
<div id="app">
<h2>v-Show</h2>
<div v-show="isShow">{{msg}}</div>
<button @click="isShow=!isShow">클릭</button>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
msg:"Hello SSafy",
isShow:true
};
},
})
</script>
</body>
- v-if, v-else-if, v-else
- 조건에 따라 엘리먼트를 화면에 렌더링
실습7 : v-if, v-else-if, v-else
<body>
<div id="app">
<label for="age">나이 : </label>
<input type="text" id="age" v-model="age"/>
<div>
<div>요금 : </div>
<div v-if="age<18">5000원 </div>
<div v-else-if="age<70">9000원 </div>
<div v-else>무료 </div>
</div>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
age:0,
};
},
})
</script>
</body>
** v-if와 v-show의 차이점 **
| v-if | v-show | |
| 렌더링 | false일 경우 X | 항상 O |
| false일경우 | 엘리먼트 삭제 | display:none 적용 |
| template 지원 | O | X |
| v-else 지원 | O | X |
- v-for
- 배열이나 객체의 반복에 사용
- v-for = "요소변수이름 in 배열" / v-for="(요소변수이름, 인덱스) in 배열"
실습 8: v-for
<body>
<div id="app">
<h2>단순for문</h2>
<div v-for="i in 5" >{{i}}</div>
<h2>객체반복</h2>
<div v-for="value in student" :key="value.id">{{value}}</div>
<h2>배열돌리기</h2>
<div v-for="(area, index) in areas" :key="index">{{index+1}}. {{area}}</div>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
student:{
id:"kimssafy",
name:"김싸피",
age:33,
},
areas:["구미", "대전", "부울경", "서울", "광주"]
//areas:[],
};
},
created() {
//ajax 통신
},
})
</script>
</body>
실습 9: v-for 객체 배열의 내용출력
<body>
<div id="app">
<h2>객체 배열 - 내용출력</h2>
<ul>
<li v-for="(ssafy, index) in ssafys" :key="index"> 지역 : {{ssafy.area}} ,{{ssafy.count}}개반</li>
</ul>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
ssafys:[
{
area:"서울",
count:11,
},
{
area:"대전",
count:4,
},
{
area:"구미",
count:2,
},
{
area:"광주",
count:2,
},
{
area:"부울경",
count:2,
},
]
}
},
})
</script>
</body>
실습 10 : v-if와 v-for 같이 쓰기
<body>
<div id="app">
<label for="classnum">반수</label>
<input type="text" name="" id="classnum" v-model.number="cnt">
<h2>객체 배열 - 내용출력</h2>
<ul>
<li v-for="(ssafy, index) in ssafys" :key="index" v-if="ssafy.count===cnt">
지역 : {{ssafy.area}} ,{{ssafy.count}}개반
</li>
</ul>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
cnt:0,
ssafys:[
{
area:"서울",
count:11,
},
{
area:"대전",
count:4,
},
{
area:"구미",
count:2,
},
{
area:"광주",
count:2,
},
{
area:"부울경",
count:2,
},
]
}
},
})
</script>
</body>
'WEB > Vue.js' 카테고리의 다른 글
| [Vue] Axios (0) | 2022.05.11 |
|---|---|
| [Vue] Vue Component (0) | 2022.05.10 |
| [Vue] Vue event (0) | 2022.05.10 |
| [Vue] Vue Instance (0) | 2022.05.10 |
| [Vue] Vue.js란 (0) | 2022.05.03 |
댓글