今天講三種基本的魔術屬性

$el

<div x-data>
    <button @click="$el.innerHTML = 'foo'">Replace me with "foo"</button>
</div>

$el 是一個魔術屬性，可以用來檢索根組件的 DOM 節點。

意思是點擊這個按鈕後，
@click="$el.innerHTML = 'foo'"事件觸發，
按鈕會消失只剩下html中的純文字'foo'。

$refs

<span x-ref="foo"></span>
<button x-on:click="$refs.foo.innerText = 'bar'"></button>

$refs 是一個很有用的魔術屬性，用於檢索組件內有標注 x-ref 的 DOM 元素。

點擊按鈕後觸發，
x-on:click="$refs.foo.innerText = 'bar'"，
這會將前面指定的x-ref="foo"中加入innerText字串'bar'，
因此butten也會保留持續存在。

$event

<input x-on:input="alert($event.target.value)">

$event 是一個魔術屬性，可以在事件監聽器中用它來檢索原生瀏覽器的 Event 物件。