<...">
Get best of the week

Alpine.js-继续约会

这是有关有前途的Alpine.js框架的第二篇文章。
第一个可以在这里阅读：
Alpine.js-具有便捷语法的轻量级框架


我们将继续使社区熟悉这一出色的工具。
完整的课程代码在这里。


X-SHOW和X-CLOAK


<div x-data="{ show: false }">
  <button x-on:click="show= ! show" x-text="show ? '' : '' ">
  </button>
  <p x-show="show" x-cloak>!</p>
</div>

在上面的示例中，我们将立即分析两个新指令。X-show尽管与x-if用法相似，但不应混淆。X-show不会更改页面树，而仅控制元素的显示属性。也就是说，该项目将被渲染，但未显示。


X-cloak是在脚本启动后立即删除的指令。看来，这有什么好处？考虑实际应用。当我们运行上面的代码时，尽管x-show指令中的值为false，但有一会儿我们看到一个带有文本“ Hello！”的元素。在这里x斗篷为我们提供了帮助，您只需要给他写以下样式：


[x-cloak] { 
  display: none;
}

现在，该元素将被隐藏，直到脚本启动。


元素的突然出现和消失不是很明显，因此.transition修饰符用于为这些事件设置动画。


X-SHOW.TRANSITION


我们将借助修饰符来改进先前的代码：


<div x-data="{ show: false }">
  <button x-on:click="show= ! show" x-text="show ? '': '' ">
  </button>
  <p x-show="show"> NO TRANSITION</p>
  <p x-show.transition="show">TRANSITION</p>
  <p x-show.transition.in.duration.1000ms="show">TRANSITION IN</p>
  <p x-show.transition.out.duration.1000ms="show">TRANSITION OUT</p>
  <p x-show.transition.scale.05.duration.1000ms="show">TRANSITION Scale</p>
  <p x-show.transition.opacity.in.duration.1000ms="show">TRANSITION Opacity</p>
  <p x-show.transition.in.duration.1000ms.out.duration.500ms="show">TRANSITION IN Duration</p>
</div>

1 .in.duration.1000ms


transition ( ) opacity scale ( scale: 0.95), cubic-bezier(0.4, 0.0, 0.2, 1), 150 75 . , .

:


  • .in ;
  • .out — ;
  • .scale — ;
  • .opacity — ;
  • .duration .

x-if x-transition. x-show. . .


X-INIT


X-init — , , . created Vue.js. x-data. :



<div
  x-data="{ posts: [] }"
  x-init="
    fetch('https://jsonplaceholder.typicode.com/albums/1/photos')
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        posts = data
      });
    "
>
  <template x-for="post in posts" :key="post.id">
    <div class="post">
      <h1 x-text="post.title"></h1>
      <img :src="post.thumbnailUrl" :alt="post.title" />
    </div>
  </template>
  <hr/>
</div>

x-data posts, . x-init fetch json- . x-for «» .


X-REF $REFS


此伪指令提供对页面任何部分（包括组件外部）中所需元素的访问。所有链接都可以通过全局$ refs字段获得。让我们通过一个示例来演示此功能：


<div x-data="{ }">
  <input type="text" x-ref="myInput"/>
  <button x-on:click="alert($refs.myInput.value)">Alert</button>
<hr />
</div>

使用x-ref =“ myInput”属性在输入中输入的文本将在$ refs.myInput.value中可用


今天的课程到此结束。这节课的所有例子都在这里。
所有成功的项目，很快见！

More articles:


All Articles