首页 > 其他分享 >Blazor笔记-Component Dom Manage

Blazor笔记-Component Dom Manage

时间:2024-03-07 15:33:48浏览次数:28  
标签:Virtualize Dom Component Manage component Blazor

更新记录

注意:非教程。纯笔记,日常查询用的。需要教程的小伙伴找几本书看看即可哈哈,有Vue基础的话非常快,概念都是通的。非工作需要不建议深入学习Blazor,深入Vue吧,用的多,哈哈。

完整目录地址:https://www.cnblogs.com/cqpanda/p/17596348.html

点击查看
2024年3月7日 发布。
2023年8月1日 迁移笔记到博客。

Component Dom Manage

Element Reference

<input @ref="textInput" />

@code {
 ElementReference textInput;

 //use
 textInput.FocusAsync();
}

HTML head

直接放在页面中即可

<HeadContent>
  <meta property="og:title" content="@BlogPost.Title" />
 <meta property="og:description" content="@(new string(BlogPost.Text.Take(100).ToArray()))" />
 <meta property="og:image" content= "@($"{_navman.BaseUri}/pathtoanimage.png")" />
 <meta property="og:url" content="@_navman.Uri" />
 <meta name="twitter:card" content="@(new string(BlogPost.Text.Take(100).ToArray()))" />
</HeadContent>

Virtualize component

Virtualize is a component in Blazor that will make sure that it only renders the components or rows that can fit the screen. If you have a large list of items, rendering all of them will have a big impact on memory.

The Virtualize component works just like a foreach loop.

<ul>
 @foreach (var p in posts)
 {
 <li><a href="/Post/@p.Id">@p.Title</a></li>
 }
</ul>

same as

<Virtualize Items="posts" Context="p">
 <li><a href="/Post/@p.Id">@p.Title</a></li>
</Virtualize>

标签:Virtualize,Dom,Component,Manage,component,Blazor
From: https://www.cnblogs.com/cqpanda/p/17596398.html

相关文章

  • Blazor笔记-Component Layout
    更新记录注意:非教程。纯笔记,日常查询用的。需要教程的小伙伴找几本书看看即可哈哈,有Vue基础的话非常快,概念都是通的。非工作需要不建议深入学习Blazor,深入Vue吧,用的多,哈哈。完整目录地址:https://www.cnblogs.com/cqpanda/p/17596348.html点击查看2024年3月7日发布。2023......
  • Blazor笔记-Component EventCallback
    更新记录注意:非教程。纯笔记,日常查询用的。需要教程的小伙伴找几本书看看即可哈哈,有Vue基础的话非常快,概念都是通的。非工作需要不建议深入学习Blazor,深入Vue吧,用的多,哈哈。完整目录地址:https://www.cnblogs.com/cqpanda/p/17596348.html点击查看2024年3月7日发布。2023......
  • Blazor笔记-Component RenderFragment / ChildContent
    更新记录注意:非教程。纯笔记,日常查询用的。需要教程的小伙伴找几本书看看即可哈哈,有Vue基础的话非常快,概念都是通的。非工作需要不建议深入学习Blazor,深入Vue吧,用的多,哈哈。完整目录地址:https://www.cnblogs.com/cqpanda/p/17596348.html点击查看2024年3月7日发布。2023......
  • Vue学习笔记36--VueComponent构造函数
    VueComponent构造函数<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>VueComponent&......
  • Reference management in Java and Rust, and, how faster Rust can be?
    Hi,thisisablogcomparingthereferenceinrustandjava.IreallylovejavaandIhavespendsometimelearningtheframeworklikespringandothers.AftertakingCOMP6991,Ihavegotthisthink:Howjavamanagethereferenceinmyprogram?WhycanI......
  • Blazor使用QuickGrid
    @usingMicrosoft.AspNetCore.Components.QuickGrid<PageTitle>PromotionGrid</PageTitle><h1>PromotionGridExample</h1><QuickGridItems="@people"><PropertyColumnProperty="@(p=>p.PersonId)"Sor......
  • Blazor下载文件
    法一:@usingSystem.IO@injectIJSRuntimeJS<PageTitle>FileDownload1</PageTitle><h1>FileDownloadExample1</h1><button@onclick="DownloadFileFromStream">DownloadFileFromStream</button>@code{pri......
  • Blazor绑定数字
    <h1>DecimalBindingExample</h1><p><label>Decimalvalue(&plusmn;0.000format):<input@bind="DecimalValue"/></label></p><p><code>decimalValue</code>:......
  • Blazor之onclick事件更新值
    <h1>EventHandlerExample1</h1><h2>@headingValue</h2><p><button@onclick="UpdateHeading">Updateheading</button></p><p><label><inputtype="checkb......
  • Blazor常用事件
    一、Input事件:<h1>BindEventExample</h1><p><label>InputValue:<input@bind="InputValue"@bind:event="oninput"/></label></p><p><code>InputValue</cod......