Как использовать компоненты Vue (* .vue) в частичных представлениях asp.net mvc

Question

Я пытался освоиться с Vue.js и работаю над веб-приложением asp.net mvc 5, которое интенсивно использует jQuery, и я хотел бы начать интеграцию Vue и начать заменять jQuery.

Я потратил пару дней, пытаясь интегрировать Vue в веб-приложение asp.net mvc 5 и с помощью этого Лучший подход при замене jQuery на VueJS 2 в существующем многостраничном приложении .NET MVC и последовал за ответом 1_bug.

Итак, в проекте, в который я надеюсь интегрировать Vue, я подумываю сначала использовать компоненты в частичных представлениях, а затем заняться другими представлениями.

Итак, вкратце, мой вопрос в том, как использовать компоненты Vue (IE: * .vue файлы) внутри частичных представлений?

Answer 1

Вот как я это делаю. Файлы .Vue возможны только в том случае, если вы используете vue-loader (webpack), но, поскольку у нас устаревший проект, это невозможно

$("vue-category-gallery").each(function () {
    new Vue({
        el: this,
        data: () => ({
            action: "",
            categoryList: []
        }),
        beforeMount: function () {
            const actionAttribute = this.$el.attributes["data-action"];
            if (typeof actionAttribute !== "undefined" && actionAttribute !== null) {
                this.action = actionAttribute.value;
            } else {
                console.error("The data-attribute 'action' is missing for this component.");
            }
        },
        mounted: function () {
            if (this.action !== "") {
                CategoryService.getGalleryCategoryList(this.action).then(response => {
                    this.categoryList = response.data;
                });
            }
        },
        methods: {
            // none
        },
        template: `
            <div class="c-category-gallery" v-if="categoryList.length > 0">
                <div class="row">
                    <div class="col-md-3 col-sm-4" v-for="category in categoryList" :key="category.id">
                        <div class="c-category-gallery__item">
                            <img :src="category.imageUrl" :alt="category.name" class="img-responsive"></img>
                            <div class="c-category-gallery__item-content">
                                <h4>{{ category.name }}</h4>
                                <ul class="list-unstyled">
                                    <li v-for="subCategory in category.subCategoryList" :key="subCategory.id">
                                        <a :href="subCategory.categoryUrl" v-if="subCategory.showCategoryUrl">{{ subCategory.name }}</a>
                                    </li>
                                </ul>
                                <a :href="category.categoryUrl" v-if="category.showCategoryUrl">{{ category.detailName }}</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>`
    });
})

Вызов из HTML происходит следующим образом ...

<vue-category-gallery 
    data-action="/api/categories/getcategorygallerylist?itemCount=4"
    v-cloak></vue-category-gallery>

В настоящее время я смотрю на Vue.component ("", ...), но он все еще находится в стадии тестирования:)

EDIT:

С Vue.component ("", ...)

Vue.component("vue-person", {
    props: ["name"],
    data: function () {
        return {
            type: "none",
            age: 0
        }
    },
    template: `<div>
                   <p>My name is {{name}}.</p>
                   <p>I am {{type}} and age {{age}}.</p>
               </div>`
})

var vm = new Vue({
    el: "vue-components",
    components: [
        "vue-person"
    ]
})

$(".js-change-value").on("click", function () {
    vm.$refs.myPersonComponent.type = "human";
    vm.$refs.myPersonComponent.age = 38;
})

<vue-components>
    <vue-person name="Kevin" ref="myPersonComponent"></vue-person>
    <button type="button" class="js-change-value">Change value</button>
</vue-components>

Я бы хотел, чтобы можно было опустить упаковщик, но так как я уже использую другие экземпляры (new Vue ()) на своей странице, я не мог использовать, например, «#main» (являющийся идентификатором в теле элемент), поскольку он конфликтует с другими глобальными экземплярами, которые у меня уже есть на моей странице.