我一直试图赶上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文件)?
答案 0 :(得分:0)
这就是我的方法。 .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(“”,...),但仍在测试中:)
编辑:
使用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>
我希望能够省略包装器,但是由于我已经在页面上使用其他实例(新的Vue()),因此无法使用例如“ #main”(主体上的id)元素),因为它与我页面上已有的其他全局实例冲突。
答案 1 :(得分:0)
我能够将 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的分步说明。