디렉티브(Directive): html 태그 안의 v-접두사를 가진 모든 속성
v-bind : html 속성 값에 뷰 데이터 값을 연결할 때 사용
<div id="app">
<p v-bind:id="id_data">아이디데이터</p>
<p v-bind:class="class_data">클래스데이터</p>
<p v-bind:style="style_data">스타일데이터</p>
</div>
new Vue({
el:'#app',
data:{
id_data:"tmp_id",
class_data:"tmp_class",
style_data:"tmp_style",
}
});- 전역 컴포넌트 같은 경우 <child v-bind:prop_data="데이터"></child>이렇게 선언 가능하다.
-> 전역 컴포넌트의 props 속성에 prop_data가 명시되어 있어야 한다. - v-bind:는 :로 축약해서 사용할 수 있되 혼동을 줄 수 있으므로 혼용해서 사용하진 말자.
v-if : 값에 따라(true, false) 보이거나 보이지 않거나
<a v-if="flag">flag=true면 보임</a>
v-for : 반복문
설명을 하는 것보다 직접 코드를 보는게 빠르다.
<html>
<head>
<title>Vue Sample</title>
</head>
<body>
<div id="app">
id=app : {{ message }}
<ul>
<li v-for="a in product">{{a}}</li>
<hr>
<li v-for="(a,i) in product" :key="i">{{a}}-{{i}}</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: 'app!',
product : ['가','나','다'],
}
});
</script>
</body>
</html>
id=app : {{ message }}
- {{a}}
- {{a}}-{{i}}
v-on: 화면 요소의 이벤트 감지, 처리 v-on:click -> @click가능
<button v-on:click="event_method">버튼</button>
@더 많은 v속성이 있으니 필요에 따라 해당 글에 추가할 예정
'공부-프레임워크, 개발도구 > Vue' 카테고리의 다른 글
| Vue - computed, methods, watch 속성 (0) | 2022.10.07 |
|---|---|
| Vue-라우터 사용법 (0) | 2022.10.06 |
| Vue- 컴포넌트간의 통신 (0) | 2022.10.06 |
| Vue- 컴포넌트 (0) | 2022.10.04 |
| Vue 입문 (0) | 2022.10.04 |
댓글