FRONT16 [vue3] computed, watchEffect, Watch 사용법 ● computed 사용법 App.vue count: {{count}} doubleCount Computed: {{doubleCountComputed}} doubleCount Method: {{doubleCountMethod()}} Add one // 숫자세기 const count = ref(1) const doubleCountComputed = computed(() => { return count.value * 2 }) const doubleCountMethod = () => { return count.value * 2 } 차이점 1. - doubleCountMethod 는 매개변수를 전달할 수 있으나, computed는 매개변수 전달이 불가능 하다. - computed 는 state 값(count.v.. 2024. 4. 23. [vue3] props, emit 사용법 ● props 사용법 (부모컴포넌트 -> 자식컴포넌트로 내려받기) App.vue - 제일 상단 위에서 :todos 을 내릴 때 사용한다. 더보기 TodoList.vue - 자식 컴포넌트에 props로 내려받아 사용한다. 더보기 props: { todos: { type: Array, required: true } }, ● emit사용법 (자식컴포넌트 -> 부모컴포넌트로 올려받기) - 예시) 배열을 지우는 이벤트 적용 TodoList.vue 더보기 Delete 더보기 export default { props: { todos: { type: Array, required: true } }, emits: ['toggleTodo', 'deleteTodo'], setup(props, { emit }){ const d.. 2024. 4. 22. [vue3] ref, reactive 사용법 ● ref 사용법 더보기 setup () { const name = ref('Kossie Coder1'); const updateName = () => { name.value = 'Kossie Coder2'; } return { name, updateName } } - 탬플릿으로 되어 있어 ref 를 사용하여 값을 변경해야한다. - ref 를 사용할땐 value 를 사용해야한다. ● reactive 사용법 (주로, [], {} 일때 사용된다) 더보기 {{name}} {{array.id}} Click 2024. 4. 20. [vue3] vue3 초기셋팅 ● 설치방법 vue create 폴더명 ● 기본 사용 문법 더보기 {{name}} Hi export default { setup () { const name = 'Kossie Coder1'; return { name } } } .name { font-size: 20px; color: red; } ● F1 - Open Setting(UI) "vetur.validation.template": false, "vetur.validation.script": false, "vetur.validation.style": false, - 파일내 추가해야함. ● veture.config.js 더보기 // vetur.config.js /** @type {import('vls').VeturConfig} */ module.ex.. 2024. 4. 19. [GSAP] ScrollSmooth 효과 1. CDN 링크 https://gsap.com/docs/v3/Plugins/ Plugins | GSAP | Docs & Learning --- gsap.com [★] 플러그인 2024. 3. 23. [GSAP] TextPlugin 타이핑 효과 [★] 플러그인 1. TextPlugin 정의 - 타이핑 효과1 [Html] 더보기 GreenSock's TextPlugin Set or animate text in sequence. Reversible too! [Css] 더보기 * { margin: 0; padding: 0; } body { background-color:#1d1d1d; font-family: "Signika Negative", sans-serif; color: #999; margin: 0; font-size: 18px;} h1, h2 { font-family: "Signika Negative", sans-serif; margin: 10px 0 10px 0; color: #f3f2ef; font-weight: 400;} h1 { fon.. 2024. 3. 23. 이전 1 2 3 다음
