Question

我有一个新的asp.net mvc项目（不是.net核心），并且我正在尝试将Vue js合并到该项目中。我在使用Webpack + Vue + Asp.Net Mvc的示例项目中进行了所有工作，该项目是根据本文https://medium.com/corebuild-software/vue-js-and-net-mvc-b5cede228626创建的。

该应用程序运行良好，除了Vue渲染之前的瞬间。在将Vue模板代码呈现为html之前，有明显的闪烁/弹出。以下是我刷新页面的gif图像，用户可以在Vue将其渲染为html之前看到该模板。

我知道为什么会这样，但是我不知道如何解决。服务器端渲染是否可以解决此问题？可以在非.net核心项目中完成SSR吗？

不幸的是，不能选择切换到asp.net core。该项目将使用不能在asp.net核心（https://our.umbraco.com/forum/using-umbraco-and-getting-started/93640-net-core）上运行的Umbraco 7。

下面是我的文件

Index.cshtml

@{
    ViewBag.Title = "Home Page";
}

<div class="jumbotron">
    <h1>ASP.NET</h1>
    <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p>
    <p><a href="https://asp.net" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>

<div id="app" controller-data="{ name: 'James' }">
    <h3>Test</h3>
    {{ vueMessage }}
    {{ controllerData }}
    <first-component v-bind:time="new Date()" data="@Model"></first-component>
    <button v-on:click="test">Test</button>
</div>

<div class="row">
    <div class="col-md-4">
        <h2>Getting started</h2>
        <p>
            ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
            enables a clean separation of concerns and gives you full control over markup
            for enjoyable, agile development.
        </p>
        <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301865">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Get more libraries</h2>
        <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
        <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301866">Learn more &raquo;</a></p>
    </div>
    <div class="col-md-4">
        <h2>Web Hosting</h2>
        <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
        <p><a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301867">Learn more &raquo;</a></p>
    </div>
</div>

@Scripts.Render("~/Scripts/bundle/home.js")

index.js（通过webpack编译为Scripts / bundle / home.js）

import Vue from 'vue';
import FirstComponent from './sub-components/first-component.vue'

new Vue({
    el: '#app',
    components: {
        FirstComponent
    },
    props: {
        controllerData: Object
    },
    methods: {
        test: function () {
            console.log(this);
        }
    },
    data: function () {
        return {
            vueMessage: 'Message from Vue'
        };
    }
})

first-component.vue

<template>
    <div class="time">
        {{ time }}
        {{ data }}
    </div>
</template>
<script>
    export default {
        props: {
            time: {
                type: Object,
                required: true,
            },
            data: Object
        }
    }
</script>
<style>
    .time {
        color: #F44336;
    }
</style>

Answer 1

使用v-cloak属性。

<div id="app" v-cloak>
...
</div>

当框架完成安装后，该属性会被vue自动删除。

v-cloack属性不会显示或隐藏您的元素-基本上是一个标记，用于指示安装是否完成。您为目标v-cloack编写了一个CSS选择器，以隐藏元素或显示加载指示。

<style>
    [v-cloak] > * { display:none }
    [v-cloak]::before { content: "Please wait…" } 
</style>

Answer 2

切换到.net核心或任何其他服务器端技术将无济于事。

问题是因为html是由浏览器下载并在所有脚本资源从Vue组件下载/解析/运行并渲染html之前呈现的。

在处理混合渲染（部分是服务器端，部分是客户端）时，最好的选择是默认情况下隐藏模板，并在设置和准备好vue组件后“显示”模板。

例如，在服务器侧视图中，使用属性，样式或类隐藏getTree。

<div id="app">

然后在vue组件mounted中将方法设置为true。这只是在组件准备好之前将其隐藏的许多方法之一。

Vue + Asp.net渲染问题

2 个答案: