728x90
모든 예제 코드는 github에 있습니다.
8. 템플릿 문법
템플릿 문법 소개
- 뷰로 화면을 조작하는 방법으로 크게 데이터 바인딩과 디렉티브로 나눠집니다.
데이터 바인딩
- Mustache Tag({{ }})
- 뷰 인스턴에서 정의한 속성들을 화면에 표시하는 방식
디렉티브
- HTML 태그에서 표준 속성을 제외한
v-가 붙어있는 속성들
데이터 바인딩과 computed 속성
데이터 바인딩
- 화면에 데이터가 변경될때마다 다시 그려지는것이 reactive라고 하고, 실제로
Object.defindproperty()로 구현했을때 값이 연결되는 것이 데이터 바인딩이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Data Binding</title>
</head>
<body>
<div id="app">
{{message}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
message: "hello vue.js",
},
});
</script>
</html>Computed
- 데이터 값에 따라 바뀌는 데이터를 정의할때 사용
- 데이터에 있는 값에 따라 같이 계산되어 실행된다.
- 뷰 인스턴스 속성들을 정의할 때는 람다(화살표) 함수를 사용하면 안된다.
- 화살표 함수의 this는 기존 es5의 function에서의 this와는 다르기 때문이다. 화살표 함수에서는 this를 새로 정의하지 않는다. 화살표 함수 바로 바깥의 함수(혹은 class)의 this를 사용한다. 클로저다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>computed</title>
</head>
<body>
<div id="app">
<p>{{num}}</p>
<p>{{doubleNum}}</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
num: 10,
},
computed: {
doubleNum: function () {
return this.num * 2;
},
},
});
</script>
</html>뷰 디렉티브와 v-bind
- 디렉티브란
v-가 붙은 것들이다.
v-bind
- v-bind가 붙으면 특정 데이터 값이 붙게 된다.
- 예전에는 DOM을 하나씩 찾아서 데이터를 변경해야 했지만, 이걸 이용해서 데이터 변경이 훨씬 더 쉬워졌다.
v-bind:속성값 = "데이터명"
- [실습] : name이라는 데이터를 class에 name을 연결해보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Driectives</title>
<style>
.text-blue {
color: blue;
}
.text-red {
color: red;
}
</style>
</head>
<body>
<div id="app" v-bind:class="className">hello Vue.js</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
className: "text-blue",
},
});
</script>
</html>- Vue Develop tools로 className을 text-red로 변경하면 글자 색이 빨간색으로 변하는걸 확인할 수 있다.
v-if, v-show
v-if
- 로그인 하기 전에는 Loading...이라고 하고, 로그인이 되었으면 test user has been logged in이 나오게 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-if vs v-show</title>
</head>
<body>
<div id="app">
<div v-if="toggleLoding">Loding...</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
toggleLoding: true,
}
})
</script>
</html>- vue Develop tools를 이용해 true / false 를 변경하면 false이면 해당 컴포넌트가 화면에 안보이고, ture이면 해당 컴포넌트가 화면에 보일 것이다.
v-show
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-if vs v-show</title>
</head>
<body>
<div id="app">
<div v-show="toggleLoding">v-show Loding...</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
toggleLoding: true,
}
})
</script>
</html>v-if vs v-show
- v-if는 fasle인 경우에 DOM을 제거 하지만, v-show는 display=none의 값을 준다. 따라서 랜더링 성능 차이를 생각하자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-if vs v-show</title>
</head>
<body>
<div id="app">
<div v-if="toggleLoding">v-if Loding...</div>
<div v-show="toggleLoding">v-show Loding...</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
toggleLoding: true,
}
})
</script>
</html>- true
- false
모르는 문법이 나왔을 때 공식 문서를 보고 해결하는 방법
- Form Input Binding 공식 문서
- [TODO] 인풋 박스를 만들고 입력된 값을 p태그에 출력해보세요.
- Vanilla Javascript로 구현하게 되었을 때는 아래와 같이 DOM에 접근해서 구현해야 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input - p sync</title>
</head>
<body>
<div>
<p>Vanilla Javascript </p>
<input id="input-text" type="input">
<p id="show-text"></p>
</div>
</body>
<script>
// Vanilla Javascript
const $inputText = document.querySelector('#input-text');
const $showText = document.querySelector('#show-text');
const syncInputAndP = function(event){
const inputValue = event.target.value;
$showText.innerHTML = inputValue;
}
$inputText.addEventListener('keyup', syncInputAndP);
</script>
</html>공식문서 보는법
- 공식문서 사이트
- 검색 키워드가 중요한데, 지금과 같은 경우는 input이라고 검색하는 것이 가장 좋다.
- 그 이후 관련 공식문서를 통해서 구현하면 된다.(예제 코드를 한번 확인해보는걸 추천합니다.)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>input - p sync</title>
</head>
<body>
<div>
<p>Vanilla Javascript</p>
<input id="input-text" type="input" />
<p id="show-text"></p>
<p>vue.js</p>
<div id="app">
<input v-model="text" type="text" />
<p>{{text}}</p>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// Vanilla Javascript
const $inputText = document.querySelector("#input-text");
const $showText = document.querySelector("#show-text");
const syncInputAndP = function (event) {
const inputValue = event.target.value;
$showText.innerHTML = inputValue;
};
$inputText.addEventListener("keyup", syncInputAndP);
// Vue.js
const vm = new Vue({
el: "#app",
data: {
text: "",
},
});
</script>
</html>methods 속성과 v-on 디렉티브를 이용한 키보드, 마우스 이벤트 처리 방법
- 클릭햇을때 이벤트 처리
- 이벤트 수식어
- 이벤트 핸들러 내부에서
event.preventDefault()를 호출하는 것은 매우 보편적인 일입니다. 메소드 내에서 쉽게 이 작업을 할 수 있지만, DOM 이벤트 세부 사항을 처리하는 대신 데이터 로직에 집중할 수 있도록 뷰에서는 이벤트 수식어를 제공합니다. .prevent- 또한 이벤트 수식어 종류로 키 수식어를 제공합니다.
- keyboardEvent에서만 가능합니다.
- Ex) .enter, .page-down ....
- 이벤트 핸들러 내부에서
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Methods</title>
</head>
<body>
<div id="app">
<input v-on:click.prevent.enter="enterText" type="text">
<p>{{count}}</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
count: 0,
},
methods: {
enterText: function () {
this.count++;
},
},
});
</script>
</html>728x90
728x90
'Lecture > [인프런] Vue.js 시작하기 - Age of Vue.js' 카테고리의 다른 글
| 10. 프로젝트 생성 도구 - CLI (0) | 2020.07.05 |
|---|---|
| 9. 템플릿 문법 - 실전 (0) | 2020.07.05 |
| 7. HTTP 통신 라이브러리 - axios (0) | 2020.07.05 |
| 6. 라우터 (0) | 2020.07.05 |
| 5. 컴포넌트 통신 방법 - 응용 (0) | 2020.07.05 |
