뷰에서 데이터를 화면에 표시하는 방법은 두가지가 있다.
데이터 바인딩과 디렉티브! 코드로 알아보자.
<body>
<div id="app">
{{num}} <!--#1. bind 방식 -->
{{doubleNum}}
<p v-bind:id="uuid" v-bind:class="name"></p> <!-- #2. 디렉티브 방식 -->
<!--이 태그의 id는 뷰 인스턴스 데이터의 uuid라는 값을 주입받는다.-->
<div v-if="loading"> //# 3. 클래스 바인딩 v-if
Loading..
</div>
<div v-else>
test user has been logged in
</div>
<div v-show="loading"> <!-- #.3 클래스 바인딩 v-show -->
Loading..2
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
new Vue({
el: '#app',
data : {
num : 10 ,
uuid : 'abc1234',
name : 'text-blue',
loading : true
} ,
computed : { // # 4. computed 속성
doubleNum : function(){
return this.num*2;
}
}
});
</script>
</body>
#1. bind 방식 : {{}} 태그 안에 변수 주입을 통해 데이터를 표현하는 방법
#2. 디렉티브 방식 : v-bind: Api를 활용하여 id값에 뷰 인스턴스의 데이터 변수값을 주입하는 방식.
: v-bind:class , v-bind:id 등 속성값들을 인스턴스의 변수를 통해 관리할 수 있다.
#3. 클래스 바인딩 : 뷰 인스턴스의 변수값에 조건을 부여하여 속성들을 관리하는 방식. if 와 show 의 차이점은
- if : 조건에 해당하지 않을 경우 해당 영역을 소스에서 아예 날림
- show : 소스에서 날리지 않고 show 속성값을 false로 하여 데이터를 숨김
: 아래의 그림을 보면, loading 값이 false일 때 Loading..에 해당하는 태그는 개발자도구에서 아예 보이지 않는다.
#4. computed 속성 : 보통 화면과의 변수 binding은 뷰 인스턴스의 데이터 변수와 맵핑되지만, computed 를 통해서 data를 가공한 값을 처리할 수 있다. 이러한 데이터 형태를 computed형이라고 함.
추가적으로 마우스와 키보드 이벤트를 처리할 때 쓰는 v-on 디렉티브와 뷰 인스턴스의 메소드 속성을 알아보자. 코드로 알아보자.
<body>
<div id="app">
<button v-on:click="logText">click</button>
<input type="text" v-on:keyup.enter="logText">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
methods:{
logText : function(){
console.log('clicked');
}
}
});
</script>
</body>
해당 포스팅은 인프런의 Vue.js 시작하기 - Age of Vue.js 학습 후 정리한 내용임을 알려드립니다.
'Study > Vue' 카테고리의 다른 글
| Vue.js 시작하기 10. Vue CLI (0) | 2022.01.22 |
|---|---|
| Vue.js 시작하기 09. Watch (0) | 2022.01.22 |
| Vue.js 시작하기 07. HTTP 통신 라이브러리 - axios (0) | 2022.01.22 |
| Vue.js 시작하기 06. 뷰 라우터 (0) | 2022.01.20 |
| Vue.js 시작하기 05. 컴포넌트 레벨 간의 통신 방법 (0) | 2022.01.19 |