vuejs35 Vue(version 3) 주요 기능 정리(v-bind) #9 주요 기능 정리 #8에서는 v-on을 사용했을 경우에 대해서 알아봤다. 이번 주제는 v-bind 사용하는 법을 소개해보고자 한다. v-bind 는 v-bind:{속성} 이렇게 사용하며, 축약식으로 :{속성} 으로 사용한다. import CustomComponent from './Sample.vue' const testId = ref('test') const testClass = ref({ active: true, depth1: false }) /// './Sample.vue' 파일 {{ title }} interface Properties { useButton: boolean title: string } const props = withDefaults(defineProps(), { useButton: f.. 2024. 3. 10. Vue(version 3) 주요 기능 정리(v-model) #4 v-model 의 기능을 소개해 보고자 합니다. 일단 vuejs를 쓰는 이유중에 하나 이기도 한 v-model은 입력 Element와 밀접한 관련이 있다. 주로 Input 에 사용하기 때문이다. 그리고 REST Api와도 관련이 있을 것이다. 이 페이지에서는 v-model을 input text에서 사용하는 법을 적어본다. const id = ref('') let vueLessId: string | null = '' // 입력 이벤트 const eventInput = (payload: Event) => { const target = payload.target as HTMLInputElement if (/(&#@)/.test(target.value)) { alert('특수문자 안돼~') } vueLessId.. 2024. 1. 28. Vue(version 3) 주요 기능 정리(v-for) #3 vuejs 기능 중 v-for에 대한 기능을 설명합니다. v-for는 반복되는 Element를 구성할 때 자주 사용되는 기능입니다. {{ user.name }} {{ user.email }} interface User { id: string name: string email: string } const UserList = reactive([ { id: 'test1', name: '테스트1', email: 'test1@test.com' }, { id: 'test2', name: '테스트2', email: 'test2@test.com' }, { id: 'test3', name: '테스트3', email: 'test3@test.com' } ]) 위 처럼 template 태그를 사용할 수 있고, 아니면 실제 태.. 2024. 1. 28. Vue(version 3) 주요 기능 정리(v-if, v-show) #2 이번에는 v-if와 v-show를 기능을 소개하겠습니다. 코딩을 해본 사람들은 이 기능에 익숙할 것으로 보입니다. 이 기능은 해당 컴포넌트나, Element 를 보이거나 숨길 경우 사용합니다. const isShow = ref(false) let isUserView: boolean = false const ShowElement = (): boolean => { return isShow.value } const CalcUserView = computed((): boolean => { return isUserView }) 위 처럼 조건자, 메소드, 반응형 변수에 사용이 가능합니다. 메소드로 지정되어 있으면, 최초 랜더링 될 때, 한번 체크를 하고, 조건자가 반응형 변수이거나 computed를 사용할 경우 변.. 2024. 1. 26. 이전 1 2 다음 반응형
