directive란?
html태그 안에 v-접두사를 가지는 모든 속성을 의미한다.
v-if는 지정한 뷰 데이터 값이 true, false여부에 따라서 해당 html태그를 화면에 표시하거나 표시하지 않는다.
v-else
v-show가 true일때 보여준다 if하고 show가 유사하다
차이점 if 는 element가 삭제 show는 style에 display만 none으로 변경
template를 이용하여 묶어서 처리 가능하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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">
<h1>directive</h1>
<button v-on:click="change">Click me</button>
<div v-if="showMe">안녕 Vue~~</div>
<div v-else>잘가~~</div>
<hr color='red'>
<button v-show="showMe" v-on:click="change">v-showTest</button>
<hr color='blue'>
<template v-if="showMe">
<h1>안녕</h1>
<p>반가워</p>
<button>나 버튼이야</button>
</template>
<template v-else>
<h1>Hi</h1>
<p>Good</p>
<button>I'm button</button>
</template>
</div>
<script>
new Vue({
el:'#app',
data:{
showMe:false
},
methods:{
change:function(){
this.showMe=!this.showMe
}
}
})
</script>
</body>
</html>v-bind
v-bind는 html태그의 기본 속성과 vue의 데이터 속성을 연결할 때 사용한다.
v-bind는 ":속성"으로 줄여쓸 수 있다.
v-bind예제1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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">
<h1>Directive: v-bind</h1>
<input type="text" placeholder="Message"><br>
<input type="text" v-bind:placeholder="msg1"><br>
<input type="text" :value="msg2"><br>
<img :src="imgPath" :width="imgW" :height="imgH">
</div>
<script>
new Vue({
el:'#app',
data:{
msg1:'이름을 입력하세요',
msg2:'아이디를 입력하세요',
imgPath:'images/bts.jpg',
imgW:200,
imgH:180
}
})
</script>
</body>
</html>v-bind예제2
v-on:clock은 @click으로 축약가능하다.
여러개 할 경우 카멜표기법과 쉼표(,)를 이용해서 작성한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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">
<h1>style 바인딩</h1>
<button @click="change">Click Me ({{btnTxt}})</button>
<div style="color:red;font-size:20pt">div1</div>
<div v-bind:style="{border:(visible)?'thick dashed orange':'thin solid gray'}">div2</div>
<div :style="{backgroundColor:'yellow', fontSize:'3px',padding:'2em'}">Hello~</div>
</div>
<script>
new Vue({
el:'#app',
data:{
visible:false,
btnTxt:'On'
},
methods:{
change:function(){
this.btnTxt=this.visible?'Off':'On';
this.visible=!this.visible;
}
}
})
</script>
</body>
</html>class binding
class를 동적으로 바꿔줄 수 있음
//el:'#app'과 똑같은 것
new Vue({
}).$mount('#app')<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
<style>
.good{
background-color: palevioletred;
color:peachpuff;
font-size:2em;
}
.bye{
background-color:powderblue;
color: royalblue;
font-size: 1.2em;
}
</style>
</head>
<body>
<div id="app">
<h1>class 바인딩</h1>
<button @click="change">Click Me({{btnTxt}})</button>
<div
:class="{good:visible,bye:!visible}"
:style="{width:'200px',height:'200px',border:'2px solid pink',margin:'20px'}">
div1
</div>
</div>
</body>
</html>
<script>
new Vue({
data:{
visible:false,
btnTxt:'On'
},
methods:{
change:function(){
this.visible=!this.visible
this.btnTxt=this.visible?"Off":"On";
},
}
}).$mount('#app')
</script>
'개발자 > 국비지원 SW' 카테고리의 다른 글
| 국비지원 99일차 - Spring pointcut표현식, Interceptor (0) | 2020.09.14 |
|---|---|
| 국비지원 98일차 - Spring JSON데이터 생성, AOP VueJS dynamic, v-for (0) | 2020.09.11 |
| 국비지원 96일차 - 온라인강의 환경설정, Vue.JS, MVVM패턴, Vue객체 (0) | 2020.09.09 |
| 국비지원 95일차 - Spring Mapping, 변수 객체로 받기, Component, 동적 MyBatis (0) | 2020.08.28 |
| 국비지원 94일차 - NodeJS mychat 입장, 퇴장, 채팅 (0) | 2020.08.27 |