时间戳

首页 > 解决方案 > Vue + Asp.net 渲染问题

asp.net-mvc - Vue + Asp.net 渲染问题

问题描述

我有一个新的 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 之前看到模板。

在此处输入图像描述

我知道为什么会发生这种情况，但我不知道任何解决方法。服务器端渲染会解决这个问题吗？SSR 可以在非 .net 核心项目中完成吗？

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

以下是我的文件

索引.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'
        };
    }
})

第一个组件.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>

标签： asp.net-mvcvue.js

解决方案

使用v-cloak属性。

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

框架完成挂载后，vue 会自动删除该属性。

该v-cloack属性不会显示或隐藏您的元素 - 它基本上是一个指示安装是否完成的标记。您编写一个 css 选择器v-cloack来隐藏元素或显示加载指示符。

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

推荐阅读