사용자 지정 Vue 구성 요소에 vanilla .js를 추가하는 방법

사용자 지정 Vue 구성 요소에 vanilla .js를 추가하는 방법

커스텀 vue 컴포넌트에 간단한 날짜 선택기를 추가하려고 합니다.웹 팩을 사용하지 않기 때문에 기성품은 피하고 싶다..vue컴포넌트와 간단한 javascript를 vue에 추가하는 방법을 알고 있습니다.

저는 이 공식 vue 튜토리얼을 따르고 있습니다.

나도 이 코드펜을 봤지만 달력 보기를 할 수가 없어.

제 jsfiddle입니다.

HTML:

<div class="app">
  <datepicker id='date-elem'></datepicker>
</div>

app.filename:

Vue.component('date-picker', {
  extends: Flatpickr,
  mounted () {
    this.Flatpickr(date-elem, {})}
})

.vue 파일이나 웹 팩 등을 사용하지 않고 Vue 컴포넌트에 vanilla js를 쉽게 통합할 수 있는 방법은 무엇입니까?

여기 몇 가지 오해가 있습니다.이것을 컴포넌트(매우 기본적인 컴포넌트)로 하려면 , 다음과 같이 합니다.

Vue에서는 일반적으로 외부 Javascript 라이브러리를 확장하지 않습니다.일반적으로 작성하는 것을 래퍼 컴포넌트라고 합니다.기본적으로 외부 라이브러리와의 모든 상호 작용을 처리하는 Vue 구성 요소입니다.이 경우 Flatpickr를 사용합니다.이 매뉴얼에서는new Flatpickr(element, options)그래서 우리는 그것을 할 수 있다.mounted이벤트, 패스this.$el루트 Vue 컴포넌트 요소를 가리킵니다.

Vue.component('date-picker', {
    template: "<input type='text'>",
    mounted () {
        new Flatpickr(this.$el, {})
    }
})

여기 새로워진 바이올린입니다.

하지만 이 컴포넌트는 별로 도움이 되지 않습니다.그냥 날짜를 고를 수 있게 해주는 거야.해당 날짜를 컴포넌트 외부에서 사용할 수 있도록 하기 위해 해당 날짜를 확장하여v-model이렇게 하면 됩니다.

Vue.component('date-picker', {
    props:["value"],
    data(){
        return {
            selectedDate: this.value
        }
    },
    template: "<input type='text' v-model='selectedDate' @input='onInput'>",
    methods:{
        onInput(){
            this.$emit('input', this.selectedDate)
        }
    },
    mounted () {
        new Flatpickr(this.$el, {})
    }
})

이제 이렇게 쓸 수 있어요.

<date-picker v-model="selectedDate"></date-picker>

그리고 selectedDate에는 선택한 날짜가 표시됩니다.

여기 그것을 보여주는 바이올린이 있다.

언급URL : https://stackoverflow.com/questions/43682446/how-to-add-vanilla-js-to-a-custom-vue-component