Vue/Vue.js 문법
-
Vue.js 문법 - 키 수식어Vue/Vue.js 문법 2021. 7. 15. 19:27
키 수식어 - Vue에서 키 이벤트를 청취할 때 수식어로 v-on 또는 @ 를 더할 수 있다 - 체이닝이 가능하다 - keyboardEvent.key 를 통해 노출된 유효 키 이름을 케밥 케이스로 변환하여 수식어로 사용할 수 있다 키 명령어 - Vue는 자주 사용하는 키 명령어를 제공 .enter .tab .delete (“Delete” 와 “Backspace” 키 모두를 캡처합니다) .esc .space .up .down .left .right
-
Vue.js 문법 - 이벤트 수식어Vue/Vue.js 문법 2021. 7. 15. 02:28
이벤트 수식어 - 이벤트 핸들러 내부에서 event.preventDefault() 또는 event.stopPropagation()를 호출하는 것은 매우 보편적인 일 - 메소드 내에서 쉽게 이 작업을 할 수 있지만, DOM 이벤트 세부 사항을 처리하는 대신 데이터 로직에 대한 메소드만 사용할 수 있으면 더 좋습니다. - 이 문제를 해결하기 위하여, Vue는 v-on이벤트에 이벤트 수식어를 제공, 수식어는 점으로 된 접미사 .stop .prevent .capture .self .once .passive ... ... ... 이벤트 버블링 결과 코드 이해하기 - 파란 박스 (parent)를 클릭하면 handlerA() 동작 - 오렌지 박스 (child)를 클릭하면 handlerB() 동작, 이후 부모 요소 h..
-
Vue.js 문법 - 이벤트 핸들링Vue/Vue.js 문법 2021. 7. 14. 23:40
이벤트 청취 v-on 디렉티브는 Dom 이벤트를 듣고 트리거 될 때와 JS를 실행할 때 사용 v-on:click="methodName" 줄여서 @click="methodName" 으로 사용 메소드 이벤트 핸들러 Greet Vue.createApp({ data() { return { name: 'Vue.js' } }, methods: { greet(event) { // 메소드 안에서 사용하는 `this` 는 Vue 인스턴스를 가리킵니다. alert('Hello ' + this.name + '!') // `event` 는 네이티브 DOM 이벤트입니다 if (event) { alert(event.target.tagName) } } } }).mount('#event-with-method') - 클릭이라는 이벤트..
-
Vue.js 문법 - 리스트 렌더링Vue/Vue.js 문법 2021. 7. 14. 15:20
v-for - v-for 디렉티브를 사용하여 배열을 기반으로 리스트를 렌더링 - item in items 형태로 특별한 문법이 필요 - items는 원본 데이터 배열, item은 반복되는 배열 엘리먼트의 별칭 예제1 {{ fruit }}-{{ index }} 결과 예제2 {{ fruit.name }} 코드 이해하기 - computed 속성을 통해 정렬된(계산된) 배열을 반환 - 배열 데이터 내부에는 객체 데이터 (id, name)가 들어있음 - :key 값으로 배열의 아이템을 구분 가능한 고유한 속성(id)을 부여 shortid 패키지 # 각각의 아이디를 고유하게 만들어주는 패키지 $ npm i -D shortid 예제3 {{ fruit.name }}-{{ fruit.id }} 결과 객체 구조 분해 {{..
-
Vue-js 문법 - 조건부 렌더링Vue/Vue.js 문법 2021. 7. 14. 15:11
v-if - v-if 디렉티브는 조건에 따라 블록을 렌더링할 때 사용 - 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링 Vue is awesome! Vue is awesome! Oh no 😢 예제 Click me! Hello?! Good~ 코드 이해하기 - 처음에는 태그 (Click me!)와 태그 (Hello?!)가 화면에 출력 - 버튼 (Click me!)을 누르면 메소드 handler()가 동작 - hendler() 메소드는 isShow 데이터가 true면 false, false면 true로 변경 - isShow가 false 이므로 (Hello?!)는 (Good~)으로 변경 결론: 버튼을 누르면 (Hello?!)일때는 (Good~), (Good~)일때는 (Hello?!)로 변경됨 v-..
-
Vue.js 문법 - 클래스와 스타일 바인딩Vue/Vue.js 문법 2021. 7. 13. 20:33
클래스 바인딩 Hello?!({{ isActive }}) 코드 이해하기 - 태그 (Hello?!)를 클릭하면 isActive(기본값 false)가 true로 변경 - class 속성의 값(active)이 데이터이므로 v-bind: 디렉티브(약어)를 사용 :class="{ active: isActive }" - { active: isActive }는 Key와 Value 형태, isActive는 (true, false)값을 가지고 있음 - active: true 라면 active 클래스를 추가, active: false 라면 클래스를 추가하지 않음 - 위의 개념이 클래스 바인딩(Class Binding) 인라인 스타일 바인딩 - :style의 객체 구문은 매우 간단 - JavaScript 객체라는 점을 제외..