<div x-data="initialData()" x-init="init()">
    <div :style="'width: '+width+'px; background: purple;'">hey</div>

    <button x-ref="inc">increase</button>
</div>

<script>
    function initialData() {
        return {
            width: 20,
            init() {
                this.$refs.inc.addEventListener('click', () => {
                    this.width = this.width + 20
                })
            }
        }
    }
</script>

今天要跟大家說明把js裡的東西如何丟進html以及互動，
這邊示範點擊後寬度會隨之增加。

首先x-data="initialData()"在這可以直接丟進function的名稱，
而這個function需要return值進去，就相當於直接在上面預設了!
x-init="init()"而這裡是初始會執行的function，
它包含在x-data指定的function之中。
<div :style="'width: '+width+'px; background: purple;'">hey</div>這行就是我們要增加寬度的東西，
後面設定背景色就不說明了，
:style="'width: '+width+'px這段就是會隨著js變動寬度的關鍵之一，
可以看到他的寬度是變數，
那麼這個變數值哪裡來呢?
首先在x-data中就先預設20，
接著看到<button x-ref="inc">increase</button>，
重點在於x-ref="inc"，
對應到js裡面的
init() { this.$refs.inc.addEventListener('click', () => { this.width = this.width + 20 }) }
在這前面的this.$refs.inc就會指向<button x-ref="inc">increase</button>，
後面addEventListener('click', () => {})就寫入了觸發事件，
那麼事件觸發時執行this.width = this.width + 20，
隨著這變動，上方:style="'width: '+width+'px就會隨著改變，
因此，每點擊一次按鈕，寬度都會比上次寬20了。