Alpine.js 한방정리

<div
    x-data="{msg: 1, yn: true}"
    x-init="console.log('초기화중입니다'); a=2"
    x-on:click="console.log('메인클릭')"
    x-effect="console.log(msg+'값이바뀜')"
>
    <div x-ref="spn">
        <span x-text="msg"></span>
        <span x-ignore x-text="msg"></span>
        <button x-on:click.stop="msg=3; yn=true;">in btn</button>
        <button x-on:click.outside="yn=false">out btn</button>
        <div class="test1" x-bind:class="yn ? 'test2' : ''">div class 변화</div>
        <input type="text" x-bind:placeholder="yn ? 'Y' : 'N'" x-model.number="msg"/>
        <span x-show="msg===3" x-transition.duration.2500ms>show</span>

        <ul x-data="{colors:[
                { id : 1, label : 'RED'},
                { id : 2, label : 'BLUE'},
                { id : 3, label : 'ORANGE'},
            ]}" >
            <template x-for="color in colors" >
                <div x-id="['id']">
                <li x-text="color.label" :id="$id('id')"></li>
                </div>
            </template>
        </ul>

        <button x-on:click="$el.innerHTML = 'ggg'">kkk</button>
        <div x-data @aaa.window="console.log('tttt')">
            <button @click.stop="$dispatch('aaa')">clk</button>
        </div>

        <div x-data data-msg="hihi">
            <button @click.stop="console.log($root.dataset.msg)">hihi</button>
        </div>
    </div>

    <button @click="$refs.spn.remove()">hideonbush</button>
    <input x-mask="999]999,999.99">

</div>