전체 글32 [vue3] router-view 사용법 ● router 사용법 src/router/index.js 더보기 import { createRouter, createWebHistory } from "vue-router"; const router = createRouter({ history: createWebHistory(), routes: [ { path: '/', name: 'Home', component: () => import('../pages/index.vue')}, { path: '/todos', name: 'Todos', component: () => import('../pages/todos/index.vue')} ] }) // 1-/home, 2-/todos, 3-/todos/create 4-/todos/:id export default.. 2024. 4. 23. [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. 이전 1 2 3 4 5 6 다음
