Vue3 (6) 썸네일형 리스트형 요소의 택스트가 머스태치(Mustache)만 있을 때 v-text를 사용해보자! 통상 {{someText}} v-text을 사용할 경우 같은 결과를 얻을 수 있다. URL:https://ja.vuejs.org/api/built-in-directives.html ビルトインのディレクティブ | Vue.js ja.vuejs.org v-if의 응용/팁 참이면 이것을 보여주거나 거짓이면 저것을 보여주는 게 보통인데 조건에 따라서 이것만 보여주기, 저것만 보여주기, 그리고 다 보여주고 싶을 때!!!!! 어떻게 해야 하나 공부를 하면서 찾은 방법을 기록해 둔다. 예를 들어, 결제수단을 신용카드를 선택할 경우, 현금을 선택할 경우에 따라 다른 문구를 보여주는 화면을 만드는데 처음에는 지불 방법을 결정한 후, 이하의 순서로 신청해주세요 4.Composition API기본 (Vue Router) Vue router란? -웹 페이지의 라우팅을 제어하는 Vue공식 플러그인. SPA 를 구축 할 수 있음. 여기서 라우팅이란, URL로 표시하는 페이지를 연결하는것. URL이 입력되었을 때 이 디렉토리의 이 페이지를 표시한다 라는 룰을 정해놓은것. 한 번 사용해보자 우선 설치는 npm install vue-router@4 입력 /src/router/index.js src폴더 안에 router폴더를 만들고 그안에 index.js라는 파일생성 import { createRouter } from ‘vue-router’; 입력 여기서 createRouter의 옵션을 사용하는데 첫번째로 history, 두번째로는 routes 어레이를 사용한다. 각 항목에 대해서는 path : URL의 경로. name : 경로에 .. 3.Composition API기본(Watch , WatchEffect) Vue3 공식사이트에는 watchEffect와 비교한 watch의 메리트를 다음과 같이 서술하고 있다. -효율적인 실행 -watch의 재실행 조건의 명문화 -watch상태에 대한 변경 전후의 값 모두 액세스 뭔말이고.. 개인적으로 조사해보고 알아낸 바에 따르면 , 공식사이트의 말과 크게 달라지지않지만 세 가지로 정리 해보았다. 차이! 1. 감시 대상을 정의하는 방법 2.watch는 변경전과 변경후의 값을 얻을 수있다. 3.초기 실행 타이밍 차례대로 알아봅시다. 1. 감시 대상을 정의하는 방법 watch는 감시할 객체를 첫번째 인수로 지정함. watchEffect는 함수 안에서 사용되고 있는 리액티브 오브젝트가 감시대상. *리액티브 오브젝트란 reactive() , ref() 에 의해 정의된 오브젝트. 예.. 2.Composition API기본 (setup, ref, reactive) 기존 버전(vue2)에서는 data() , Methods에는 함수를 , Computed에는 계산 속성이 들어갔다. 그밖에 라이프사이클 Hook이나 Watch등 많은 부분으로 로직이 분류되었다. 그에 따라 코드가 뒤죽박죽 되어 가독성이 떨어지는 단점이 생기곤 했다. 3버전으로 들어서며 모든 코드를 독립적으로 정의하는게 가능해졌다. setup() 을 사용하게되었다! 우리의 공식사이트에서 말한 정의는.. [ setup컴포넌트옵션 ] : 컴포넌트가 작성되기 전에 props가 해결되면 실행되고, CompositionAPI의 엔트리포인트로서 기능한다. 주의: 컴포넌트의 인스턴스를 참조하지 않기 때문에 setup안에는 this사용하는것을 피해야한다. props와 context를 인자로 받는 함수 (뭔말이고) 쉽게 말.. 왜? Composition API 인가? (1) Vue3 로 넘어오면서 바뀐 가장 큰 특징 Composition API의 사용! 왜? 사용하게 되었을까. 쉽게 말해, 가독성 유지보수 동일한 논리적 관심사와 관련있는 코드를 함께 배치 이 2가지다. 복잡하게 설명하자면, Vue컴포넌트를 사용하면 기능과 결합된 인터페이스의 반복 가능한 부분을 재사용 가능한 코드로 뽑아 쓸 수 있다. 이것만으로도 유지 보수, 유연성면에서 응용 프로그램을 상당히 향상시킬수 있다. 하지만! 컴포넌트의 규모가 커질수록 논리적관심사(관련된 코드)의 리스트도 커지게 된다. 그렇게되면 컴포넌트를 읽기어려워지고 이해하기 어려워지게 된다. 이것은 논리적관심사가 색에 따라 그룹화되어있는 컴포넌트를 나타내는 예. 이렇게 분리되면, 복잡한 컴포넌트를 이해하고 유지하는것을 어렵게 만든다. 단일 .. 이전 1 다음
