随笔分类 -  MAUI/Blazor/Vue/Uniapp

前端开发框架
摘要:本章节内容较多,目录如下: 基本概念 数据绑定的五种实现方式 绑定路径Path 绑定模式BindingMode 绑定数据源的字符串格式化StringFormat 绑定源设置为自身或上级RelativeSource 绑定源不存在链接属性的回退值或链接属性值为Null时的替换值 编译绑定 一、基本概念 阅读全文
posted @ 2022-11-26 23:24 functionMC 阅读(2627) 评论(0) 推荐(0) 编辑
摘要:PS1:点击查看Blazor中C#和JS互操作 PS2:Vue中,可以直接使用LocalStorage和IndexedDB对象,本章节案例主要以Blazor的使用为主 一、Storage对象 1、浏览器内置的键值对存储。locallStorage理论上永久保存在浏览器中(除非主动清除),而Sessi 阅读全文
posted @ 2022-11-24 18:24 functionMC 阅读(768) 评论(0) 推荐(0) 编辑
摘要:一、什么是Markup语法 XAML可以使用等效的C#后台代码,即可以用C#写UI。但是,C#代码还稍显繁琐,所以在C#代码基础上,由CommutityToolkit提供了Markup扩展包,可以使用更加流畅的C#语法来写UI。通过如下案例来对比一下三者差异: <!--XAML--> <Conten 阅读全文
posted @ 2022-11-23 18:13 functionMC 阅读(733) 评论(1) 推荐(0) 编辑
摘要:MAUI支持跨平台和多设备,可以针对不同平台(Android、iOS、WinUI、MacCatalyst、Tizen),或不同设备(Phone、Tablet、Desktop、TV、Watch),定制不同的UI,应用根据运行环境,自动适应。主要通过OnPlatform和OnIdiom两个标记扩展实现。 阅读全文
posted @ 2022-11-22 09:48 functionMC 阅读(652) 评论(0) 推荐(0) 编辑
摘要:一、样式的定义和使用 Style类似于前端的CSS,可以对视觉元素的样式进行有组织的管理,大量减少代码和重复工作量。Style需要结合资源字典使用,将Style定义在资源字典中,元素通过StaticResource或DynamicResource引用样式资源。 二、引用样式资源的匹配原则 1、元素使 阅读全文
posted @ 2022-11-22 00:00 functionMC 阅读(1346) 评论(0) 推荐(1) 编辑
摘要:每个派生自VisualElement或Application的对象,都有一个Resources属性,属性值为Dictionary<string,object>类型的集合对象,这些集合对象可作为资源,提供给元素及其在控件树中的子元素使用。当元素引用资源时,根据键名延着控件树往上匹配。如果控件树中,有多 阅读全文
posted @ 2022-11-21 01:34 functionMC 阅读(583) 评论(0) 推荐(0) 编辑
摘要:x命名空间,又叫XAML命名空间,作用于XAML的编译过程。我们知道,XAML代码,最终通过XAML编译器,编译为中间代码IL,并与后台C#代码的编译结果合并。而在编译的过程中,经常需要告诉编译器一些重要信息,比如应该与哪个C#类的编译结果合并、XAML声明的元素是public还是private、元 阅读全文
posted @ 2022-11-19 22:51 functionMC 阅读(888) 评论(0) 推荐(0) 编辑
摘要:标记扩展,本质上是IMarkupExtension或者IMarkupExtension<T>接口的实现类。这两个接口,均定义了ProvideValue方法。注意,IMarkupExtension<T>继承自IMarkupExtension,如果定义的标记扩展类,需要实现IMarkupExtensio 阅读全文
posted @ 2022-11-16 21:42 functionMC 阅读(529) 评论(0) 推荐(0) 编辑
摘要:标记扩展,使属性值可以引用其他源的值或对象,比如引用资源字典、引用其它控件的属性值、绑定ViewModel类属性等。标记扩展的语法有大括号{}和尖括号<>两种方式,但x:Array比较特殊,只能使用尖括号。下个章节,深入学习标记扩展后,将能够理解两者区别。为方便学习和记忆,将标记扩展归纳为以下几类: 阅读全文
posted @ 2022-11-15 12:42 functionMC 阅读(1007) 评论(0) 推荐(2) 编辑
摘要:一、XAML(MAUI的XAML)和HTML 两者相似,都是标签语言组成的树形文档。每个标签元素,可视为一个对象,通过标签属性(Attribute),为对象的属性(Property)、事件等成员赋值。此处特别将Attribute和Proterty提出来,两者中文都叫属性,但Attribute对应于U 阅读全文
posted @ 2022-11-12 09:48 functionMC 阅读(1298) 评论(2) 推荐(4) 编辑
摘要:MAUI是微软.NET技术栈的跨端UI框架,2022年11月,和.NET7一起正式发布,未来能否和flutter一战? MAUI使用XAML标记语言进行开发,相对HTML而言,更加复杂和繁琐,但功能更加全面严谨。MAUI内部,通过Handler机制(面向接口编程),将MAUI的控件映射到各平台的Na 阅读全文
posted @ 2022-11-12 09:48 functionMC 阅读(2013) 评论(5) 推荐(7) 编辑
摘要:C#和JS互操作的基本语法是比较简单的,但小知识点特别多,同时,受应用加载顺序、组件生命周期以及参数类型的影响,会有比较多坑,需要耐心的学习。在C#中调用JS的场景会比较多,特别是在WASM模式下,由于WebAssembly的限制,很多时候,还是需要借助JS去控制DOM或BOM,比如WebStora 阅读全文
posted @ 2022-08-14 14:22 functionMC 阅读(4068) 评论(23) 推荐(18) 编辑
摘要:注:本节涉及到前后端,这个系列的对比学习,还是专注在前端Vue和Blazor技术,所以就不撸码了,下面主要学习概念。 我们知道,Http是无状态协议,客户端请求服务端,认证一次后,如果再次请求,又要重新认证,因为对服务端来说,客户端的每次请求都是无差别的!另外,服务端的授权体系,一般使用基于RBAC 阅读全文
posted @ 2022-08-05 15:27 functionMC 阅读(971) 评论(0) 推荐(3) 编辑
摘要:前端持久化保存数据的方式,主要包括Cookie,Session,jwt,LocalStorage,SessionStorage,IndexedDB/WebSQL,SQLite(APP端)。我们首先简单的理清一下它们的概念和区别: Cookie、Session、jwt:这三者紧密相连,是客户端和服务端 阅读全文
posted @ 2022-08-05 11:29 functionMC 阅读(326) 评论(0) 推荐(1) 编辑
摘要:Blazor没有提供状态共享的方案,虽然依赖注入可以实现一个全局对象,这个对象可以拥有状态、计算属性、方法等特征,但并不具备响应式。比如,组件A和组件B,都注入了这个全局对象,并引用了全局对象上的数据。我们通过组件A,修改全局对象的数据,全局对象上的数据更新,但引用了这个数据的组件B,并不会自动更新 阅读全文
posted @ 2022-08-03 21:22 functionMC 阅读(2114) 评论(1) 推荐(5) 编辑
摘要:前面章节,我们学过了父传子、子传父、祖传孙等,这些方法都是在组件树中进行数据的传递和管理,如果要在兄弟之间,或者远亲关系的组件之间进行数据的传递,利用之前的知识点,会是一件相当棘手的事情。 这个时候,如果我们跳出组件树,独立于组件树之外,创建一个用来存储数据的对象(称它为存储库),组件树中的所有组件 阅读全文
posted @ 2022-08-01 15:18 functionMC 阅读(401) 评论(0) 推荐(0) 编辑
摘要:状态是什么?首次接触这个概念时,很多人会懵,数据是状态吗? 状态,应该从面向对象的角度来理解。比如我们在介绍一个具体的人时,会说“他叫小明,今年18岁”,“他”是一个具体的对象,有“姓名”和“年龄”两个属性,而“姓名=小明,年龄=18”,就是“他”这个对象的状态。你说,状态就是数据,也不能说你错,但 阅读全文
posted @ 2022-06-23 17:48 functionMC 阅读(349) 评论(0) 推荐(1) 编辑
摘要:一、Vue的组件生命周期,理解和使用都比较简单,只说知识点 1、Vue的组件生命周期,总共四个过程: 组件初始化(beforeCreate/created),逻辑层数据处理 组件挂载(beforeMount/Mounted),首次渲染到视图,形成虚拟DOM 组件数据更新(beforeUpdate/u 阅读全文
posted @ 2022-06-14 22:39 functionMC 阅读(466) 评论(0) 推荐(0) 编辑
摘要:现代前端框架的核心,是数据驱动,绝大多数时候,我们不需要直接去操作DOM,而是通过改变数据,由框架自动完成DOM的渲染。但框架还是给我们留了后门,使我们可以拿到组件的引用。Vue使用ref属性,Blazor则使用@ref指令。 1、我们先看一个Vue的简单例子,使用很简单: //父组件 <templ 阅读全文
posted @ 2022-05-23 01:24 functionMC 阅读(832) 评论(0) 推荐(0) 编辑
摘要:一、基本理解:首次接触“生命周期”这个名词,是比较晦涩的,Vue中有生命周期钩子,而Blazor则是虚方法重写,容易蒙。所以,我尝试从初学者的角度来阐述一下。 我们在基础部分已经知道,组件有两部分组成,一是逻辑层,有数据和方法(方法本质上也是数据);二是视图层,虽然有自定义组件,但拆到底,还是HTM 阅读全文
posted @ 2022-05-21 20:47 functionMC 阅读(1113) 评论(0) 推荐(3) 编辑

点击右上角即可分享
微信分享提示