반응형

vuejs2 272

스탠드아론 VUE 애플리케이션

스탠드아론 VUE 애플리케이션 vuej를 독립형 앱으로 구축할 수 있습니까?그래서 저는 웹호텔 백엔드 서비스에 의존하지 않습니다. 기본적으로는 npm에서 앱을 시작하고 싶지 않고 dist 폴더에서 index.html을 여는 것만으로 실행할 수 있습니다.file://프로토콜입니다. 제 webhotel은 npm과 node.js를 지원하지 않습니다.뛰면npm run build그 결과,dist필요한 디렉토리js그리고.css파일 및index.htmlHTTP 서버 없이 브라우저에서 이 파일을 열면 브라우저 콘솔에서 다음과 같은 오류가 발생합니다. 리소스를 로드하지 못했습니다. net:ERR_FILE_NOT_FOUND app.f5g4fd.js 이것을 열어두기 위해서index.html텍스트 편집기에서 제거\처음에src..

IT이야기 2022.06.08

Nginx 뒤의 VueJS 라우터 이력 모드

Nginx 뒤의 VueJS 라우터 이력 모드 마이 이슈 Nginx 뒤에 VueJS 라우터를 이력 모드로 설정하는 방법에 대한 공식 매뉴얼을 읽어보았습니다.또, 다음의 문서를 참조해 주세요. Stackoverflow - vue-router, nginx 및 직접 링크 Stackoverflow - 도커에서 Vue-router의 nginx를 설정하는 방법 이 모든 것을 확인하고 여러 번 변경해도 루트에 직접 링크를 제공할 수 없으며 올바르게 로딩할 수 없습니다(일명 404)./). 내 환경 nginx 도커 이미지를 만듭니다(nginx:alpine정적 VueJS 파일을 처리하도록 합니다. 마이 컨피규레이션 도커 파일 # build stage FROM node:lts-alpine as build-stage WORK..

IT이야기 2022.06.08

Vue.js는 동일한 컴포넌트 문제의 여러 인스턴스

Vue.js는 동일한 컴포넌트 문제의 여러 인스턴스 사진을 선택하기 위한 vue 컴포넌트를 만들었습니다.사용자가 사진을 클릭하면 해당 사진의 ID가 컴포넌트 내부의 숨겨진 입력 필드에 할당됩니다. 이 컴포넌트를 같은 페이지에서 다른 데이터로 두 번 사용했습니다.문제는 한 컴포넌트의 사진을 클릭하면 두 컴포넌트의 입력 필드 값이 갱신된다는 것입니다.vue.js 버전 2.1.10을 사용하고 있습니다.다음은 컴포넌트의 간이 버전입니다. 컴포넌트 export default { props: { ... }, methods: { getPhotos(){ ... }, updateSelectedPhoto(photo){ this.currentSelectedPhoto = photo; } } } html에서는 이렇게 사용하고 ..

IT이야기 2022.06.08

틀렸나요?v-bind 내부의 v-for와 동일한 요소의 일치 항목을 사용할 수 있습니까?

틀렸나요?v-bind 내부의 v-for와 동일한 요소의 일치 항목을 사용할 수 있습니까? 매치마다 HTML을 몇 개 렌더링하려고 하는데 잘 모르겠어요.사실 맞습니다. 구체적으로는, 이 기능을 사용할 수 있을지 어떨지 잘 모르겠습니다.v-bind:match='match'루프와 같은 요소에서v-for='match in matches'에 기재되어 있는 정보는match실제로 컴포넌트에 소품으로 보내지는가?네, 포함되었습니다.다음으로 동작 예를 제시하겠습니다. Vue.component('match', { props :['match'], template : `{{match.matchName}}` }) var mapp = new Vue({ el: "#app", data: { matches: [ { matchName:..

IT이야기 2022.06.07

VueJ 상위 업데이트 시 하위 구성 요소가 업데이트되지 않도록 함

VueJ 상위 업데이트 시 하위 구성 요소가 업데이트되지 않도록 함 스택: Vue 2.6.11 Vuex 3.6.0 문제:중첩된 많은 컴포넌트가 있으며, 이 컴포넌트는 다시 호버 컴포넌트로 감싸집니다.(처음에는 vuetify를 사용했지만 이후 디버깅을 위해 자체 호버 컴포넌트를 만들었습니다.보시다시피 데이터 변경은 호버 구성 요소 내에서만 발생합니다.부울이 변경됩니다.그러나 업데이트 이벤트는 모든 아이에 대해 트리거됩니다.물론 우리는 여전히 모든 아이들에게 실제 업데이트가 반응적이기를 원합니다.이들은 결코 정적 구성요소가 아닙니다.다만, 그 컴포넌트에 대해서 실제로 업데이트가 되었을 때만 컴포넌트를 업데이트 해 주었으면 합니다.라이브 어플리케이션에는 최대 2000~3000개의 어플리케이션이 있습니다. ....

IT이야기 2022.06.07

동적 콘텐츠 높이를 고려한 vue 전환을 통한 원활한 확장/축소 전환

동적 콘텐츠 높이를 고려한 vue 전환을 통한 원활한 확장/축소 전환 Vue 전환에 문제가 좀 있는데, 좀 도와주실 수 있나요?내가 깨닫고 싶은 것은 vue 전이를 사용하는 단순하고 가벼운 붕괴 구성요소이다. 그러므로 나의 현재 접근법에서는 붕괴가 무너질 때마다 그것의 높이는 다음과 같이 설정되어야 한다.contentHeight그 직후에는0(확장 시 반대 방향도 마찬가지).또는 vue 트랜지션의 JavaScript 후크에서 말하는 방법: 입력 전: 높이를 로 설정합니다.0 enter: 높이를 설정합니다.contentHeight 입력 후: 높이를 로 설정합니다.auto 떠나기 전: 높이를 로 설정합니다.contentHeight leave: 높이를 로 설정합니다.0 현재의 접근방식은 다음과 같습니다. 이 접..

IT이야기 2022.06.06

vuejs 웹 팩 관련 모듈을 찾을 수 없습니다. 오류

vuejs 웹 팩 관련 모듈을 찾을 수 없습니다. 오류 express 및 default vue-webpack-boilerplate를 사용하는 풀스택 어플리케이션이 있습니다.프로젝트 구조는 다음과 같습니다. ├── client │ ├── build │ │ └── ... │ ├── config │ │ └── ... │ ├── dist | | └── ... │ ├── index.html │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ └── ... │ │ ├── components │ │ │ └── ... │ │ ├── main.js │ │ └── router │ └── static ├── node_modules ├── package.json └── server ├── ap..

IT이야기 2022.06.06

Vue 2 후크 준비 완료

Vue 2 후크 준비 완료 Vue 2, 실제로 "완료 렌더링"을 나타내는 라이프 사이클 훅이 있습니까?페이지 입력 시 로딩 화면을 넣고 싶은데 Vue가 모든 로딩을 마치면 페이지 내용이 희미해져 표시되지만, 라이프 사이클 훅은 대부분 시도했지만 작동하지 않습니다.여기 내가 만약 한다면 시도해 볼 것이 있다.updated는, 「인쇄 렌더링」을 나타냅니다. updated(){ this.loaded() }, methods:{ loaded(){ var vm = this; this.loading = false; } } 이러한 라이프 사이클 훅이 없는 경우, 어떻게 하면 좋을까요?고마워요.아마 당신이 찾고 있는 방법은mounted()이는 vue 컴포넌트가 준비되면 실행됩니다.Vue 라이프 사이클 매뉴얼은 여기서 확..

IT이야기 2022.06.06

프로펠 변경 시 컴포넌트 업데이트

프로펠 변경 시 컴포넌트 업데이트 소품 변경 시 컴포넌트를 강제로 다시 렌더링하려면 어떻게 해야 합니까? 다음을 포함하는 구성 요소가 있다고 가정합니다. 데이터 오브젝트는 다음과 같습니다. data() { return { layoutSetting: 'large' } }, 그런 다음 버튼을 클릭해서 전달된 소품 설정을 변경하고 컴포넌트가 다시 렌더링됩니다. Change Layout 그리고 다음과 같은 방법이 있다. changeLayout() { this.layoutSetting = 'small'; }, 이렇게 하면 데이터 개체가 변경되었지만 변경된 소품으로 구성 요소를 다시 렌더링하지 않습니까? 컴포넌트에서 camelCased로 정의된 속성을 전달할 때는 템플릿에서 kebab-cased 속성 이름을 사용해..

IT이야기 2022.06.05
반응형