<div style="font-weight:bold;">入力</div>
読み: タグ・ディビジョン⋏アットリビュート スタイル ワ "フォント・ウエイト:ボールド"/文字「入力」

<input type="text">
読み: タグ・インプット⋏アットリビュート: タイプ ワ "テキスト"

<button @click="sent=もじ":disabled="もじ.trim()===' ' ">送信</button>
読み: タグ・ボタン⋏イベント・ディレクティブ アット・クリック ワ "セント ワ もじ" 
バインディング・ディレクティブ :コロン-ディスエイブルド ワ " もじ ヲ トリム(化) に繋ぎ, ワワワクォクォ " / 文字「送信」

<button @click="もじ=' ' ; sent=' ' " style="margin-left:8px">クリア</button>
読み: タグ・ボタン⋏イベント・ディレクティブ アット・クリック ワ "もじ ワ クォクォ;
と, アサインメント・エキスプレッション セント ワ クォクォ"
アットリビュート: スタイル ワ "マージン-レフト:8px" / 文字「クリア」

<div class="オープン"x-text="sent"></div>
読み: タグ・ディビジョン⋏アットリビュート クラス ワ "オープン"
テキスト・バインディング・ディレクティブ エックス-テキスト ワ セント
<p>　</p><hr><br>
<pre>
&lt;button　　 ← これはHTMLのタグ
@click="sent=もじ"　　← これは Alpine.js の「イベント・ディレクティブ(event directive)命令の宣言」

:disabled="条件"　　← これは Alpine.js の「バインディング・ディレクティブ(binding directive / x-bind)命令の宣言」

sent=' ' "　　← これは Alpine.js の assignment expression

x-text=" "　　← これは Alpine.js の テキスト・バインディング・ディレクティブ(text binding directive)

style="margin-left:8px"　　← これは HTML Attribute

&gt;
送信　　　 ← これはHTMLのテキスト(文字列)
&lt;/button&gt;　　　 ← これはHTMLの閉じタグ

Alpine.js は hyper-JS と考えてください.
getElementById や textContent などは内部で処理されるので, 直接記述しません.
</pre>

</html>