vue3 (7) 썸네일형 리스트형 [Vue3] 스와이프 와 캐러셀의 차이점, 캐러셀 구현 방법 상호작용 방식 :스와이프: 사용자가 화면을 손가락으로 밀어서 콘텐츠를 넘기는 방식입니다. 캐러셀: 자동으로 회전하거나 버튼을 눌러 콘텐츠를 전환하는 방식입니다.동작 : 스와이프: 주로 터치 기반 디바이스에서 사용되며, 사용자의 직접적인 조작이 필요합니다. 캐러셀: 자동 회전 기능이 있어 사용자 개입 없이도 콘텐츠가 변경될 수 있습니다.사용 목적:스와이프: 모바일 앱이나 반응형 웹사이트에서 많이 사용됩니다. 캐러셀: 웹사이트의 메인 페이지나 제품 갤러리 등에서 자주 사용됩니다. 4. 구현 방식: 스와이프: 주로 터치 이벤트를 감지하여 구현합니다. 캐러셀: CSS 애니메이션이나 JavaScript를 사용하여 구현하며, 자동 회전 기능이 포함될 수 있습니다캐러셀의 구현 방법A의 u.. [vue3] route 와 routes 의 차이 route는 현재 라우팅된 URL의 정보를 담고 있는 객체이다. 이 객체는 브라우저의 주소 표시줄에 표시되는 URL과 관련된 정보를 제공함. routes는 라우터에 등록된 모든 라우트를 나타내는 객체이다 . 각 라우트는 경로, 컴포넌트 및 기타 옵션을 포함하며, 이 배열은 일반적으로 라우터의 설정에서 사용된다. 즉, route는 현재 라우팅된 URL의 정보, routes는 라우터의 전체 구성을 나타낸다. route and router $route ::{{ $route }} $router:: {{ $router }} 1 : {{ $route.path }} 2 :{{ $route.name }} about 페이지 이동 route and router $route ::{{ $route }} $router:: {{.. npm run dev 명령어 더 짧게 쓰는 방법 그냥 귀찮다 3단어나 치는 게... 1. Shell 에서 $ alias dev="npm run dev" $ dev 쉘에서 사용하는 별칭(alias)을 등록하면 "npm run dev" 대신 "dev"라는 짧은 명령어로 실행할 수 있습니다. 다만, 이 방법은 쉘을 재시작할 때마다 별칭이 초기화되기 때문에, 터미널을 종료할 때마다 별칭을 다시 등록해주어야 합니다. 다행히 vscode 에서 ctrl C 로 취소한다고 초기화 되는 건 아닌다. 2. cmd 에서 > doskey dev=npm run dev alias 대신 doskey 그리고 등호 뒤에 " " 는 없다. 이거도 영구 설정은 아니라고 하니 참고하시길... [vue 3] router 를 이용한 팝업 띄우기 보호되어 있는 글입니다. [vue 3] ref, reactive의 차이 Vue 2에서 많이 사용했던 기존 optional api의 data( ) 안에 정의했던 내용을 composition api 형태로 사용시 setup 안에서 정의해주는 형태로 변경되었다. // optional api export default { data() { return { count: 1 } }, } 이때 ref() 및 reactive()는 반응형 데이터 객체를 만드는 데 사용할 수 있는 두 가지 함수이다. 1. ref( ) ref()는 값에 대한 반응형 참조를 만드는 데 사용된다. primitive type , reference type 둘 다 사용 가능함. value 프로퍼티는 참조 값을 가져오거나 설정하는 데 사용할 수 있다. ( 쉽게 이야기 해서 ref 로 정해진 변수의 값에 접근할 때는 변수.. [Vue 3] ref()란? Vue 3에서 ref()는 값을 보유할 수 있는 반응형 객체를 생성하는 함수입니다. 일반적으로 숫자나 문자열과 같은 간단한 데이터 유형을 저장하고 업데이트하는 데 사용됩니다. ref( ) 쓰지 않고 기본 자료형 0 을 사용하면 버튼을 눌러도 값이 증가하지 않는 0만 있을 뿐이다. (비슷한 걸로는 reactive() 가 있으나 ref() 와는 달리 collection 계열만 사용이 가능하다. 그 밖의 내용은 공식 Documents 를 참고하기 바란다) Counter: {{ counter.value }} Increment 이 예제에서는 ref(0)을 사용해 반응형 변수 카운터를 생성합니다. 이렇게 하면 카운터가 0 값으로 초기화됩니다. 그런 다음 카운터 값을 단순히 증가시키는 증가 함수를 정의합니다. 템플릿.. [VUE 3] Composition API 란? 새로 vue3를 시작하면서 낮선 단어들이 어렵게 느껴졌다. composition api 도 그 중 하나. 쉽게 풀자면.. vue를 하면서 코딩 스타일이 options 란 애랑 composition 이란 2가지가 있는데 vue2 에 했던 스타일이 options api , vue3 의 컨벤션이 composition api란 스타일이다. Options API export default { data() { return { // 기존엔 data() return 안에 정의를 강제했었다... author: { name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Mystery' ] } } }, computed: .. 이전 1 다음
