Vue.js ट्यूटोरियल
Vue.js के साथ आरंभ करना

टिप्पणियों

संस्करण

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

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 द्वारा बनाए गए "हैलो वर्ल्ड" उदाहरण को भी देखना चाहेंगे ।

हैलो वर्ल्ड इन वीयू 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 जैसी संरचनाएँ उसी फ़ाइल में लिख सकते हैं जैसे आप जावास्क्रिप्ट कोड लिखते हैं।

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

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

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 डायरेक्टिव का उपयोग करना।

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