यह होनहार अल्पाइन.जेएस ढांचे के बारे में दूसरा लेख है ।
यहां पहले एक को पढ़ा जा सकता है:
अल्पाइन.जेएस - सुविधाजनक सिंटैक्स के साथ एक हल्का ढांचा

हम इस अद्भुत उपकरण के साथ समुदाय को परिचित करना जारी रखते हैं।
पूर्ण पाठ कोड यहाँ है ।

एक्स-शो और एक्स-क्लोका

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

उपरोक्त उदाहरण में, हम एक ही बार में दो नए निर्देशों का विश्लेषण करेंगे। एक्स-शो, हालांकि एक्स-अगर के उपयोग के समान, भ्रमित नहीं होना चाहिए। एक्स-शो पृष्ठ ट्री को नहीं बदलता है, लेकिन केवल तत्व की प्रदर्शन संपत्ति को नियंत्रित करता है। यही है, आइटम प्रदान किया जाएगा, लेकिन दिखाया नहीं गया।

एक्स-क्लोक एक निर्देश है जिसे स्क्रिप्ट की दीक्षा के तुरंत बाद हटा दिया जाता है। ऐसा लगता है, क्या अच्छा है? व्यावहारिक अनुप्रयोग पर विचार करें। जब हम ऊपर कोड चलाते हैं, तो एक पल के लिए हमें एक्स-शो के निर्देश में गलत मान के बावजूद "हैलो!" पाठ के साथ एक तत्व दिखाई देता है। यहाँ एक्स-क्लोक हमारी सहायता के लिए आता है, आपको बस उसे निम्नलिखित शैली लिखने की आवश्यकता है:

[x-cloak] { 
  display: none;
}

अब स्क्रिप्ट के शुरू होने तक तत्व छिपा रहेगा।

किसी तत्व की अचानक उपस्थिति और गायब होना बहुत स्पष्ट नहीं है, इसलिए इन घटनाओं को चेतन करने के लिए .transition संशोधक का उपयोग किया जाता है।

एक्स-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>

एक्स-रे के साथ इनपुट में दर्ज पाठ = "myInput" विशेषता $ refs.myInput.value में उपलब्ध होगी

यह हमारे आज के पाठ का समापन करता है। पाठ के सभी उदाहरण यहाँ हैं ।
सभी सफल परियोजनाएं और जल्द ही आपको मिलते हैं!