如何在 asp.net mvc 部分视图中使用 Vue 组件 (*.vue)

Posted 2023-02-23

【中文标题】如何在 asp.net mvc 部分视图中使用 Vue 组件 (*.vue)

【英文标题】：How to use Vue components (*.vue) in asp.net mvc partial views

【发布时间】：2018-10-20 17:11:19

【问题描述】：

我一直在努力跟上 Vue.js 的速度，并且正在开发一个大量使用 jQuery 的 asp.net mvc 5 Web 应用程序，我想开始集成 Vue 并开始替换 jQuery。

我现在花了几天时间尝试将 Vue 集成到一个 asp.net mvc 5 Web 应用程序中，并在此 Best approach when replacing jQuery with VueJS 2 in multi-page existing .NET MVC application 的帮助下，并遵循 1_bug 的答案。

所以在我希望集成 Vue 的项目中，我正在考虑先在部分视图中使用组件，然后再处理其他视图。

简而言之，我的问题是，如何在局部视图中使用 Vue 组件（IE：*.vue 文件）？

【参考方案1】：

我能够将 Vue v.2.6 集成到我的 ASP.NET Core 项目中，而无需使用分部视图的 javascript 捆绑器。它应该在 ASP.NET MVC 项目中以相同的方式工作。

请查看我对How do I set up ASP.NET Core + Vue.js? 的回答或Github 上的示例项目了解详情：ASP.NET Core + Vue.js

我还在Medium上写了Using Vue Components in ASP.NET Core的分步说明。

【参考方案2】：

这就是我的做法。 .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" : 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("", ...) 但这仍在测试中:)

编辑：

使用 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' （作为正文上的 id element) 因为它与我页面上已有的其他全局实例发生冲突。