AlpineJS作者:不上班,一年10w刀
SegmentFault
共 2866字,需浏览 6分钟
· 2021-12-01
作者:卡颂
简介:《React技术揭秘》作者
来源:SegmentFault 思否社区
![](https://filescdn.proginn.com/870d74cb9937a4e4ada0362955a9e5a4/cd488bf67d02422b406b247c975f8132.webp)
不想上班了,想做喜欢的事
![](https://filescdn.proginn.com/f1e75ad440a9dddc9975ce1e3e5326e0/43604dcaeb32e8efcd6abd3fa0b8d13a.webp)
![](https://filescdn.proginn.com/dbe513d277c303777d656fadb6d542b2/6dd9a025970b2227a1fd23352754e7d6.webp)
![](https://filescdn.proginn.com/568e21d46d50aff076a5662d74bc9202/939b9676750e59b31dcb94ecbaa53154.webp)
use Livewire\Component;
class SearchUsers extends Component
{
public $search = '';
public function render()
{
return view('livewire.search-users', [
'users' => User::where('username', $this->search)->get(),
]);
}
}
<div>
<input wire:model="search" type="text" placeholder="Search users..."/>
<ul>
@foreach($users as $user)
<li>{{ $user->username }}</li>
@endforeach
</ul>
</div>
<body>
...
@livewire('search-users')
...
</body>
前端首屏渲染时,渲染对应DOM结构(SEO友好)
交互发生,Livewire前端脚本发出请求
后端请求数据后渲染新的HTML字符串并返回前端
根据返回的HTML,前端增量更新视图
与Vue的渊源
![](https://filescdn.proginn.com/e3cf2797bc098effd439c8636994b857/936c043ef8f5ff98e865643901aea085.webp)
喜欢的事能赚钱么
![](https://filescdn.proginn.com/e078185675782d0cfa9684c4ae075353/329f3c1155901b566fa4cd5dce92baff.webp)
![](https://filescdn.proginn.com/316a359b2ec5e08ddbd856bcd6b8076b/18019b2c2b2233ff38387b946952b979.webp)
Github Sponsors
最低档 —— 14刀/月,面向个人开发者
最高档 —— 999刀/月,面向重度依赖Livewire的企业,可以得到定制服务
![](https://filescdn.proginn.com/9a226901d828d611926b09c1ed148aa8/413641202134c25d9b5ca68ff4296025.webp)
![](https://filescdn.proginn.com/9f52becb3b47af1cf7bb9213f6b6f6f8/50707df9e74decbdba8b9e83c98f8cee.webp)
总结
![](https://filescdn.proginn.com/c179226bc8800397f95a8b199b0b73b5/1510a36086a91fc93ba1bc0dd762a658.webp)
![](https://filescdn.proginn.com/def8f084cf3c52f9efdefe7caadc16b1/29c4d2272277333f29f53cecdea52e27.webp)
评论