일반적인 Vue 문제 — Bootstrap, Vuex 경로 제한 등

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 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}`}}))

classapp로 모든 요소를 ​​얻습니다.  .

그런 다음 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 라우터 경로는 매개변수 값을 제한하는 정규식을 가질 수 있습니다.