Blazor和Vue对比学习（基础1.1）：组件结构
难度：★
简单说一说：
1、Vue和Blazor都遵循单文件结果，即HTML（视图模板）、CSS（样式）、JS/C#（代码逻辑）写在一个文件里，Vue的文件后缀为.vue，Blazor的文件后缀为.razor
2、三个部分的区别：
1）视图HTML部分，区别在于模板语法，主要是标签内容和标签属性的数据绑定。另外，Vue需要使用顶级标签，Blazor不需要，上来就可以直接撸HTML。
2）样式CSS部分，基本一样，可能高级功能有一些差异，这部分目前关注的比较少，估计Vue会更灵活一些，必竟早走很多路
3）逻辑JS/C#部分，这是两者最大的区别，首先是编程语言上，Vue用JS或TS，Blazor用C#，其次是在指令、数据绑定、路由、数据传递等方面的实现上有差异。但从根源上，其实两者的逻辑很相似。定义一个组件，本质上都是在定义一个类，使用组件就是类的实例化或称之为创建对象。只是Vue中的面向对象及继承，基于原型对象和原型链，函数更是一等公民，而C#的面向对象是我们一般理解的基于类的面向对象。
3、重点说一说逻辑部分（也是简单说一下）：
1）Vue：使用构建，有选项式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{{ sayHi }}
//代码逻辑-JavaScript，使用组合式API（Composition API），直接使用3.2的setup语法糖 //样式-CSS
//Blazor的组件结构 //视图模板-HTML//代码逻辑-C# @code{ privite string SayHi { get; set; } = "你好"; private void UpdateTitle() { Title = "Hello, Blazor!"; } } //样式部分-CSS@SayHi