728x90
출처 : 인프런의 장기효(캡틴판교)님의 강좌 / Vue.js 시작하기 - Age of Vue.js
7. 템플릿 문법
- v-bind:id="xxx"
> xxx에 해당하는 변수를 data 안에있는 변수의 값으로 대입
- v-if="xxx"
> xxx 의 값이 true 이면 나타나고 아니면 보이지 않음
- v-else
> if와 짝으로 v-if="xxx" 에서 xxx가 false면 보이고 아니면 사라진다.
- v-show="xxx"
> xxx의 값이 true면 보임. 차이점은 false일 때 개발자 도구에서 display:none 속성으로 HTML이 노출된다.
- computed 속성 : 다음 글에서 설명
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p v-bind:id="uuid" v-bind:class="name">{{ num }}</p>
<!-- <p id="abc1234">{{ num }}</p> 와 동일 -->
<p>{{ doubleNum }}</p>
<div v-if="loading">
Loading...
</div>
<div v-else>
test user has been logged in
</div>
<div v-show="loading">
Loading...
</div>
<!-- TODO: 인풋 박스를 만들고 입력된 값을 p 태그에 출력해보세요 -->
<!-- vuejs.org 에서 input을 검색했을 때 예제-->
<input type="text" v-model="message" placeholder="edit me">
<p>{{message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 10,
uuid: 'abc1234',
name: 'text-blue',
loading: false,
message: ''
},
computed: {
doubleNum: function(){
return this.num * 2;
}
}
})
</script>
</body>
</html>
- v-on:eventName="methodName"
> event가 발생하면 method를 실행한다.
cf) v-on:keyup="method" : input 태그와 함께사용, 키를 입력하는 이벤트가 발생했을 때 method 실행
v-on:keyup.enter="method" : 엔터 입력이 들어왔을 때 method 실행
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button v-on:click="logText">click me</button>
<!-- keyup 까지만 치면 키보드 입력할때마다 뒤에 .enter가 있으면 엔터칠때만-->
<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>
</html>
728x90
'Front-End > Vue' 카테고리의 다른 글
| [장기효(캡틴판교) - Vue.js 시작하기] 9. Vue CLI 설치 및 프로젝트 생성 (0) | 2021.01.25 |
|---|---|
| [장기효(캡틴판교) - Vue.js 시작하기] 8. computed, watch 속성 (0) | 2021.01.25 |
| [장기효(캡틴판교) - Vue.js 시작하기] 6. axios (0) | 2021.01.24 |
| [장기효(캡틴판교) - Vue.js 시작하기] 5. router (0) | 2021.01.24 |
| [장기효(캡틴판교) - Vue.js 시작하기] 4. props/ event (0) | 2021.01.23 |
댓글