Vue.js
https://kr.vuejs.org/v2/guide/index.html#%EC%84%A0%EC%96%B8%EC%A0%81-%EB%A0%8C%EB%8D%94%EB%A7%81
시작하기 — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
kr.vuejs.org
여기에 예제를 보고 커스터마이징을 해봤다.
일단 코드는
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app-5">
<p v-if="hidden">{{ message }}</p>
<button v-on:click="hiddenMessage">클릭</button>
</div>
</body>
<script>
var app5 = new Vue({
el: '#app-5',
data: {
hidden: true,
message: '안녕하세요! Vue.js!'
},
methods: {
hiddenMessage: function() {
this.hidden = !this.hidden
}
}
})
</script>
</html>
이렇게 구현을 해봤다 간단하게 클릭했을때 message문구가 있으면 없얘고 없으면 보여주는 버튼이다
일단 v-if 로 hidden값을 체크한 뒤 true false 값으로 숨김, 보여줌을 판단합니다.
그리고 클릭이라는 버튼에 메서드를 호출하는 이벤트 리스너를 추가한 뒤 핸들링으로 hiddenMessage를 추가한다.
이 방법은 직접적으로 DOM을 건드리지 않고 앱의 상태만을 업데이트한다. 모든 DOM 조작은 Vue에 의해 처리되며 작성한 코드는 기본 로직에만 초점을 맞춘다.
Vue는 또한 양식에 대한 입력과 앱 상태를 양방향으로 바인딩하는 v-model 디렉티브를 제공한다.
결과물은
처음 화면
클릭했을때 화면
이렇게 출력된다.
조금 더 심화과정을 연습해보자 ~!~!
'Vue' 카테고리의 다른 글
| Vue 이벤트 수식어 (0) | 2020.04.08 |
|---|---|
| package-lock.json VS package.json ? (0) | 2020.04.07 |
| Vue Router ! (0) | 2020.04.06 |
| Vue lifecycle 이란 ? (0) | 2020.04.02 |
| Vue 첫 걸음 (0) | 2020.04.01 |