Vue.js क्या है?
Vue.js आपको HTML विशेषताओं के साथ HTML का विस्तार करने देता है जिसे निर्देश कहा जाता है
Vue.js निर्देश HTML अनुप्रयोगों को कार्यक्षमता प्रदान करता है
Vue.js अंतर्निहित निर्देश और उपयोगकर्ता परिभाषित निर्देश प्रदान करता है
Vue.js निर्देश
Vue.js {{ }}डेटा के लिए प्लेसहोल्डर के रूप में डबल ब्रेसिज़ का उपयोग करता है।
Vue.js निर्देश उपसर्ग के साथ HTML विशेषताएँ हैं v-
उदाहरण दृश्य
नीचे दिए गए उदाहरण में, नया Vue () के साथ एक नया Vue ऑब्जेक्ट बनाया गया है ।
संपत्ति el: नए Vue ऑब्जेक्ट को id="app" के साथ HTML तत्व से बांधती है ।
उदाहरण
<div id="app">
<h1>{{ message }}</h1>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Vue.js बाइंडिंग
जब कोई Vue ऑब्जेक्ट किसी HTML तत्व से बंधा होता है, तो Vue ऑब्जेक्ट के बदलने पर HTML तत्व बदल जाएगा:
उदाहरण
<div id="app">
{{ message }}
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
function
myFunction() {
myObject.message = "John Doe";
}
</script>
Vue.js टू-वे बाइंडिंग
v-modelनिर्देश HTML तत्वों के मान को एप्लिकेशन डेटा से बांधता है ।
इसे टू-वे बाइंडिंग कहा जाता है:
उदाहरण
<div id="app">
<p>{{ message }}</p>
<p><input v-model="message"></p>
</div>
<script>
var myObject = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
Vue.js लूप बाइंडिंग
v-forHTML तत्व के "सरणी" के लिए Vue ऑब्जेक्ट्स की एक सरणी को बाँधने के निर्देश का उपयोग करना :
उदाहरण
<div id="app">
<ul>
<li v-for="x in todos">
{{
x.text }}
</li>
</ul>
</div>
<script>
myObject =
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn
JavaScript' },
{ text: 'Learn
Vue.js' },
{ text: 'Build
Something Awesome' }
]
}
})
</script>