Hello，大家好~歡迎再次回到JavaScript初學者成長日記！
今天要延續昨天的內容，再來說到一些常見的AlpineJS指令。話說，因為我的研究也還是有限，這些指令可能有其他功能就請大家自己去發現囉！

• x-bind：它的主要功能是動態綁定 HTML 屬性，也可以用:簡寫，舉個例子：
  
  在這例子中，若是isActive是false的話，則button就會加上disabled這個屬性。
• x-show：它是用來控制 HTML 元素的顯示和隱藏，主要是用布林函數去控制，舉個例子：
  
  在這個例子中，我們使用了x-on來控制isVisible的值是true還是false，接著用x-show來決定該div是否要顯示在畫面上。
• x-model：可以實現雙向數據綁定，它可以將表單元素的值與JavaScript 中的數據模型相互綁定，當用戶改變輸入時，數據模型會自動更新。舉個例子：
  
  在這例子中，我們使用了x-model來綁定input跟span的內文，當我在輸入框打字時，就會同步更新到span中。
• x-if：它在使用上跟x-show很像，但它是根據條件動態地添加或移除 HTML 元素。它會根據條件決定元素是否存在於 DOM 中，而不是僅僅改變其顯示狀態。在官方文件中建議，x-if要放在標籤內使用，不要直接放在真實元素上面，因為template 標籤是用來包裹條件渲染的內容，它本身不會被渲染到 DOM 中，舉個例子：
  
  在這使用x-on來控制isVisible的值是true還是false，並用x-if判斷，若是true則整個template範圍內的內容會顯示出來，若是false則會消失。
• x-for：它的功能就跟跑for迴圈很像，它可讓我們透過迭代列表來建立 DOM 元素，我自己在做時通常用在建立列表的時候，會搭配template使用，舉個例子：
  
  在這例子中，我們利用x-for將items陣列中的每個元素建立成一個一個的li。

那關於AlpineJS的部分就先介紹到這喔！明天就用AlpineJS來做一個BMI計算器。明天見！