728x90 반응형 전체 글295 Vue.js] 13. Component > Events 컴포넌트는 내장 $emit 메소드를 사용해서 사용자 정의 이벤트를 발생시킬 수 있다. click meexport default { methods: { submit() { this.$emit('someEvent') } }} 부모는 v-on을 사용해서 수신할 수 있다. 템플릿에서는 kebab-case 이벤트 리스너를 사용하는 것이 좋다. native DOM 이벤트와 달리, 컴포넌트에서 발생한 이벤트는 버블리되지 않는다. direct 자식 컴포넌트에서 발생한 이벤트만 수신할 수 있다. Event Arguments Increase by 1 count += n" />methods: { increaseCount(n) { this.count += n }} Declaring Emit.. 2024. 12. 31. Vue.js] 12. Component > 등록, Props 1. 전역등록.component() 메서드를 사용해서 Vue앱에서 컴포넌트를 전역으로 사용할 수 있도록 할 수 있다. import { createApp } from 'vue'const app = createApp({})app.component( // 등록될 이름 'MyComponent', // 구현체 { /* ... */ })또는 가져온 .vue 파일을 등록한다. import MyComponent from './App.vue'app.component('MyComponent', MyComponent)전역으로 등록된 컴포넌트는 앱 내의 모든 컴포넌트 템플릿에서 사용할 수 있다. 2. 로컬등록전역 등록에는 몇 가지 단점이 있다. 1) 전역등록은 빌드 시스템이 사용하지 않는 컴포넌트를 제거하는 .. 2024. 12. 31. Vue.js] 11. ref, component 개발자가 직접 DOM element에 접근해야 하는 경우 ref라는 속성을 사용할 수 있다. component가 mount된 이후에 ref에 접근가능하다. {{ item }} ref 배열은 소스 배열과 동일한 순서를 보장하지 않습니다. 컴포넌트 정의하기 당신은 {{ count }} 번 클릭했습니다.컴포넌트 사용하기자식 컴포넌트를 사용하려면 부모 컴포넌트에서 가져와야(import) 합니다. 파일 안에 ButtonCounter.vue라는 카운터 컴포넌트를 배치했다고 가정하면, 해당 컴포넌트 파일의 기본 내보내기가 노출됩니다: 아래에 자식 컴포넌트가 있습니다. 컴포넌트를 전역으로 등록하면, 가져오기(import) 없이 지정된 앱의 모든 곳에서 컴포넌트를 사용할 수 있습니.. 2024. 12. 27. Vue.js] 10. 생명 주기 훅, Watchers 각 Vue 컴포넌트 인스턴스는 생성될 때 일련의 초기화 단계를 거칩니다. 예를 들어, 데이터 감시를 설정하고, 템플릿을 컴파일하고, 인스턴스를 DOM에 마운트하고, 데이터가 변경되면 DOM을 업데이트해야 합니다. 그 과정에서 생명 주기 훅(lifecycle hooks)이라 불리는 함수도 실행하여, 특정 단계에서 개발자가 의도하는 로직이 실행될 수 있도록 합니다. 생명 주기 훅 등록하기예를 들어 mounted 훅은 컴포넌트가 초기 렌더링 및 DOM 노드 생성이 완료된 후 코드를 실행하는 데 사용할 수 있습니다:export default { mounted() { console.log(`컴포넌트가 마운트 됐습니다.`) }}모든 생명 주기 훅은 호출하는 현재 활성 인스턴스를 가리키는 this 컨텍스트로.. 2024. 12. 27. Vue.js] 9. Form 입력 바인딩 메세지: {{ message }}여러 줄 메세지:{{ message }}체크박스{{ checked }}라디오선택한 것: {{ picked }}하나둘단일 셀렉트:선택됨: {{ selected }} 다음 중 하나를 선택하세요 가 나 다값 바인딩 하기라디오, 체크박스 및 셀렉트 옵션의 경우, v-model에 바인딩된 값은 일반적으로 정적 문자열(체크박스의 경우 불리언)입니다. 한글그러나 때로는 현재 활성 인스턴스의 동적 속성에 값을 바인딩하고 싶을 수도 있습니다. 이것을 구현하기 위해서는 v-bind를 사용해야 합니다. 또한 v-bind를 사용하면 입력 값을 문자열이 아닌 값에 바인딩할 수 있습니다. pick는 첫 번째 라디오 입력이 확인되면 first 값으로 설정되고 두 번째 라디오 입력이 .. 2024. 12. 27. Vue.js] 8. 이벤트 핸들링 v-on 디렉티브는 단축 문법으로 @기호를 사용한다. v-on:click="handler" 를 줄여서 @click="handler"와 같이 사용한다. 인라인 핸들러data() { return { count: 0 }}1 추가숫자 값은: {{ count }}메서드 핸들러data() { return { name: 'Vue.js' }},methods: { greet(event) { // `this`는 메서드가 활성화된 현재 인스턴스를 가리킵니다. alert(`안녕 ${this.name}!`) // 'event'는 네이티브 DOM 이벤트 객체입니다. if (event) { alert(event.target.tagName) } }}환영하기메서드 핸들러는 이.. 2024. 12. 27. 이전 1 2 3 4 5 ··· 50 다음 728x90 반응형