你如何激活alpinejs？

Question

我正在尝试将 AlpineJS 添加到我正在处理的一个非常简单的 html 页面，并且正在执行包（从 cdn），但它似乎没有被正确激活。即使在 HTML 的这个小片段上，它也不起作用：

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
    </head>
    <body>
        <h1 x-show="false">hide me</h1> <!-- doesn't work-->
    </body>
    <script type="text/javascript">
        console.log($el); //undefined
    </script>
</html>

这也加载到可以观察到问题的代码笔中：https://codepen.io/dwarburt/pen/gOgZyeR

我确定我只是错过了一步，但它可能是什么？ AlpineJS 正在执行其初始化例程，您可以从调试器中得知。

Answer 1

要初始化 AlpineJs 组件，您需要父容器上的 x-data 属性：

<div x-data="{
    isShowing: false
}">
    <h1 x-show="isShowing">I am hidden</h1>
</div>

这包含一个对象，该对象具有您可以在组件实例中使用的属性和函数。

这里的回购文档绝对值得一读：https://github.com/alpinejs/alpine#use

你如何激活alpinejs？

How do you activate alpinejs?

javascript

alpine.js