Asp.net mvc 如何在asp.net mvc局部视图中使用Vue组件（*.Vue）

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

我花了几天的时间尝试将Vue集成到asp.net mvc 5 web应用程序中，并在这一帮助下遵循了1_bug的答案

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

---

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

我就是这样做的。Vue文件只有在使用Vue加载程序（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>`
    });
})

$（“vue类别库”）。每个（函数（）{
新Vue({
艾尔：这个，
数据：（）=>({
行动：“，
类别列表：[]
}),
beforeMount:函数（）{
const actionAttribute=this.$el.attributes[“数据操作”]；
if（actionAttribute的类型！==“未定义”&&actionAttribute！==null）{
this.action=actionAttribute.value；
}否则{
错误（“此组件缺少数据属性'action'”）；
}
},
挂载：函数（）{
如果（this.action！==“”）{
CategoryService.getGalleryCategoryList（this.action）。然后（response=>{
this.categoryList=response.data；
});
}
},
方法：{
//没有
},
模板：`
{{category.name}




`
});
})

从HTML调用它如下所示

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

我目前正在研究Vue.component（“，…”），但它仍在测试中：）

编辑：

使用Vue.component（“，…）

Vue.component（“Vue人”{
道具：[“名称”]，
数据：函数（）{
返回{
键入：“无”，
年龄:0
}
},
模板：`
我的名字是{{name}

我是{{type}和年龄{{age}

`
})
var vm=新的Vue({
el:“vue组件”，
组成部分：[
“vue个人”
]
})
$（“.js更改值”）。在（“单击”，函数（）{
vm.$refs.myPersonComponent.type=“人”；
vm.$refs.myPersonComponent.age=38；
})
更改值

我希望能够省略包装器，但由于我已经在页面上使用了其他实例（new Vue（）），因此无法使用例如“#main”（作为body元素上的id）因为它与我页面上已有的其他全局实例冲突。

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

有关详细信息，请查看我对Github的回答或示例项目：

我还写了一个关于at Medium的逐步描述

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>