全国客服热线15811213962

澳门太阳集团|首页官网

诚信为本 ● 品质如一

通过Blazor使用C开发SPA单页面应用程序(3)

发表时间:2019-09-09 18:17

  好了昨天Blazor的组件开辟就先辈修到这,成心犹未尽的能够查看官方文档深切进修。前往搜狐,查看更多

  咱们在看一个SPA中一个根基但很主要的功效路由。客户端路由能够通过利用@page指令粉饰组件来在Blazor中完成。

  此处 @currentCount 值按照点击按钮的数量递增Click me。p标识表记标帜元素中的值会主动刷新,无需任何组件刷新。

  组件中的函数部门蕴含用户操作函数(事务方式),局部变量和从/向父/子组件传送的属性。

  除了利用@bind语法处置onchange事务之外, 还能够通过利用event参数 (@bind-value:event) 指定@bind-value属性, 利用其他事务来绑定属性或字段。比方第四个文本框就是绑定changeString采用oninput事务的属性,以达到在文本框的值更改时引发。

  (3)OnAfterRenderAsync并OnAfterRender在组件完成衬着后挪用。此时填充元素和组件援用。利用此阶段利用出现的内容施行其他初始化步调,比方激活对出现的DOM元素进行操作的第三方Java库。

  在Blazor中能够实现双向绑定,与一些风行的JS言语框架比拟,Blazor为双向绑定供给了多种实现体例,Blazor能够文雅地进行编写。

  (2)OnParametersSetAsync和OnParametersSet当组件已领受到的参数从其父和值被分派给属性被挪用。这些方式在组件初始化后以及每次出现组件时施行。

  单向绑定在Blazor中简略间接,无需任何UI刷新。还记得Counter示例吗,他显示了单向数据绑定,

  Razor HTML语法是C#代码与HTML的连系。此部门最终在浏览器中出现。

  以上代码中,子组件 (ChildComponent) 拥有一个Now组件参数和NowChanged回调参数,父组件MyDemo利用ChildComponent并将ParentNow参数从父级绑定到子组件上Now的参数上,若是通过点击MyDemo中的更新以后时间按钮来更改属性的值,Now则将更新ChildComponent属性,将新值呈此刻 UI中。此中,参数Now是可绑定的, 由于它拥有NowChanged与参数类型婚配的陪伴事务。依照商定,其等效于

  (2)组件之间传送的数据通过组件属性及其属性映照产生,此方式利用委托ActionT类型。

  (2) @bind属性在Blazor中供给双向数据绑定,可是只供给了默认的绑定事务,若是们想在分歧的机会触发双向绑定该怎样办呢,别急同样很简略的,咱们看看下面的代码,展现了几种绑定实例,

  在某些环境下, 利用组件参数将数据从先人组件流式传输到从属组件是未便利的, 特别是在有多个组件层时。级联值和参数通过供给一种便利的方式, 使上级组件为其所有子代组件供给值。级联值和参数还供给了一种方式来和谐组件。

  (1) @bind属性在Blazor中供给双向数据绑定。下面的示例复选框演示在统一组件中的bind属性,

  (1)绑定可识别组件参数, @bind-{property}可在此中跨组件绑定属性值。

澳门太阳集团 澳门太阳集团 澳门太阳集团