学院二级网站建设方案模板,西安房产信息网,做特殊原产地证的网站,网店推广的作用有哪些Vue——两分钟概述Vue 是一个JavaScript 框架。在其最简单的模式中#xff0c;您可以简单地将核心 Vue 脚本包含在您的应用程序中#xff0c;然后开始构建您的组件。除此之外#xff0c;对于更复杂的应用程序#xff0c;您可以使用 Vue 自己的 CLI 创建#xff08;并最终发…Vue——两分钟概述Vue 是一个JavaScript 框架。在其最简单的模式中您可以简单地将核心 Vue 脚本包含在您的应用程序中然后开始构建您的组件。除此之外对于更复杂的应用程序您可以使用 Vue 自己的 CLI 创建并最终发布一个 Vue 项目。与大多数其他 JavaScript 框架一样Vue 应用程序构建为一系列小组件然后您可以将它们组合在一起以构建更大的功能最终是整个应用程序。您通常会使用 HTML、CSS 和 JavaScript或 TypeScript来编写 Vue 应用程序。Blazor 如何比较Blazor 是一个框架它使您能够使用 C# 而不是 JavaScript构建在浏览器中运行的客户端 Web 应用程序。当你创建一个新的 Blazor 应用程序时它会附带一些NuGet包使一切正常运行所需的基本要素。在Blazor中您将使用 Razor 标记语言将您的应用程序构建为一系列组件并使用 C# 编写您的 UI 逻辑。要发布您的应用程序您可以使用 dotnet 的内置publish命令它将您的应用程序捆绑到多个文件HTML、CSS、JavaScript 和 DLL中然后可以将这些文件发布到任何可以提供静态文件的 Web 服务器。创建一个新的 Vue 应用程序使用 Vue 有两种主要方法。第一种您可以简单地引用脚本通过 CDN并开始将组件添加到现有应用程序中的任何 HTML 页面。!-- development version, includes helpful console warnings --
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script或者您可以安装 Vue CLInpm install -g vue/cli然后创建并启动一个新项目vue create hello-world
cd hello-world
npm run serve使用时vue create您将获得各种预设供您选择或者您可以从启用 TypeScript 支持、单元测试等选项中进行选择。创建新的 Blazor 应用程序对于 Blazor您可以使用 Visual Studio 或通过命令提示符启动新项目。dotnet new blazorwasm
cd blazorwasm
dotnet run您还有其他一些选项例如包含用于验证用户的基础结构的能力以及是否在 ASP.NET Web 应用程序中托管 Blazor 应用程序但上面的命令是最简单的入门选项。用 Vue 构建你的 UIVue 是关于模板的。这是一个例子div idapplabelWhats your name?input v-modelname placeholderYour name...//labelspanHello {{ name }}/span
/divscript srchttps://unpkg.com/vue/script
scriptvar app new Vue({el: #app,data: {name: }})
/script模板包含在我们的id为#app的div中。然后我们创建一个新的 Vue 应用程序并告诉它使用#app div 作为它的目标元素。v-model设置文本输入和name数据属性之间的绑定。因此name将始终反映用户在文本输入中输入的内容并且如果以name编程方式更改的值这将反映在文本输入中。我们使用{{ name }}语法来呈现 的当前值name因此当我们在文本输入中键入新值时我们可以看到它立即发生变化。这将使您启动并运行但实际上大多数应用程序将由几个组件组成它们组合在一起以形成更大的功能。要将这个问候语功能变成可重用的组件我们需要稍微不同的语法Vue.component(greeting, {data: function () {return {name: }},template: divlabelWhats your name?input v-modelname placeholderYour name...//labelspanHello {{ name }}/span/div
})Vue 组件和我们开始使用的应用程序之间存在一些细微差别我们已将标记移动到template属性中data在组件中表示为返回对象的函数通过这些更改我们现在可以在应用程序中的任何位置渲染这个组件。div idappgreeting/
/div总之一个 Vue 应用程序可以添加到现有的 HTML 页面包含一个 Vue 应用程序和可选的一个或多个组件使用 JavaScript 和 HTML 编写在浏览器中作为 JavaScript 运行使用 Blazor 构建 UIBlazor 还鼓励您将 UI 分解为许多较小的组件。与 Vue 不同您使用 Razor 和 C# 编写组件。labelWhats your name?/label
input typetext bind-valueName bind-value:eventoninput placeholderBob/
spanHello Name/spancode {public string Name { get; set; }
}我们有大致相同的标记但这次我们使用 Blazor 的bind语法将我们的输入绑定到一个名为Name.当用户输入他们的名字时Name属性将更新为他们输入的值。默认情况下Blazor 会更新Nameon blur 的值当我们单击文本输入时因此我们添加bind-value:eventoninput了使其在我们开始输入时立即更新属性。您现在可以在应用程序中的任意位置渲染此组件...h1A brief introduction to Blazor...
/h1Greeting /总之Blazor UI包含一个或多个组件使用 Razor 和 C# 编写获取您的标记和数据并将它们组合在一起传递数据——Vue我们已经看到了 Vue 处理数据的一种方式name直接存储在我们的问候组件中。var app new Vue({el: #app,data: {name: }
})另一个常见的选项是将数据传递给组件。假设我们想将标题传递给我们的问候组件greeting headlineWelcome, thanks for being here! /Vue 通过一种叫做props的东西来实现这一点。Vue.component(greeting, {data: function () {return {name: }},props: [headline],template: divh2{{ headline }}/h2labelWhats your name?input v-modelname placeholderYour name...//labelspanHello {{ name }}/span/div
})我们在组件中添加了一个 props 数组props: [headline],这使我们的组件接受一个headline值然后我们使用标准插值语法渲染该值h2{{ headline }}/h2。props 是解锁可重用组件的关键使得在许多不同的场景中使用相同的组件每次传递不同的值成为可能。虽然在许多场景中使用data并props运行良好但您可能会在应用程序中遇到更集中的状态需求。一种选择是选择一种您自己的数据“存储”从而您拥有一个中央“存储”对象然后在多个组件之间共享该对象。常用的功能是Vuex。Vuex提供了用于状态管理的 Flux 模式的 Vue 实现您可能听说过另一个称为 Redux 的 Flux 实现。至关重要的是与所有事情一样保持尽可能简单的解决方案来满足您的特定应用程序的需求是值得的但如果您需要更高级的选项很高兴知道它们在那里。传递数据 - Blazor从广义上讲Blazor 具有相同的两个用于管理状态的主要选项。您可以使用属性将数据存储在组件本身中如Name在我们的示例中或通过参数获取数据如Headline。h2Headline/h2
labelWhats your name?/label
input typetext bind-valueName bind-value:eventoninput placeholderBob/
spanHello Name/spancode { [Parameter]public string Headline { get; set; }public string Name { get; set; }
}与 Vue 示例一样当您渲染时Greeting您可以传入一个标题它将被相应地渲染。Greeting HeadlineWelcome, its still great to see you.../对于更高级的场景就像 Vue 一样您可以为 Blazor 应用程序推出自己的集中式数据存储或者通过 Fluxor 等项目查看将 Flux 模式与 Blazor 结合使用的新兴选项。Vue中的路由Vue 提供了一个单独的路由器您可以将其插入到您的应用程序中。您可以将其包含在您的 HTML 页面中script srchttps://unpkg.com/vue-router/dist/vue-router.js/script然后您可以在标记中呈现一个 router-view。router-view/router-view这是 Vue 在路由之间移动时渲染内容的地方。您可以在 JavaScript 中为您的应用配置路由。script const Home { template: divHome/div }const Contact { template: divContact Us/div }const routes [{ path: /home, component: Home },{ path: /contact, component: Contact }]const router new VueRouter({routes: routes})const app new Vue({router}).$mount(#app);
/script这里我们有两个组件Home和Contact。然后我们声明了两条指向这些组件的路由。接下来我们声明一个路由器并将我们的路由分配给它。最后我们使用路由器创建一个新的 Vue 应用程序。完成所有这些后您现在可以使用该#符号导航到这两个组件。your-site-here/index.html#/home/your-site-hereyour-site-here/index.html#/contact/your-site-here您通常需要在路由中传递更多数据。例如如果您要路由到产品的详细信息页面您会希望在路由中提供产品 ID...your-site-here/index.html#/product/1/your-site-here您可以配置路由以接受参数routes: [{ path: /product/:id, component: User }
]然后您可以使用 检索此 ID $route.params。h2Displaying product details for {{ $route.params.id }}
/h2通过更多的管道您还可以通过组件的 props 捕获这些路由参数避免$route.params在组件中的任何地方使用。Blazor 中的路由Blazor 包括“开箱即用”的路由。如果你想让一个组件“可路由”你可以简单地添加一个page指令......page /GreetMeh1Welcome!
/h1现在任何请求http://your-web-site-here/GreetMe都会渲染这个组件。您还可以通过路由传入数据并将其捕获到参数中如下所示page /GreetMe/{Name}h1Welcome Name!
/h1code {[Parameter]public string Name { get; set; }
}使用 Vue 从 API 获取数据您的 Web 应用程序可能需要在某个时候从 API 获取数据。Vue 不知道你如何处理这个问题让你可以自由地使用本地fetchAPI 或许多第三方库中的任何一个例如“Axios”。关键是知道何时进行调用为此 Vue 提供了一个mount生命周期钩子。script
new Vue({el: #app,data(){return {tickets: null;}},mounted(){axios.get(api/Tickets).then(response (this.tickets response)); }
})
/script现在当这个组件被挂载时将要求api/Tickets返回的数据将分配给tickets一旦我们有了数据我们就可以使用 Vue 的v-for指令循环它并为每个项目渲染标记。div idappdiv v-forticket in tickets{{ ticket.title }}/div
/div使用 Blazor 从 API 获取数据使用 Blazor您可以满足HttpClient所有数据获取需求在底层这取决于原生fetchAPI但您通常可以忽略它并使用抽象。这是一个例子using System.Net.Http
inject HttpClient Httpforeach(var ticket in _tickets){divticket.Title/div
}code {private Tickets[] _tickets;protected override async Task OnInitializedAsync(){_tickets await Http.GetFromJsonAsyncTicketSummary(api/Tickets);}
}OnInitializedAsync大致相当于 Vue 的mounted()生命周期钩子将在我们的组件首次加载时运行。请注意我们如何能够使用GetFromJsonAsync传入一个 Type 来自动将 HTTP 调用的结果反序列化为TicketSummary? 这就是 Blazor 与 JavaScript 框架相比具有显着优势的地方....共享模型——Blazor 的超能力由于您使用 C# 编写 Web 应用程序因此您可以在前端和后端 (API) 代码中使用相同的数据模型。例如假设您需要检索人员列表...该Person模型位于共享类库中。您的 Web API 和 Blazor 客户端项目都引用此共享库。现在您的 API 可以是强类型的使用Person模型返回和接受数据。数据仍被序列化并作为 JSON 数据“通过网络”发送但 Blazor 应用程序可以使用与Person最初用于序列化它的完全相同的模型来反序列化 JSON 数据。现在如果您对模型进行重大更改Person如果您引入了任何影响客户端或服务器使用模型的重大更改您将立即看到编译错误。优点和缺点现在我们已经看到它们都在行动你应该选择哪一个自然很难进行直接比较而你更喜欢哪一个很大程度上取决于你自己的背景、技能和偏好。话虽如此我们已经看到了许多相似之处但也看到了两者之间的一些关键差异。Vue与其他框架相比Vue 因其轻巧的风格而备受赞誉。您可以轻松地将 Vue 添加到现有应用程序中从而为逐步改进您的应用程序打开大门而无需重写整个应用程序。如果您决定围绕 Vue 构建整个应用程序那么 Vue CLI 就会发挥作用从而抽象出设置 JavaScript 构建环境的复杂性。Vue 优点具有久经考验的组件模型的完善框架Vue CLI 简化了 JS 构建过程与 Angular 等其他框架相比更轻的触摸库核心 Vue 库处理具有切向功能的基本要素如单独库中可用的路由可以增量添加以增强现有应用程序您可以自由插入您的应用程序可能需要的任何其他 JS 库一个可以依赖的大型现有 JS 库生态系统提供大量文档Vue 缺点Vue 在很大程度上对你的应用程序的结构没有意见如果你更喜欢更自以为是、规范的方法这只是一个缺点JavaScript如果你不喜欢它虽然 Vue CLI 抽象了一些细节但如果您决定围绕 Vue 构建整个应用程序您将与 JS 生态系统发生冲突这会带来其自身的复杂性构建工具、包管理器、针对不同浏览器的编译Vue 在简化构建 Web 应用程序的数据绑定方面做得很好但最终你仍然在编写 JavaScriptBlazorBlazor 的明显区别在于它使用 C# 而不是 JavaScript。如果您来自 C# 背景这将提供几个优势。您可以坚持使用您已经了解的生态系统NuGet、dotnet工具、Visual Studio 或 VS Code。在客户端和后端 API 之间共享模型的能力非常重要并且更难无意中破坏您的应用程序。Blazor 优点使用 C# 编写现代 Web 应用程序为您的表单提供内置验证支持能够通过 NuGet 包引入第三方代码您可以使用您已经知道的工具Visual Studio、VS 调试、Intellisense 等共享模型显着减少意外破坏客户端的机会您可以在浏览器使用 WebAssembly或服务器使用 Blazor Server上使用相同的组件模型即将支持在 Windows 和移动开发中使用相同的 Blazor 组件模型Blazor 缺点新框架需要时间来适应并获得采用没有明显的方法可以无缝地将 Blazor WASM 添加到现有应用程序中工具也很年轻将随着时间的推移而发展在撰写本文时与 Vue 相比互联网上可用的资源教程等更少首次加载时将大量 .NET 框架初始下载到浏览器是否依赖于浏览器中的 WebAssembly 支持尽管现在已广泛支持决定权在你Blazor 适合您的计划在很大程度上取决于您现有的经验以及您对 JavaScript 的看法。如果您对 JavaScript 和生态系统感到满意那么 Vue 是一个可靠的框架可以根据您的应用程序的需要轻松扩展或缩减。另一方面如果您已经了解并喜欢使用 C#并且通常发现 JavaScript语言和生态系统难以学习和使用那么 Blazor WASM 可能会改变游戏规则。那么您是否正在考虑使用 Blazor它是一个竞争者还是你的下一个项目还是你现在会坚持使用 Vue这取决于你
