반응형
1. 뷰 템플릿
2. 뷰 프로젝트 구성 방법
1. 뷰 템플릿 : html, css 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 html로 변환해 주는 속성.
템플릿에서 사용하는 뷰의 속성
- 데이터 바인딩
- 자바스크립트 표현식
- 디렉티브
- 이벤트 처리
- 고급 템플릿 기법
디렉티브
v-접두사를 가지는 모든 속성
<a v-if="flag">처음뵙겠습니다. 개자이너입니다.</a>| 디렉티브 이름 | 역할 |
| v-if | 참/거짓을 판단해 html태그를 화면에 표시하거나 표시하지 않는다. |
| v-for | 지정한 뷰 데이터의 개수만큼 html태그를 반복 출력한다. |
| v-show | v-if와 비슷하지만 v-show는 css효과(display:none;)을 주어 실제 태그는 남기고 화면상으로 보이지 않게 할 수 있다. |
| v-bind | html 태그의 기본 속성과 뷰 데이터 속성을 연결한다. |
| v-on | 이벤트 요소. v-on:click(해당 태그의 클릭 이벤트를 감지하여 특성 methods를 실행할 수 있다.) |
| v-model | <input>,<select>,<textarea>태그에만 사용할 수 있다. <>폼(form)에 입력한 값을 뷰 인스턴스의 데이터와 즉시 동기화한다. 서버에 보내거나 watch와 같은 고급 속성을 이용하여 추가 로직을 수행할 수 있다. |
상단 모든 디렉티브 사용
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>directive</title>
</head>
<body>
<div id="app">
<button v-on:click="clickBtn">click</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
methods: {
clickBtn: function(){
alert('개자이너 점핑디어');
}
}
});
</script>
</body>
</html>
반응형
'개발 > Vue.js' 카테고리의 다른 글
| 04-2. 상용 웹 앱을 개발하기 위한 필수 기술들 - 뷰 HTTP통신 (0) | 2019.09.24 |
|---|---|
| 04-1. 상용 웹 앱을 개발하기 위한 필수 기술들 - 뷰 라우터 (0) | 2019.09.06 |
| 03. Vue.js 개발 필수단위 - 인스턴스&컴포넌트 (0) | 2019.08.26 |
| 02. Vue.js 필수 플러그인 - github (0) | 2019.08.25 |
| 01. Vue.js 소개 (1) | 2019.08.22 |
댓글