Vue2 和Vue3-CSDN博客

本文链接：https://blog.csdn.net/weixin_42330208/article/details/134952752

使用 Vue 2:
引入 Vue.js 的 CDN

<!-- 在头部引入 Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

在页面中使用 Vue：

<div id="app">
  {{ message }}
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue 2!'
    }
  });
</script>

使用 Vue 3:
引入 Vue.js 3 的 CDN：

<!-- 在头部引入 Vue.js 3 -->
<script src="https://cdn.jsdelivr.net/npm/vue@next"></script>

在页面中使用 Vue：

<div id="app">
  {{ message }}
</div>

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: 'Hello Vue 3!'
      };
    }
  });

  app.mount('#app');
</script>

在这两个例子中，{{ message }} 是 Vue 的模板语法，用于显示组件中的数据。你可以根据自己的需求进一步扩展和组织 Vue 组件。

确保在引入 Vue 之前，你已经引入了必要的 Vue 依赖（例如，Vue 3 的 Composition API 需要引入 vue@next）。你还可以考虑使用包管理工具如 npm 或 yarn 来安装和管理 Vue。

在实际项目中，你可能会使用更复杂的组件和工程化的方式组织你的前端代码，这时你可以考虑使用 Vue CLI 或其他类似的工具。

在C# Razor 页面中，Vue.js 实例的创建和挂载并没有直接出现在 HTML 中。这可能是因为 Vue.js 的实例创建和挂载可能发生在其他 JavaScript 文件中，而不是直接在 HTML 文件中

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>发起流程</title>
    @{
        await Html.RenderPartialAsync("/Views/Shared/_CommonJsCssV3.cshtml");
    }   
    <script src="/VueBLComponent/launch-layout3.js?V11"></script>    
    <style>
        html {
            background-color: #f2f2f2;
        }

        .el-card {
            margin-top: 20px;
        }

        .el-card__body {
            padding-bottom: 0;
        }
    </style>
    @RenderSection("Head", false)
</head>
<body>
    <div id="app" v-cloak>
        <launch-layout ref="launchLayout" v-on:launch-process="submitData">           
                <!-- 表单-->
                @RenderBody()
           
        </launch-layout>
    </div>   
    @RenderSection("FootScript", false)
</body>
</html>

这里的@RenderSection(“FootScript”）在其他页面

@section FootScript
{
    <script>
  var app = new Vue({
     el: '#app',
     data: {
     }
     })
    <script>
  }

在这里放vue2 或者vue3 的create~~