Vue.jsVue.js के साथ आरंभ करना


टिप्पणियों

Vue.js JavaScript लिए तेजी से बढ़ने वाला फ्रंट-एंड फ्रेमवर्क है, जो Angular.js , Reactive.js और Rivets.js से प्रेरित है, जो सरल उपयोगकर्ता-इंटरफ़ेस डिज़ाइन, हेरफेर और गहरी प्रतिक्रिया प्रदान करता है।

इसे MVVM पैटर्न वाले ढांचे, Model-View View-Model रूप में वर्णित किया गया है, जो घटकों और विचारों के लिए दो-तरफ़ा बाध्यकारी डेटा की अवधारणा पर आधारित है। यह अविश्वसनीय रूप से तेज है, अन्य शीर्ष स्तरीय JS फ्रेमवर्क की गति से अधिक है, और आसान एकीकरण और प्रोटोटाइप के लिए बहुत उपयोगकर्ता के अनुकूल है।

संस्करण

संस्करण रिलीज़ की तारीख
2.4.1 2017/07/13
2.3.4 2017/06/08
2.3.3 2017/05/09
2.2.6 2017/03/26
2.0.0 2016/10/02
1.0.26 2016/06/28
1.0.0 2015/10/26
0.12.0 2015/06/12
0.11.0 2014-11-06

"नमस्ते दुनिया!" कार्यक्रम

Vue.js का उपयोग शुरू करने के लिए, सुनिश्चित करें कि आपके पास अपने HTML में स्क्रिप्ट फ़ाइल शामिल है। उदाहरण के लिए, अपने HTML में निम्न जोड़ें।

<script src="https://npmcdn.com/vue/dist/vue.js"></script>
 

सरल उदाहरण

HTML टेम्पलेट

<div id="app">
  {{ message }}
</div>
 

जावास्क्रिप्ट

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
 

इस उदाहरण का एक लाइव डेमो देखें।


आप Vue.js द्वारा बनाए गए "हैलो वर्ल्ड" उदाहरण को भी देखना चाहेंगे

उपयोगकर्ता इनपुट को संभालना

VueJS का उपयोग उपयोगकर्ता इनपुट को आसानी से संभालने के लिए किया जा सकता है, और वी-मॉडल का उपयोग करके दो तरह से बाध्यकारी करने से डेटा को आसानी से बदलना आसान हो जाता है।

HTML:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
    {{message}}
<input v-model="message"> 
</div>
 

जेएस:

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})
 

VueJS में दो-तरफ़ा बाइंडिंग करना बहुत आसान है, v-model डायरेक्टिव का उपयोग करना।

यहां एक जीवंत उदाहरण देखें

हैलो वर्ल्ड इन वीयू 2 (जेएसएक्स रास्ता)

JSX का अर्थ ब्राउज़र द्वारा व्याख्या किया जाना नहीं है। इसे पहले मानक जावास्क्रिप्ट में बदलना चाहिए। JSX का उपयोग करने के लिए आपको babel-plugin-transform-vue-JSX लिए प्लगइन इंस्टॉल करना होगा

नीचे कमांड चलाएँ:

npm install babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props --save-dev
 

और इसे अपने .babelrc इस तरह जोड़ें:

{
  "presets": ["es2015"],
  "plugins": ["transform-vue-jsx"]
}
 

VUE JSX के साथ नमूना कोड:

import Vue from 'vue'  
import App from './App.vue'

new Vue({  
  el: '#app',
  methods: {
    handleClick () {
      alert('Hello!')
    }
  },
  render (h) {
    return (
      <div>
        <h1 on-click={this.handleClick}>Hello from JSX</h1>
        <p> Hello World </p>
      </div>
    )
  }
})
 

JSX का उपयोग करके आप संक्षिप्त HTML / XML जैसी संरचनाएँ उसी फ़ाइल में लिख सकते हैं जैसे आप जावास्क्रिप्ट कोड लिखते हैं।

बधाई हो, तुम हो गए :)