Vue Directive 란?
HTML 태그 안에 v- 접두사를 가지는 모든 속성들을 의미하며 화면의 요소를 더 쉽게 조작하기 위해 사용하는 기능이다. 뷰의 데이터 값이 변경 되었을 때 화면의 요소들이 반응하여 변경된 데이터 값에 따라 갱신 된다. 따라서 화면의 요소를 직접 제어할 필요 없이 뷰의 디렉티브를 활용하여 화면 요소들을 조작 할 수 있다.
v-bind
- v-bind는 지정된 해당 태그의 속성값을 지정하는 데 사용되는 디렉티브다.
- v-bind 지우고 : 로 축약 가능, v-bind:href=“url”을 줄여서 :href=”url” 이라고 표기해줄 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"> </script>
</head>
<body>
<!-- 1. 템플릿 역할을 할 div 생성 -> 뷰 앱이 렌더링 할 것임 -->
<div id="app">
<h2 v-bind:style='{color: c1}'>{{test1}}</h2>
<!-- v-bind 생략 가능 -->
<h3 :style='{color : c2}'>{{test2}}</h3>
</div>
<script>
<!-- 2. vue.createApp 생성 -->
const app = Vue.createApp({
data(){
return {
c1 : 'orange',
c2 : 'yellow',
test1 : 'hello orange',
test2 : 'hello yellow'
}
}
});
app.mount('#app');
</script>
</body>
</html>
v-if
저장한 뷰 데이터 값의 참, 거짓 여부에 따라 해당 HTML 태그를 화면에 표시 여부를 결정하는 디렉티브이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"> </script>
</head>
<body>
<div id="app">
<h2 v-if='type==2'>판매자</h2>
<h2 v-else>구매자</h2>
</div>
<script>
const app = Vue.createApp({
data(){
return {
type:2
}
}
});
app.mount('#app');
</script>
</body>
</html>
v-show
- v-show는 대상의 '보여지는' 여부를 결정하는 것
- v-show가 true면 disply = block
- v-show가 false면 disply = none
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"> </script>
<style>
div{
background-color:blue;
width :100px;
height :100px;
}
</style>
</head>
<body>
v-show 화면
<div id ="app">
<h2 v-show="vs"></h2>
</div>
<script>
const app = Vue.createApp({
data(){
return {
vs:true
}
}
});
app.mount('#app');
</script>
</body>
</html>v-if vs. v-show
v-if 는 조건에 따라 요소를 생성하지만 v-show 는 요소가 이미 생성 되어 css 만 display:none 으로 변경 되는 것이다. 다라서 v-show가 브라우저가 더 쉽고 바르게 응답속도를 주기에 사용자 환경을 향상 시킬 수 있다. v-if 를 쓰는 경우는 v-else-if 및 v-else를 쓰기 위함이다.
즉, v-show는 <div> 요소를 유지하고 CSS 표시 속성만 '없음'으로 설정하지만 v-if는 실제로 <div> 요소를 삭제 한다는 것이다.
v-for
- v-for는 반복문
- v-for="Item in list"의 의미, list라는 배열에 Item이 들어가 있다.
- 배열 내 개체 추가하는 함수 -> push(); 함수
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="app">
<ol>
<li v-for="item in list">{{ item }}</li>
</ol>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
list: [
'Burrito',
'Salad',
'Cake',
'Soup',
'Fish',
'Pizza',
'Rice'
]
}
}
})
app.mount('#app')
</script>
</body>
</html>
</body>
</html>
[v-for] : image loop
<img v-for="img in imgs" v-bind:src="img" style="width:100px; height:100px;">
<script>
const app = Vue.createApp({
data(){
return{
imgs:[
'../imgs/111.png',
'../imgs/아이.png',
'../imgs/a.jpg'
]
}
}
})[v-for] : object loop
Json형태로 쓰고 싶다면 이렇게 obj 배열에 담아서 사용하면 된다.
obj:{name:'aaa',tel:'111'}[v-for] : imgs with <figure>
더보기
figure는 사진, 이미지, 다이어그램 등을 감싸는 테그이다.
figcaption은 figure 요소에 캡션을 만든다.
figure 요소의 자식 요소이며, 제일 처음 또는 제일 마지막에 위치시킨다.
<body>
<figure v-for="x in imgs" style="background-color:yellow; width :150px; height :150px">
<img v-bind:src="x.url" style=" width:100px; height:100px">
<figcaption>{{x.name}}</figcaption>
</figure>
<script>
const app = Vue.createApp({
data(){
return{
imgs:[
{name:'아이랑', url:'../imgs/111.png'},
{name :'아이', url:'../imgs/아이.png'},
{name:'풍경', url : '../imgs/a.jpg'}
]
}
}
})
app.mount('#app');
</script>
[v-for] : index
v-for로 인덱스 번호를 가져오기 위해 괄호 안에 쉼표로 구분된 두 단어를 지정해야 한다.
첫 번째 단어는 배열 요소이고 두 번째 단어는 해당 배열 요소의 인덱스이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js">
</script>
</head>
<body>
<div id="app">
<div>
<p v-for="(x, index) in food">
{{index}} 번째방 : "{{x}}" <br />
</p>
</div>
</div>
<script>
const app = Vue.createApp({
data() {
return {
food:[
'coffee',
'lipton',
'icetea',
'tamburins'
]
}
}
});
app.mount('#app');
</script>
</body>
</html>'vue' 카테고리의 다른 글
| Spring 과 vue 연동 (0) | 2023.06.09 |
|---|---|
| vue cmd 창에서 axios / router 추가하여 새 프로젝트 생성하기 (0) | 2023.06.07 |
| Node.js 설치 (1) | 2023.06.05 |
| Vue.js 시작하기 (0) | 2023.06.05 |
| Vue.js는 뭘까? (1) | 2023.06.04 |
