vuejs9 Vue.js 대해서 Vue.js 기본 배경Vue.js는 2014년에 **에반 유(Evan You)**가 개발한 오픈소스 JavaScript 프레임워크입니다.주요 목표는 **사용자 인터페이스(UI)**와 싱글 페이지 애플리케이션(SPA) 개발을 간소화하는 것입니다.Vue.js는 프레임워크와 라이브러리의 장점을 결합해 유연하면서도 강력한 도구를 제공합니다.특징:반응형 데이터 바인딩과 컴포넌트 기반 아키텍처를 제공합니다.점진적 채택 가능: 필요에 따라 특정 기능만 도입하거나, 전체 프로젝트에 적용할 수 있습니다.배우기 쉬운 문법과 직관적인 구조를 가집니다.사용 사례:간단한 웹사이트 UI 구성대규모 싱글 페이지 애플리케이션(SPA)모바일 앱(예: Quasar Framework와 같은 툴을 사용)2024년 Vue.js 사용량현재 상.. 2025. 1. 19. Vue(version 3) 주요 기능 정리(v-on) #8 주요 기능 정리 #7에서는 v-on을 사용했을 경우에 대해서 알아봤다. 이번 주제는 v-on에서 custom 컴포넌트에서 사용하는 법을 소개해보고자 한다. import CustomComponent from './Sample.vue' const doThat = () => { // 자식 이벤트 } const doThat2 = (text: string) => { // 자식 이벤트 } /// './Sample.vue' 파일 const doChildThat = () => { emit('on-custom-event') } const doChildThat2 = () => { emit('on-custom-event2', '테스트') } const emit = defineEmits() 하단의 부터는 다른 파일이라고 생각.. 2024. 3. 1. Vue(version 3) 주요 기능 정리(v-on) #7 주요 기능 정리 #6에서는 select 컴포넌트 일 때 v-model을 사용했을 경우에 대해서 알아봤다. 이번 주제는 v-on에 대해서 알아보고자 한다. v-on은 이벤트를 받을 때 사용한다. 유저가 클릭했을 때, 어떤 값을 입력했을 때, 마우스를 이동했을 때 등등 여러 이벤트에서 사용한다. 기본 이벤트는 아래와 같다. v-on은 @로 축약해서 사용한다. click 이벤트는 위와 같이 stop prevent와 사용하는데, 이 이벤트는 자바 스크립트의 event.stopPropagation(); event.preventDefault(); 와 같은 기능이다. stop prevent에 대해서 간단히 설명하자면 Html의 구조상 부모와 자식의 관계로 사용하고 있는데, 부모 Element에 이벤트를 전달하지 않는.. 2024. 2. 12. Vue(version 3) 주요 기능 정리(v-model) #6 주요 기능 정리 #5에서는 input type=checkbox, type=radio일 때 v-model을 사용했을 경우에 대해서 알아봤다. 이번 주제는 select 컴포넌트에서 v-model을 사용하는 법에 대해서 알아보고자 한다. True False A B C D {{ user.UserName }} const selectedBooleanValue = ref(false) const selectedStringValue = ref('A') interface UserInfo { UserId: string UserName: string } const selectUser = ref({ UserId: 'test', UserName: '테스트' }) let selectOption: UserInfo[] = [ { Us.. 2024. 2. 5. 이전 1 2 3 다음 반응형