728x90 반응형 전체 글303 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. Vue.js] 7. 리스트 렌더링 v-for1. 배열data() { return { items: [{ message: 'Foo' }, { message: 'Bar' }] }} {{ item.message }} {{ index }} - {{ item.message }} 2. objectdata() { return { myObject: { title: 'Vue에서 목록을 작성하는 방법', author: '홍길동', publishedAt: '2016-04-10' } }} {{ value }} {{ key }}: {{ value }} {{ index }}. {{ key }}: {{ value }} 3. 숫자{{ n }}n의 값은 0이 아니라 1부터 시작한다. key를 통한 .. 2024. 12. 27. Vue.js] 6. 조건부 렌더링 v-ifVue는 정말 멋지죠! 전환Vue는 정말 멋지죠!아닌가요? 😢 A B C A/B/C 아님 제목 단락 1 단락 2 v-show안녕!v-if와의 차이점은 v-show가 있는 엘리먼트는 항상 렌더링되고 DOM에 남아있다. v-show는 엘리먼트의 display CSS 속성만 전환한다. v-show는 를 지원하지 않으면, v-else와 상호작용하지 않는다. v-if vs v-showv-if는 전환 비용이 더 높고, v-show는 초기 렌더링 비용이 더 높습니다. 따라서 자주 전환해야 하는 경우 v-show를, 실행 중에 조건이 변경되지 않는 경우 v-if를 사용하는 것이 좋다. 엘리먼트에 v-if와 v-for를 함께 사용하는 것은 권장되지 않는다. 함께 사용하면 v-if가 먼저 평가.. 2024. 12. 27. Vue.js] 5. 클래스와 스타일 바인딩 객체로 바인딩 하기data() { return { isActive: true, hasError: false }}// 렌더링결과 data() { return { classObject: { active: true, 'text-danger': false } }}//렌더링 결과 객체를 반환하는 계산된 속성에 바인딩할 수도 있습니다. data() { return { isActive: true, error: null }},computed: { classObject() { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.typ.. 2024. 12. 24. Vue.js] 4. 계산된 속성 템플릿 내 표현식은 매우 편리하지만 간단한 작업을 위한 것이다. 템플릿에 너무 많은 논리를 넣으면 유지관리가 어렵다. 예를들어 객체 내 배열이 있는 경우 export default { data() { return { author: { name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Mystery' ] } } }}책을 가지고 있다:{{ author.books.length > 0 ? 'Yes' : 'No' }}span 내의 표현식이 반복되거나 복잡한 경우 아래와 같이 계산된 속성을 .. 2024. 12. 24. 이전 1 2 3 4 5 6 7 ··· 51 다음 728x90 반응형