반응형

vuejs2 189

부분 불투명도 전환

부분 불투명도 전환 나는 팝업과 오버레이를 활성화하기 위해 여기 안내서를 따라가고 있다.나는 최종 불투명도가 0.5인 오버레이가 필요하지만 Vue는 마지막에 1로 설정했다.나는 이런 것을 시도했지만, Vue는 불투명도를 0.5로 애니메이션화했고, 애니메이션이 끝날 때 갑자기 1로 바꾸었다. .fade-enter { opacity: 0; } .fade-enter-active { transition: opacity 2s; } .fade-enter-to { opacity: 0.5; } 여기 이 문제를 설명하는 테스트가 있다. https://jsfiddle.net/50wL7mdz/58865/ 갱신하다 워킹 솔루션 https://jsfiddle.net/50wL7mdz/58877/은 페이드 클래스에 최종 불투명도를..

Programing 2022.04.11

vue Fullcalendar eventRender, vue 구성 요소 추가

vue Fullcalendar eventRender, vue 구성 요소 추가 나는 풀칼렌더를 사용한다.이오 vue증축의 그리고 액션을 추가하기 위해 이벤트 렌더에 연결하려고 하는데, 이벤트 콜백에는 JS 요소만 들어 있어. 주입하는 방법이 있다.vue그 안에 구성 요소가 있는가? JS import FullCalendar from '@fullcalendar/vue' import dayGridPlugin from '@fullcalendar/daygrid' import interactionPlugin from '@fullcalendar/interaction'; export default { components: { FullCalendar }, data () { return { loader: false, cal..

Programing 2022.04.11

Vue.js - 데이터를 가져오는 데 사용해야 하는 구성 요소 수명 주기를 선택하십시오.

Vue.js - 데이터를 가져오는 데 사용해야 하는 구성 요소 수명 주기를 선택하십시오. Alligator.io 중 하나를 읽은 후, 마운트된 라이프사이클은 http get을 사용하기에 좋지 않은 장소라고 말하고 있던 Vue에 대해 글을 올렸다.Vue.js에서 API에서 데이터를 어떻게 적절하게 얻을 수 있는지 가이드라인이 있는지 궁금하다."call API in created hook을 선호한다.악어로부터 인용하다.io: 생성된 후크에서 반응형 데이터에 액세스할 수 있으며 이벤트가 활성 상태임.템플릿과 가상 DOM은 아직 마운트되거나 렌더링되지 않았다. 따라서 필요에 따라 데이터를 쉽게 액세스하여 서버의 응답을 구문 분석하고 저장할 수 있다. 안부 전해요그created()라이프사이클 후크는 API 데이터..

Programing 2022.04.11

왜 약속인가.드디어 엣지에서 일하지 않는 내 Vue 프로젝트에서?

왜 약속인가.드디어 엣지에서 일하지 않는 내 Vue 프로젝트에서? 나는 엣지에서 일하기 위해 폴리필름을 구하는데 엄청난 어려움을 겪고 있다.나는 여러 가지 시도들이 모두 통하지 않고 서류를 따르려고 노력했다.약속인 것 같다.마지막으로, 그것은 작동하지 않는다.vuex 모듈에서 이러한 현상이 발생하므로 vue.config의 transpileDependency에 vuex를 추가하려고 했지만 운이 따르지 않았다. 내 babel.config.js: module.exports = { presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'entry', }]], }; 나의 main.js에는 다음과 같은 두 가지 수입품이 맨 위에 있다. import 'core-js/..

Programing 2022.04.10

Vue.js 템플릿에서 임시 변수를 정의하는 방법

Vue.js 템플릿에서 임시 변수를 정의하는 방법 현재 템플릿: {{rowLenMap[orderList[n - 1]]}} 문제는 내가 글을 써야 한다는 것이다.rowLenMap[orderList[n - 1]]vue.js 엔진도 여러 번 계산할까봐 걱정이다. 내가 원하는 건 이런 거야 {{rowLen}} 이런 걸 쓰면 어설프게 풀릴 수 있기 때문에 기술적으로 구현하는 것은 어렵지 않다고 본다.v-for="rowLen in [rowLenMap[orderList[n - 1]]]"그래서 어떤 간결하고 공식적인 해결책은 없을까?나는 그것을 달성하기 위한 아주 간단한 (거의 마법적인) 방법을 찾았다. 단지 당신이 여러 번 사용하고 싶은 값을 가진 인라인(로컬) 변수를 정의하기만 하면 된다. {{ user.name ..

Programing 2022.04.10

파일을 base64로 변환하고 Vuejs에서 v-model 바인딩 추가

파일을 base64로 변환하고 Vuejs에서 v-model 바인딩 추가 나는 파일 입력 필드가 있는 구성요소를 만들고 있고, 기능을 통해 렌더링되고 있다.VueJs: export default { name: 'nits-file-input', props: { label: String, }, render (createElement) { return createElement('div', { class: 'form-group m-form__group'}, [ createElement('label', this.label), createElement('div'), createElement('div', { class: 'custom-file'},[ createElement('input', { class: 'custo..

Programing 2022.04.10

Vue.js 계산된 속성은 이벤트를 통과할 때 반응성을 잃는다.

Vue.js 계산된 속성은 이벤트를 통과할 때 반응성을 잃는다. 나는 a를 가지고 있다.Modal모달이 표시되어야 할 때마다 이벤트를 통해 콘텐츠를 전달하는 내 기본 앱의 구성 요소.모달 콘텐츠는 항상 "선택" 또는 "제거"와 같이 각 항목과 관련된 액션을 포함하는 목록이다. Vue.component('modal', { data() { return { shown: false, items: [], callback: ()=>{} } }, mounted() { EventBus.$on('showModal', this.show); }, template: ` {{ item }} Remove `, methods: { show(items, callback) { this.shown = true; this.items = ..

Programing 2022.04.10

Vue 라이브러리 선택을 사용하여 vue 선택 필드에 여러 레이블을 표시하는 방법

Vue 라이브러리 선택을 사용하여 vue 선택 필드에 여러 레이블을 표시하는 방법 나는 아래와 같이 vue Select 라이브러리에서 vue 선택 구성 요소를 html 형식으로 사용하고 있는데, 라벨에 세 가지 값을 표시하고 싶은데 어떻게 해야 할지 모르겠어. 설명서에서 해결책을 찾을 수 없었어. 아래와 같이 라벨에 3개의 값을 표시하고자 한다. HTML: JS: Vue.component('v-select', VueSelect.VueSelect); var app = new Vue({ el: '#app', data: { formfieldsdata: { items: [], }, item: { selected_item: 0, }, } }); vue 선택 라이브러리 설명서 참조: https://vue-selec..

Programing 2022.04.10

vue2-daterange-picker에서 "Clear" 버튼을 구현하는 방법?

vue2-daterange-picker에서 "Clear" 버튼을 구현하는 방법? vue2-daterange-picker 예시 보기 https://innologica.github.io/vue2-daterange-picker/#1906 어떻게 구현되는지 궁금하다.Clear단추? 그러한 버튼과 빈 값을 기본값으로 만들어야 한다(1970년 1월 1일이 아니다).이 일은 내게 효과가 있었다. 단추가 개체를 업데이트하거나 이 경우 기본값으로 '재설정'해야 한다. 단추 Clear 방법들 methods:{ clearDate() { this.dateRange.startDate = null; this.dateRange.endDate = null; }, } 나는 이 모든 것에 익숙하지 않다. 그리고 나는 내 답변이 질문이 ..

Programing 2022.04.10

Vue 및 Axios가 포함된 진행 표시줄

Vue 및 Axios가 포함된 진행 표시줄 이미지 업로더를 만들고 있는데, 파일이 선택되면 증분을 시작하는 진행 표시줄을 표시하려고 해. Axios를 사용하여 백엔드에 액세스하고 다음과 같이 설정한다. const BASE_URL = 'http://localhost:3000'; function uploadImage(data, listingId) { const url = `${BASE_URL}/listings/${listingId}/images`; let config = { onUploadProgress(progressEvent) { var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total); return perc..

Programing 2022.04.10
반응형