Vue.js
अवयव

टिप्पणियों

कंपोनेंट स्कॉप्ड (वैश्विक नहीं)

डेमो

एचटीएमएल

<script type="x-template" id="form-template">
    <label>{{inputLabel}} :</label>
  <input type="text" v-model="name" />
</script>

<div id="app">
  <h2>{{appName}}</h2>
  <form-component title="This is a form" v-bind:name="userName"></form-component>
</div>

जे एस

// Describe the form component
// Note: props is an array of attribute your component can take in entry.
// Note: With props you can pass static data('title') or dynamic data('userName').
// Note: When modifying 'name' property, you won't modify the parent variable, it is only descendent.
// Note: On a component, 'data' has to be a function that returns the data.
var formComponent = {
  template: '#form-template',
  props: ['title', 'name'],
  data: function() {
    return {
      inputLabel: 'Name'
    }
  }
};

// This vue has a private component, it is only available on its scope.
// Note: It would work the same if the vue was a component.
// Note: You can build a tree of components, but you have to start the root with a 'new Vue()'.
var vue = new Vue({
  el: '#app',
  data: {
    appName: 'Component Demo',
    userName: 'John Doe'
  },
  components: {
    'form-component': formComponent
  }
});

घटक क्या हैं और घटकों को कैसे परिभाषित किया जाए?

Vue में घटक विगेट्स की तरह हैं। वे हमें वांछित व्यवहार के साथ पुन: प्रयोज्य कस्टम तत्वों को लिखने की अनुमति देते हैं।

वे कुछ भी नहीं हैं, लेकिन जिन वस्तुओं में रूट या कोई वीयूई इंस्टेंस शामिल हो सकते हैं उनमें से कोई भी / सभी विकल्प हो सकते हैं, जिसमें रेंडर करने के लिए एक HTML टेम्प्लेट भी शामिल है।

घटकों से मिलकर बनता है:

• HTML मार्कअप: घटक का टेम्पलेट
• सीएसएस शैलियों: HTML मार्कअप कैसे प्रदर्शित किया जाएगा
• जावास्क्रिप्ट कोड: डेटा और व्यवहार

ये प्रत्येक एक अलग फ़ाइल में या .vue एक्सटेंशन वाली एकल फ़ाइल के रूप में लिखे जा सकते हैं। नीचे दिए गए उदाहरण दोनों तरीके दिखा रहे हैं:

.VUE - घटक के लिए एक एकल फ़ाइल के रूप में

<style>  
    .hello-world-compoment{  
        color:#eeeeee;  
        background-color:#555555; 
    }  
</style>  

<template>
    <div class="hello-world-component">
        <p>{{message}}</p>
        <input @keyup.enter="changeName($event)"/>
    </div>
</template>

<script>
    export default{            
        props:[ /* to pass any data from the parent here... */ ],   
        events:{ /* event listeners go here */},
        ready(){
            this.name= "John";
        },
        data(){
           return{
              name:''
           }
        },
        computed:{
            message(){
                return "Hello from " + this.name;
            }
        },
        methods:{
            // this could be easily achieved by using v-model on the <input> field, but just to show a method doing it this way.
            changeName(e){
                this.name = e.target.value;
            }
        }  
    }
</script>  

फ़ाइलें अलग करें

हैलो- world.js - घटक ऑब्जेक्ट के लिए JS फ़ाइल

export default{
    template:require('./hello-world.template.html'),
    props:[ /* to pass any data from the parent here... */ ],  
    events:{ /* event listeners go here */ },
    ready(){
        this.name="John";
    },
    data(){
        return{
            name:''
        }
    },
    computed:{
        message(){
            return "Hello World! from " + this.name;
        }
    },
    methods:{
        changeName(e){
            let name = e.target.value;
            this.name = name;
        }
    }
}  

नमस्ते-world.template.html

<div class="hello-world-component">
    <p>{{message}}</p>
    <input class="form-control input-sm" @keyup.enter="changeName($event)">
</div>  

हैलो-world.css

 .hello-world-compoment{  
    color:#eeeeee;  
    background-color:#555555; 
}    

इन उदाहरणों में es2015 सिंटैक्स का उपयोग किया गया है, इसलिए पुराने ब्राउज़र के लिए esel को संकलन करने के लिए Babel की आवश्यकता होगी।
ब्राउज़र-व्युइज़ या वेबपैक + वाउ -लोडर के साथ बैबल को hello-world.vue संकलित करने की आवश्यकता होगी।

अब hello-world हमारे पास hello-world कंपोनेंट परिभाषित है, हमें इसे Vue के साथ रजिस्टर करना चाहिए।

इसे दो तरीकों से किया जा सकता है:

एक वैश्विक घटक के रूप में पंजीकृत करें
main.js फ़ाइल (ऐप में प्रवेश बिंदु) में हम Vue.component साथ विश्व स्तर पर किसी भी घटक को पंजीकृत कर सकते हैं:

import Vue from 'vue'; // Note that 'vue' in this case is a Node module installed with 'npm install Vue'
Vue.component('hello-world', require('./hello-world');  // global registeration

new Vue({
    el:'body',

    // Templates can be defined as inline strings, like so:
    template:'<div class="app-container"><hello-world></hello-world></div>'
});  

या इसे मूल घटक या रूट घटक के भीतर स्थानीय रूप से पंजीकृत करें

import Vue from 'vue'; // Note that 'vue' in this case is a Node module installed with 'npm install Vue'
import HelloWorld from './hello-world.js';  

new Vue({
    el:'body',
    template:'<div class="app-container"><hello-world></hello-world></div>",

    components:{HelloWorld}  // local registeration
});  

ग्लोबल कंपोनेंट्स का उपयोग Vue एप्लिकेशन के भीतर कहीं भी किया जा सकता है।

स्थानीय घटक केवल मूल घटक में उपयोग के लिए उपलब्ध हैं जिसके साथ वे पंजीकृत हैं।

सुगंध घटक
आपको एक कंसोल त्रुटि मिल सकती है जो आपको बताती है कि आप कुछ नहीं कर सकते क्योंकि आपका एक टुकड़ा घटक है । इस तरह की समस्या को हल करने के लिए बस अपने घटक टेम्पलेट को एक <div> तरह एक टैग के अंदर लपेटें।

घटकों का स्थानीय पंजीकरण

एक घटक को विश्व स्तर पर या स्थानीय रूप से पंजीकृत किया जा सकता है (दूसरे विशिष्ट घटक के लिए बाध्य)।

var Child = Vue.extend({
    // ...
})

var Parent = Vue.extend({
    template: '...',
    components: {
         'my-component': Child
    }
})

Thiv नया घटक () केवल पैरेंट घटक के दायरे (टेम्पलेट) के अंदर उपलब्ध होगा।

इनलाइन पंजीकरण

आप एक घटक को एक चरण में बढ़ा और पंजीकृत कर सकते हैं:

Vue.component('custom-component', {
    template: '<div>A custom component!</div>'
})

इसके अलावा, जब घटक स्थानीय रूप से पंजीकृत है:

var Parent = Vue.extend({
    components: {
        'custom-component': {
            template: '<div>A custom component!</div>'
        }
    }
})

घटकों में डेटा पंजीकरण

किसी घटक को पंजीकृत करते समय data प्रॉपर्टी के लिए ऑब्जेक्ट पास करना, घटक के सभी उदाहरणों को एक ही डेटा को इंगित करने का कारण होगा। इसे हल करने के लिए, हमें किसी फ़ंक्शन से data वापस करना होगा।

var CustomComponent = Vue.extend({
    data: function () {
        return { a: 1 }
    }
})

आयोजन

घटकों में से एक अपने पूर्वजों के साथ संवाद कर सकता है / वंशज कस्टम संचार घटनाओं के माध्यम से है। सभी Vue उदाहरण भी emitters हैं और एक कस्टम इवेंट इंटरफ़ेस को लागू करते हैं जो एक घटक ट्री के भीतर संचार की सुविधा प्रदान करता है। हम निम्नलिखित का उपयोग कर सकते हैं:

• $on : इस घटक पूर्वजों या वंशजों द्वारा उत्सर्जित घटनाओं को सुनें।
• $broadcast : एक ऐसी घटना का उत्सर्जन करता है जो सभी वंशजों के लिए नीचे की ओर फैलती है।
• $dispatch : एक ऐसी घटना का उत्सर्जन करता है जो पहले घटक पर ही ट्रिगर होता है और सभी पूर्वजों के लिए ऊपर की ओर फैलता है।
• $emit : ट्रिगर स्व पर एक घटना।

उदाहरण के लिए, हम प्रपत्र के अंदर एक विशिष्ट बटन घटक को छुपाना चाहते हैं जब फ़ॉर्म सबमिट होता है। मूल तत्व पर:

var FormComponent = Vue.extend({
  // ...
  components: {
    ButtonComponent
  },
  methods: {
    onSubmit () {
        this.$broadcast('submit-form')
    }
  }
})

बाल तत्व पर:

var FormComponent = Vue.extend({
  // ...
  events: {
    'submit-form': function () {
        console.log('I should be hiding');
    }
  }
})

ध्यान रखने योग्य कुछ बातें:

• जब भी किसी घटना को एक ऐसा घटक मिलता है जो उसे सुन रहा है और ट्रिगर हो जाता है, तो यह तब तक प्रचार करना बंद कर देगा जब तक कि इस घटक में फ़ंक्शन कॉलबैक true ।
• $dispatch() हमेशा उस घटक पर पहले ट्रिगर करता है जिसने इसे उत्सर्जित किया है।
• हम ईवेंट हैंडलर के किसी भी तर्क को पास कर सकते हैं। ऐसा करना this.$broadcast('submit-form', this.formData, this.formStatus) हमें इस तर्क को 'submit-form': function (formData, formStatus) {} तरह एक्सेस करने की अनुमति देता है