Blazor和Vue对比学习(基础1.1):组件结构
难度:★
简单说一说:
1、Vue和Blazor都遵循单文件结果,即HTML(视图模板)、CSS(样式)、JS/C#(代码逻辑)写在一个文件里,Vue的文件后缀为.vue,Blazor的文件后缀为.razor
2、三个部分的区别:
1)视图HTML部分,区别在于模板语法,主要是标签内容和标签属性的数据绑定。另外,Vue需要使用顶级标签<template>,Blazor不需要,上来就可以直接撸HTML。
2)样式CSS部分,基本一样,可能高级功能有一些差异,这部分目前关注的比较少,估计Vue会更灵活一些,必竟早走很多路
3)逻辑JS/C#部分,这是两者最大的区别,首先是编程语言上,Vue用JS或TS,Blazor用C#,其次是在指令、数据绑定、路由、数据传递等方面的实现上有差异。但从根源上,其实两者的逻辑很相似。定义一个组件,本质上都是在定义一个类,使用组件就是类的实例化或称之为创建对象。只是Vue中的面向对象及继承,基于原型对象和原型链,函数更是一等公民,而C#的面向对象是我们一般理解的基于类的面向对象。
3、重点说一说逻辑部分(也是简单说一下):
1)Vue:使用<script></script>构建,有选项式API和组合式API两种,继承了JS的自由(变量+函数),其中组合式API更有行云流水的感觉,也是官方更推荐的方式,所以之后学习都以组合式为主。3.0刚推出的时候,没有setup语法糖,那个时候虽然性能提升很大,但和Vue2相比,使用上反而给人感觉有些繁索退步,但3.2版本推出setup语法糖后,有了一个飞跃式的进步,写起代码,有爽的感觉了。
2)Blazor:使用@code{}构建,本质上就是一个类,所以里面的字段、属性、方法、事件等,包括高级点的依赖注入等,和C#用起来是一样一样的,即爽,又有规范的安全感。最重要的是,.NET的API都可以使用。当然,Vue也要大把API可以使用,包括JS和Vue本身的。
4、补充说一下代码隔离:
1)Blazor的HTML、CSS和C#三部分都可以实现隔离,如一个Blazor的组件名称为SayHello.razor,C#隔离出来有两个方法,首先都是新建一个SayHello.razor.cs的文件,方法一是使用部分类,方法二是让组件继承这个新类,方法一简单点。CSS隔离的话,超简单,同文件夹下新建一个css文件,命名为SayHello.razor.css即可。
2)Vue还不清楚怎么隔离,但学习Vue的小程序倒是天生隔离成三个文件
3)话说回来,既然都单文件了,为啥还要去隔离。用IDE直接隔离编辑不就可以了吗?VSCode都已经实现这个功能了。
//Vue的组件结构
//视图模板-HTML <template> <h1>{{ sayHi }}</h1> </template> //代码逻辑-JavaScript,使用组合式API(Composition API),直接使用3.2的setup语法糖 <script setup> import { ref } from 'vue' const sayHi = ref('你好!') </script> //样式-CSS <style scoped> h1 { font-weight: bold; } </style>
//Blazor的组件结构 //视图模板-HTML <div> <h1>@SayHi</h1> </div> //代码逻辑-C# @code{ privite string SayHi { get; set; } = "你好"; private void UpdateTitle() { Title = "Hello, Blazor!"; } } //样式部分-CSS <style scoped> h1 { font-weight: bold; }
主要参考文献:
1、Vue.js官方文档:https://vuejs.org/guide/introduction.html
2、Blazor官方文档:https://docs.microsoft.com/zh-CN/aspnet/core/blazor/?view=aspnetcore-6.0
3、Blazor的非官方学习文档:https://blazor-university.com
4、Blazor的ezzylearning学习文档:https://www.ezzylearning.net/tutorials/blazor
5、4的中文译文:https://www.cnblogs.com/ittranslator/tag/Blazor/
- Blazor和Vue对比学习(基础1.3):属性和父传子
- 【Vue】零基础学习Vue: 第24课 Vue子组件触发父主件方法并传递参数:子组件$emit发射事件
- vue学习笔记1:vue基础知识(组件之前)
- 【Vue】零基础学习Vue: 第25课 Vue子组件slot插槽让子组件自定义样式:
- Vue.js 2.0学习教程之从基础到组件详解
- 【Vue】零基础学习Vue: 第20课 Vue定义子组件template的常见3种写法:
- 前端vue基础学习之vue项目文件结构
- Vue学习1-1.基础语法;2.指令:表单输入绑定,文本渲染;3.组件:定义组件,使用组件
- 【Vue】零基础学习Vue: 第21课 Vue父子组件生命周期函数的执行顺序:
- 前端学习----vue及其.vue文件的一些知识点及使用递归组件完成树形结构
- 【学习笔记】vue.js基础---组件
- vue基础学习第三天----组件
- VUE复习深入学习07.组件的基础使用方法
- vue学习02 vue-cli 模板创建后的基本结构 及内容组件 指令
- 【Vue】零基础学习Vue: 第23课 Vue 单向数据流父组件的属性值子组件如何更改:
- vue基础入门教程(三)- 组件之间的通信
- 自学Vue必看组件基础知识总结
- Vue深度学习(6)- 组件
- 学习笔记(03):人工智能基础—Numpy科学计算库-改变数组结构
- vue组件学习6(props传参)