개발이 좋아서/Vue가 좋아서

11장 양방향 바인딩(v-model)

1) input value {{ inputValue }} {{ typeof inputValue }} textarea value {{ textareaValue }} checkbox value {{ checkboxValue }} checkbox values HTML CSS JavaScript {{ checkboxValues }} radio value O형 A형 {{ radioValue }} select value HTML 수업 CSS 수업 JavaScript 수업 {{ selectValue }} import { ref } from 'vue'; export default { setup() { const inputValue = ref(''); const textareaValue = ref(''); const c..

10장 이벤트 처리

1) event inline event handler export default { setup() { const printEventInfo = (message, event) => { console.log('message: ', message); console.log('event.target: ', event.target); console.log('event.target.tagName: ', event.target.tagName); }; const onKeyupHandler = event => { console.log('event.key: ', event.key); }; return { printEventInfo, onKeyupHandler }; }, }; 2) mouse DIV 영역 P 영역 SPAN 영..

9장 디렉티브

1) directives {{ msg }} {{ msg 안녕하세요 }} {{ msg }} !!!! import { ref } from 'vue'; export default { setup() { const msg = ref('안녕하세요'); const htmlStr = ref('안녕!!!'); return { msg, htmlStr }; }, }; 2) cloak DOCTYPE html> Vite App [v-cloak] { display: none } {{ message }} const App = { data() { return { message: '안녕하세요' } } } setTimeout(() => { Vue.createApp(App).mount('#app') }, 3000) 3) v-memo su..

8장 목록 렌더링(v-for)

1) ID: {{ item.id }} 인덱스: {{ index }}, {{ item.message }} {{ index }}-{{ key }}-{{ value }} import { computed, reactive } from 'vue'; export default { setup() { const items = reactive([ { id: 1, message: 'Java' }, { id: 2, message: 'HTML' }, { id: 3, message: 'CSS' }, { id: 4, message: 'JavaScript' }, ]); const evenItems = computed(() => items.filter(item => item.id % 2 === 0)); const myObject =..

7장 조건부 렌더링(v-if, v-show)

1) Hello Vue3! false 입니다. toggle A B C D A입니다. B입니다. C입니다. A, B, C가 아닙니다. Title Paragraph 1 Paragraph 2 Title 입니다. show toggle import { ref } from 'vue'; export default { setup() { const visible = ref(false); const type = ref('A'); const ok = ref(true); return { visible, type, ok }; }, };

6장 class와 style 바인딩

1) class_binding 텍스트 입니다. toggle toggleError import { computed } from '@vue/reactivity'; import { reactive, ref } from 'vue'; export default { setup() { const isActive = ref(true); const hasError = ref(false); // const classObject = reactive({ // active: true, // 'text-danger': true, // }); const classObject = computed(() => { return { active: true && true, 'text-danger': true && true, 'text-blu..

5장 Computed

1) {{ teacher.name }} 강의가 있습니까? {{ hasLecture }} {{ hasLecture }} {{ existLecture() }} {{ existLecture() }} Counter: {{ counter }} 이름 {{ fullName }} import { computed, reactive, ref } from 'vue'; export default { setup() { const teacher = reactive({ name: '짐코딩', lectures: ['HTML/CSS', 'JavaScript', 'Vue3'], }); const hasLecture = computed(() => { console.log('computed'); return teacher.lectures...

4장 반응형 기초(reactivity)

1) reactive Click {{ state.count }} Deep Click {{ state.deep.count }} import { reactive } from 'vue'; export default { setup() { const state = reactive({ count: 0, deep: { count: 0, }, }); const increment = () => { state.count++; state.deep.count++; }; return { state, increment, }; }, }; 2) ref {{ message }} add click import { ref } from 'vue'; export default { setup() { let message = ref('Hello..

3장 템플릿 문법

1) 보간법 {{ message }} {{ message }} Click! HTML {{ rawHtml }} 속성 바인딩 마우스를 올려보세요 JavaScript {{ message.split('').reverse().join('') }} {{ isInputDisabled ? '예' : '아니오' }} import { ref } from 'vue'; export default { setup() { const message = ref('안녕하세요!'); const rawHtml = ref('안녕하세요'); const dynamicTitle = ref('안녕하세요!@@@@@!!!'); const isInputDisabled = ref(false); const attrs = ref({ type: 'text', ..

2장 setup 함수

1) {{ counter }} {{ message }} click! import { ref } from 'vue'; export default { setup() { const counter = ref(0); const message = ref('Hello Vue3'); const increment = () => { counter.value++; }; return { counter, message, increment, }; }, };