Java Scripts/Vue.js (36) 썸네일형 리스트형 Vue 3 : Lazy Validation A common requirement in forms is to have the ability to only trigger the validation of a certain field whenever the user is done typing, this is called lazy validation. 지연 유효성 검사는 사용자가 특정필드의 입력을 완료할 때마다 특정 필드의 유효성 검사만 트리거하는 기능임 Text and email input fields fire different events depending on how the user interacts with them. The input event fires every time the user adds or deletes a character int.. Vue 3 : Tree shaking // 모든 배열 유틸리티들을 가져온다. import arrayUtils from "array-utils"; Since we are only using the object , string , boolean and number methods of yup, We use destructuring so that when we build our application, the parts of the library that we are not using can be removed from the bundle and we can save on some bundle size — this is known as tree-shaking. object , string , boolean 및 number 메소드만 사용하고 있으므로 .. Vue 3 : What is yup? validation code 를 직접 작성하는 것이 귀찮고 시간도 많이 걸리는 작업이기 때문애 YUP package 를 이용하면 된다. Vee-validate recommends as a best practice to use the library Yup https://github.com/jquense/yup in order to create our validation schemas. https://github.com/jquense/yup GitHub - jquense/yup: Dead simple Object schema validation Dead simple Object schema validation. Contribute to jquense/yup development by creating an a.. Vue 3 Why the Composition API There are currently three limitations you may have run into when working with Vue 2: As your components get larger readability gets difficult. 구성 요소가 커질수록 가독성이 어려워집니다. The current code reuse patterns all come with drawbacks. 현재 코드 재사용 패턴에는 모두 단점이 있습니다. Vue 2 has limited TypeScript support out of the box. Vue 2는 기본적으로 TypeScript 지원이 제한되어 있습니다. When to use the Composition API? You want optimal Typ.. Validating Vue 3 Forms : Why Vee-Validate? 목적 Validate single fields and full forms - learn how to use Vee-Validate to validate both a single input in our applications, and then grow that to validating a full form with a defined set of rules. Vee-Validate를 사용하여 애플리케이션의 단일 입력을 모두 검증한 다음, 정의된 규칙 세트를 사용하여 전체 양식을 검증하는 것을 알게 된다. Handle errors - Next, we will learn together how to check and present validation errors to our users as they progre.. Vue 3 Forms : BaseRadio - BaseRadioGroup BaseRadio 라디오버튼은 체크박스처럼 단일 입력으로 작동하지 않습니다. 라디오 버튼은 라디오 버튼그룹의 일부로 존재하고 기능하며, 각각 라디오버튼은 single 상테를 가지고 있다. 그룹의 상태에 따라, 라디오 버튼은 해당 그룹에 있는 다른 라디오 버튼들과 연계되어서 활성화되거나 비활성화될 수 있습니다. Making it v-model capable radio buttons don’t bind to the value property, but use the checked property instead. 라디오 버튼은 “value” 속성에 바인딩되지 않고 대신 “checked” 속성을 사용한다. The modelValue of our BaseRadio elements will contain the us.. Vue 3 : What is lint? ESLint는 code convention을 사전 정의된 rules에 따라 감지하는 기능을 제공. ESLint를 적용하면 code convention에 어긋난 모든 부분들을 하나도 빠짐없이 알아서 발견해주고 심지어 코드 변경 내용 저장하면 자동으로 ESLint 설정된 rules 대로 fix해주는 기능도 적용할 수 있음. package.json 적용 ESLint test 를 위한 project 를 아래 절차대로 생성함. vue create vue_lint // vue_lint 는 project 이름임. select default options ( vue3 babel, lint) npm install --save-dev eslint eslint-plugin-vue // 이미 install 되었으므로 vers.. Vue 3 Forms : Base Checkbox Labels first parent 에서 component 내부로 label 을 넘겨주기 위하여 label 을 prop 로 component 에 추가 한다 Making it v-model capable 체크박스 입력은 해당 상태를 값에 직접 바인딩하는 것이 아니라 체크된 속성에 바인딩한다. 체크박스의 값이라고 하는 속성은 일반적으로 프런트엔드에서 사용되지 않는다. checkbox type 의 은 input 이벤트를 트리거하지 않고, selected 및 unselected 될 때마다 change event 를 trigger 합니다. parent component 에게 checkbox 가 전환되었음을 알리고 싶을 때마다 update:modelValue를 내보낼 필요가 있다, 이를 위해서는 입력 element.. 이전 1 2 3 4 5 다음
