일반적인 Vue 문제 — Bootstrap, Vuex 경로 제한 등
5672 단어 vueprogrammingjavascriptwebdev
지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.
Vue.js를 사용하면 프런트 엔드 앱을 쉽게 개발할 수 있습니다. 그러나 여전히 문제가 발생할 가능성이 있습니다.
이 기사에서는 몇 가지 일반적인 문제를 살펴보고 해결 방법을 알아보겠습니다.
앱에서 부트스트랩 사용하기
부트스트랩의 CSS만 사용하려는 경우 일반 부트스트랩 패키지를 추가하고 여기에서 SASS 파일을 로드할 수 있습니다.
SASS 파일을 로드하려면
sass-loader
및 node-sass
를 사용할 수 있습니다.설치하기 위해 다음을 실행합니다.
npm install sass-loader node-sass --save-dev
그런 다음 Webpack 구성 파일에 SASS 파일을 로드할 경로를 추가합니다.
...
sassLoader: {
includePaths: [
path.resolve(projectRoot, 'node_modules/bootstrap/scss/'),
],
},
...
이제 구성 요소에서 Bootstrap SASS 파일을 가져올 수 있습니다.
<style lang="scss">
@import "bootstrap";
</style>
Bootstrap의 JavaScript 구성 요소를 사용하려면 대신 BootstrapVue를 사용해야 합니다.
SASS 리소스 로더 사용
다음과 같이 작성하여 SASS 전처리기를
vue.config.js
파일에 추가할 수 있습니다.module.exports = {
css: {
loaderOptions: {
sass: {
data: `
@import "@/scss/_variables.scss";
@import "@/scss/_mixins.scss";
`
}
}
}
};
Vue CLI 프로젝트에 포함되어 있으므로 추가 종속성이 필요하지 않습니다.
Vue의 다른 구성요소에 있는 메서드 호출
부모의 자식 구성 요소에서 메서드를 호출하지 않는 경우 다른 구성 요소의 메서드를 직접 호출할 수 없습니다.
대신 이벤트를 내보내고 수신하는 데 사용할 수 있는 전역 Vue 인스턴스를 추가하여 이벤트를 전달해야 합니다.
예를 들어 다음과 같이 작성할 수 있습니다.
window.Event = new Vue();
Vue
인스턴스를 생성합니다.그런 다음 다음과 같이 작성하여
$emit
호출할 수 있습니다.Event.$emit('createImage', item, response)
하나의 구성 요소에서.
그런 다음 다른 구성 요소의
mounted
후크에서 다음을 작성할 수 있습니다.mounted() {
Event.$on('createImage', (item, response) => {
// ...
}
}
createImage
이벤트를 수신하고 콜백 매개변수에서 $emit
로 전달된 인수를 가져옵니다.Vue 컴포넌트에 웹 컴포넌트 추가하기
Vue 컴포넌트에 웹 컴포넌트를 직접 추가할 수 있습니다.
예를 들어 다음과 같이 작성할 수 있습니다.
<template id="app">
<web-component>...</web-component>
</template>
web-component
는 웹 구성 요소이므로 직접 포함할 수 있습니다.v-html의 한계
v-html
는 일반 HTML 코드를 렌더링하는 데만 사용할 수 있습니다.우리는 그것으로 Vue 컴포넌트를 렌더링할 수 없습니다.
예를 들어 구성 요소가 있는 경우:
Vue.component('component', {
template: '<span>component</span>',
})
그러면 다음과 같은 코드를 가질 수 없습니다.
new Vue({
el: '#app',
data(){
return {
comp: '<component></component>'
}
}
})
...
<div id="app">
<span v-html="comp"></span>
</div>
component
가 구성 요소이기 때문에 작동하지 않습니다.모든 데이터 바인딩 및 Vue 구성 요소는 무시됩니다.
대신 일반 HTML을 렌더링해야 합니다.
new Vue({
el: '#app',
data(){
return {
comp: '<p>foo</p>'
}
}
})
...
<div id="app">
<span v-html="comp"></span>
</div>
p 요소가 있으므로
v-html
로 렌더링됩니다.여러 요소에 여러 Vue 인스턴스 마운트
여러 요소에 여러
Vue
인스턴스를 연결하려면 다음과 같이 작성할 수 있습니다.const vues = document.querySelectorAll(".app");
[...vues].forEach((el, index) => new Vue({el, data: { message: `hello ${index}`}}))
class
app
로 모든 요소를 얻습니다. .그런 다음
vues
에 스프레드 연산자를 사용하여 forEach
를 사용할 수 있습니다.콜백에서 새
Vue
인스턴스를 만들 수 있습니다.Vue 라우터 경로의 정규식
Vue 라우터 경로에서 정규식을 사용할 수 있습니다.
예를 들어 다음과 같이 작성할 수 있습니다.
{ path: 'item/:id(d+)', name: 'itemCard', component: ItemCard }
그런 다음
id
매개변수가 숫자여야 한다고 지정했습니다.v-model에 결합하는 맞춤 선택 구성요소
v-model
에 바인딩하는 맞춤 선택 구성 요소를 만들려면 구성 요소가 input
이벤트를 내보내고 value
소품을 가져와야 합니다.v-model
는 이 두 가지를 함께 줄인 것입니다.예를 들어:
<custom-select v-bind:value="val" v-on:input="val = $event.target.value"></custom-select>
다음과 같이 다시 작성할 수 있습니다.
<custom-select v-model="val"></custom-select>
그런 다음
custom-event
에서 input
이벤트를 내보내고 value
소품을 사용하기 위해 무엇이든 할 수 있습니다.결론
v-model
는 input
이벤트를 내보내고 value
속성을 취하는 것의 줄임말입니다.SASS 로더 패키지로 부트스트랩 SASS 파일을 추가할 수 있습니다.
Vue 라우터 경로는 매개변수 값을 제한하는 정규식을 가질 수 있습니다.
Reference
이 문제에 관하여(일반적인 Vue 문제 — Bootstrap, Vuex 경로 제한 등), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aumayeung/common-vue-problems-bootstrap-vuex-route-restrictions-and-more-bd0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)