母版中：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title</title>
<link rel="stylesheet" href="~/css/font/css/font-awesome.min.css">
<link rel="stylesheet" href="~/Scripts/element/2.8.2/theme-chalk/index.css">
<script src="~/Scripts/vue.min.js"></script>
<script src="~/Scripts/element/index.js"></script>
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<script src="~/Scripts/utils.js"></script>
</head>
<body>
<div id="main">
</div>
@RenderBody()
<script>
var mainVue = new Vue({
el: '#main',
data() {
return {
title: ''
}
},
methods: {
gettitle() {
var that = this;
$.post('/mobil/gettitle', function (res) {
that.title = res
$(document).attr('title', res);
})
}
},
mounted() {
this.gettitle();
}
})
</script>
@RenderSection("Scripts", required: false)
</body>
</html>
母版中定义的mainVue变量在视图中可以使用，绑定或调用方法都可以
视图中：
@{
Layout = "~/Views/Shared/_vueLayout.cshtml";
}
<div id="app">
{
{mainVue.title}}
</div>
@section Scripts{
<script>
new Vue({
el: '#app',
data: function () {
return {
}
},
methods: {
},
mounted() {
}
});
</script>
}