vue component html,vue.js - VueJS cshtml component

本文探讨了如何在Razor视图中使用Vue.js。解释了.cshtml文件生成HTML并发送到浏览器的过程，并提供了一个使用Pug生成HTML模板并在生成后挂载Vue的示例。建议如果需要创建单页应用，则考虑使用.NET构建API，让Vue应用调用该API。

Yes, you can use Vue in your razor pages, but I think you're approaching it in the wrong way. Remember that the .cshtml files are compiled in the backend side into html markup that is sent to the browser.

If you want to use razor views you will have to mount your VueJS code on the HTML that is generated and sent to the browser. See [his example I created on Codepen to illustrate this, I'm using Pug to mimic something that generates the HTML template and once it is generated I mount Vue JS on it. https://codepen.io/jaireina/pen/MNvvgd

Pug

#app

input(type="text", placeholder="type your name", v-model="name")

each val in [1,2,3]

p.name {{name}}

var app = new Vue({

el: '#app',

data: {

name: ''

}

})

You won't be able to use Vue in the way you're trying, as a single page application and passing it the cshtml files as templates. If you really need to use razor views you can do something to what I mentioned before. But if you want to create a SPA, I would recommend creating an API with .NET and having your Vue app consuming that API.

I hope this helps.