[Vue.js] 07 SFC(Single File Component)
2021. 9. 24. 09:25ㆍStudy/Vue.js
반응형
Single File Component
- 화면의 특정 영역에 대한 HTML, CSS, JS 코드를 한 파일에서 관리하는 방법
- 전역 컴포넌트는 Vue.component를 사용해 정의되고, container 엘리먼트를 대상으로 하는 new Vue({el: '#container'})가 정의됐었다.
- vue 확장자를 가진 파일을 모두 싱글 파일 컴포넌트라고 한다.
- 뷰 로더에 의해 HTML, CSS, JS와 같은 웹 자원으로 분리되어 실행
- 프론트엔드가 Javascript 기반인 경우 단점
- 전역 정의 모든 구성 요소에 대해 고유한 이름을 지정하도록 강요.
- 구문 강조가 약해 여러 줄로 된 HTML에 보기 안좋은 슬래시가 많이 필요
.Vue 확장자
- 완전한 구문 강조
- CommonJS 모듈
- 컴포넌트에만 제한된 CSS
- 각 *.vue 파일은 한번에 최대 하나의 template, script 블록과 여러개의 style 블록을 포함할 수 있다.
- 관심사 분리
- 현대적인 UI 개발에서 코드베이스를 서로 얽혀있는 세 개의 거대한 레이어로 나누는 대신, 느슨하게 결합 된 컴포넌트로 나누고 구성하는 것이 더 중요하다.
- 템플릿, 로직 및 스타일이 본질적으로 결합되어 배치되면 컴포넌트의 응집력과 유지 보수성이 향상된다
//Test.vue
<template>
</template>
<script>
export default {
name: "Test"
}
</script>
<style scoped> // scoped or module
</style>이벤트
- 등록
- 버블링
- 캡쳐
- 전파 방지
이벤트 등록
<button>add one item</button>var button = document.querySelector('button');
button.addEventListener('click', addItem);
function addItem(event) {
console.log(event);
}이벤트 버블링
- 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성
- 브라우저는 특정 화면 요소에서 이벤트가 발생했을 때 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파
<body>
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
</body>var divs = document.querySelectorAll('div');
divs.forEach(function(div) {
div.addEventListener('click', logEvent);
});
function logEvent(event) {
console.log(event.currentTarget.className);
}
이벤트 캡쳐
- 이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식.
- 이벤트가 발생했을 때 최상위 요소인 body 태그에서 해당 태그를 찾아 내려간다.
var divs = document.querySelectorAll('div');
divs.forEach(function(div) {
div.addEventListener('click', logEvent, {
capture: true // default 값은 false입니다.
});
});
function logEvent(event) {
console.log(event.currentTarget.className);
}
전파 방지
//javascript
function logEvent(event) {
event.stopPropagation();
}
// vue(수식어사용)
<a v-on:click.stop="doThis"></a>
preventDefault() 와의 차이
- e.preventDefault는 고유 동작을 중단시키고, e.stopPropagation 는 상위 엘리먼트들로의 이벤트 전파를 중단시킨다.
<a href="https://www.naver.com">Naver</a>$("a").click(function(e){
e.preventDefault();
alert("e.preventDefault()");
});반응형
'Study > Vue.js' 카테고리의 다른 글
| [Vue.js] 11 Vuex Helper (0) | 2021.09.24 |
|---|---|
| [Vue.js] 09 ES6 (0) | 2021.09.24 |
| [Vue.js] 05 Template (0) | 2021.09.23 |
| [Vue.js] 03 Router (0) | 2021.09.23 |
| [Vue.js] 02 Component (0) | 2021.09.23 |