कई डेवलपर्स को Vue.js के निर्देशों के लेकोनिक सिंटैक्स और पावर से इतना प्यार है कि वे इस फ्रेमवर्क का उपयोग न केवल सिंगल-पेज एप्लिकेशन में करने की कोशिश करते हैं। प्रतिक्रियाशीलता के उपयोग को छोड़ना मुश्किल है, केवल इसलिए कि एक छोटी परियोजना लिखना अचानक आवश्यक हो गया। अच्छे पुराने jQuery या शुद्ध JS पर न लौटें !?

मुझे कहना होगा कि Vue.js में (और कई अन्य चौखटे में) इसके उपयोग के लिए ऐसा विकल्प प्रदान किया गया है। लेकिन फिर भी इस तरह के एक सरल ऑपरेशन के लिए बहुत बोझिल लगता है, और कार्यक्षमता बेमानी है। और यहाँ अल्पाइन.जेएस बचाव के लिए आता है ।

आइए इस ढांचे की कुछ विशेषताओं पर ध्यान दें:

1. उसका वज़न बहुत कम है! 7.2kB संकुचित रूप में।
2. परिचित और सरल निर्देश आधारित सिंटैक्स।
3. वर्चुअल डोम का उपयोग नहीं करता है
4. सीडीएन के माध्यम से कनेक्शन संभव हैं (जैसा कि लेखकों द्वारा इरादा किया गया है, यह मुख्य उपयोग होना चाहिए) और एनपीएम के माध्यम से।

इस ढांचे का उपयोग करने के सबसे सरल उदाहरण पर विचार करें:

मूल उदाहरण

    <div x-data="{ msg: 'Hello, Habr!' }">
        <input type="text" x-model="msg" />
        <p x-text="msg"></p>
    </div>

Playcode.io पर सभी लेख कोड देखें

, , x-data. , JSON- . . Dom-, .

x-data="{}"

, , , .

अब हम संदेश प्रतिक्रियाशील चर का उपयोग करने के लिए स्वतंत्र हैं, जैसा कि हम कृपया। उदाहरण के लिए, हम एक्स-मॉडल निर्देश का उपयोग करके एक चर के मूल्य को एक पाठ <इनपुट /> के साथ जोड़ते हैं। अनुभवी डेवलपर्स ने पहले से ही इसे V..s. से जुड़वां वी-मॉडल में मान्यता दी है। एक बहुत ही उपयोगी सादृश्य, क्योंकि दोनों का उपयोग करना बिल्कुल समान है! संदेश को वैरिएबल के साथ लटकाकर, हम स्वचालित रूप से स्ट्रिंग प्राप्त करते हैं 'हैलो, हैबर!' इनपुट क्षेत्र में। अब हम इसका मान बदल सकते हैं, और अगली पंक्ति में परिणाम देख सकते हैं।

यहाँ हम कई लोगों को निराश करने के लिए मजबूर हैं, जो Vue.js सिंटैक्स के आदी हैं और घुंघराले ब्रेसिज़ का उपयोग करके टैग के लिए चर मानों का सरल स्थानांतरण, उदाहरण के लिए,

<p>{{ msg }}</p>

विशेष x-text विशेषता का उपयोग करके पास करना होगा। एक्स-एचटीएमएल विशेषता पूरे मार्कअप ब्लॉक के हस्तांतरण के लिए प्रदान की जाती है।

घटना सदस्यता

    <div x-data="{ counter: 1 }">
      <h1 x-text="counter"></h1>
      <button x-on:click="counter++">+1</button>
    </div>

x-on. Alpine.js , js-, . , , x-on — @. :

<button @click="counter++">+1</button>

x-if:

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

x-if, Vue.js. Boolean . . .

<div x-data="{ items: ['habr', 'hubr', 'hobr'] }">
   <ol>
     <template x-for="item in items" x-bind:key="item">
       <li>
         <p x-text="item"></p>
       </li>
     </template>
  </ol>
</div>

x-for , . , , item. , , item , Alpine . ( ) key. key x-bind. x-for x-if , .

. github.

Alpine.js.

हमें उम्मीद है कि आपको यह पसंद आया होगा।

सफल प्रोजेक्ट और जल्द ही मिलते हैं!

खैर, शुरुआत के लिए, अच्छाई की एक सूची जिसे अल्पाइन के निर्माता अगले संस्करण में जोड़ने का वादा करते हैं:

• कस्टम निर्देश
• अवयव
• शैली विशेषता समर्थन
• और भी बहुत कुछ...