일반적인 Vue 문제 — 상태 업데이트, Vuex 및 이벤트 처리기
5066 단어 vueprogrammingjavascriptwebdev
지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.
Vue.js를 사용하면 프런트 엔드 앱을 쉽게 개발할 수 있습니다. 그러나 여전히 문제가 발생할 가능성이 있습니다.
이 기사에서는 몇 가지 일반적인 문제를 살펴보고 해결 방법을 알아보겠습니다.
Vue.js에서 v-on에 이벤트 및 인수 전달
Vue의
v-on
지시문에서 호출한 메서드에 인수를 전달할 수 있습니다.예를 들어 다음과 같이 작성할 수 있습니다.
<input type="number" v-on:input="addToCart($event, item.id)" min="0" placeholder="0">
우리의 템플릿에서.
그런 다음 구성 요소에서 다음을 작성할 수 있습니다.
methods: {
addToCart(event, id){
console.log(id)
}
}
$event
에는 input
이벤트에서 방출된 개체가 있습니다.id
에는 템플릿 코드로 전달한 item.id
가 있습니다.nextTick의 목적
nextTick
데이터를 변경한 후 무언가를 할 수 있습니다.일반 JavaScript의
setTimeout
와 같습니다.nextTick
는 데이터 변경 사항의 변경 사항을 감지하므로 데이터가 업데이트된 후에 항상 실행됩니다.setTimeout
는 그것을 알지 못합니다.예를 들어 다음이 있는 경우:
<template>
<div>
{{ val }}
</div>
</template>
<script>
export default {
data() {
return {
val: 1
}
},
mounted() {
this.val = 2;
this.$nextTick(() => {
this.val = 3;
});
}
}
</script>
this.val
의 초기 값은 1입니다.그런 다음
mounted
후크가 호출되고 업데이트this.val
가 2입니다.해당 업데이트가 완료되면 Vue가 3으로 업데이트
this.val
합니다.$mount()와 $el의 차이점
$mount
필요할 때 Vue 인스턴스를 명시적으로 마운트할 수 있습니다.이를 통해 특정 요소가 존재할 때까지
Vue
인스턴스를 지연할 수 있습니다.이것은 DOM을 조작하여 요소가 추가되는 레거시 앱에 Vue를 추가하는 데 유용합니다.
el
는 Vue
인스턴스가 존재하는지 여부를 먼저 확인하지 않고 DOM에 바로 마운트합니다.따라서 인스턴스를 정적 요소에 마운트하거나
Vue
인스턴스보다 먼저 로드되는 것으로 알고 있는 항목에 유용합니다.[Vue 경고]: 요소를 찾을 수 없음
이 오류는 Vue가 컴포넌트를 마운트하기 위해 주어진 선택으로 요소를 할 수 없음을 의미합니다.
예를 들어 다음이 있는 경우:
const main = new Vue({
el: '#main',
data: {
hello: 'home'
}
});
그러면 ID가
main
인 요소를 찾을 수 없습니다.이를 수정하려면
Vue
인스턴스를 생성하기 전에 요소가 로드되었는지 확인해야 합니다.예를 들어 다음과 같이 작성할 수 있습니다.
window.onload = () => {
const main = new Vue({
el: '#main',
data: {
hello: 'home'
}
});
}
또는 다음과 같이 작성할 수 있습니다.
window.addEventListener('load', () => {
// add the same Vue instance as the previous example
})
둘 다 주어진 요소가 DOM에 있는 후
Vue
인스턴스를 마운트할 수 있도록 합니다.초기 Vue.js 로드 시 모든 서버 측 데이터 로드
Vue 인스턴스를 생성하기 전에 Vue를 로드하는 자체 함수를 작성하여 데이터를 Vuex 저장소에 로드할 수 있습니다.
예를 들어 다음과 같이 작성할 수 있습니다.
const store = (data) => {
return new Vuex.Store({
state: {
exams: data,
},
actions,
getters,
mutations,
});
}
fetch('/some/url')
.then(response => response.json())
.then((data) => {
new Vue({
el: '#app',
router,
store: store(data),
template: '<App/>',
components: { App },
});
});
store
로 스토어를 생성하는 기능이 있습니다.그런 다음
store
생성자에 전달한 객체에서 Vue
함수를 호출합니다.data
에 전달한 store
는 fetch
함수 호출에서 가져온 것입니다.이렇게 하면 데이터가 저장소로 이동하기 전에 저장소에 채워집니다.
Vue CLI 프로젝트로 SASS 또는 SCSS 가져오기
node-sass
및 sass-loaer
패키지를 추가하여 Vue CLI로 만든 Vue 앱으로 SASS 또는 SCSS를 가져올 수 있습니다.그런 다음 코드에서 SCSS 파일을 로드할 수 있습니다.
패키지를 설치하려면 다음을 실행합니다.
npm install -D node-sass sass-loader
그러면 다음과 같이 작성할 수 있습니다.
import './styles/my-styles.scss'
스타일을 전역으로 가져오려면
main.js
.파일에서 SASS 또는 SCSS 파일을 가져오려면 다음을 작성합니다.
<style lang="scss">
...
</style>
Vue가 SCSS 코드를 인식하도록 추가합니다.
결론
기존 프로젝트에서 SASS 또는 SCSS 코드를 사용하려면 SASS 로더 패키지를 사용할 수 있습니다.
Vue 앱을 로드하기 전에 데이터를 Vuex 스토어에 로드하려면 데이터를 로드한 다음 데이터로 Vuex 스토어를 생성할 수 있습니다.
그런 다음 스토어로 Vue 인스턴스를 생성할 수 있습니다.
이벤트 핸들러에 무엇이든 전달할 수 있습니다.
nextTick
는 다른 업데이트 후에 상태를 업데이트하는 데 유용합니다.
Reference
이 문제에 관하여(일반적인 Vue 문제 — 상태 업데이트, Vuex 및 이벤트 처리기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aumayeung/common-vue-problems-state-updates-vuex-and-event-handlers-4lhp텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)