Data Binding Vue.js இல்: ஆழமான விளக்கம் மற்றும் கான்கிரீட் எடுத்துக்காட்டுகள்

Data Binding Vue.js இல் உள்ள ஒரு அடிப்படை அம்சமாகும், இது உங்கள் பயன்பாட்டில் உள்ள தரவுக்கும் பயனர் இடைமுகத்திற்கும் இடையே ஒரு இணைப்பை ஏற்படுத்த உதவுகிறது. இது மாதிரிக்கும் பார்வைக்கும் இடையில் தரவை மாறும் வகையில் புதுப்பிக்கவும் ஒத்திசைக்கவும் அனுமதிக்கிறது, தடையற்ற மற்றும் எதிர்வினை பயனர் அனுபவத்தை வழங்குகிறது.

Vue.js இல், பல வகைகள் உள்ளன data binding:

1. Interpolation

Interpolation {{ }} Vue.jsல், டெம்ப்ளேட்டில் இரட்டை சுருள் பிரேஸ்களுக்குள் எக்ஸ்ப்ரெஷன்களை உட்பொதிக்க அனுமதிக்கிறது .

உதாரணமாக:

<div>  
  <p>{{ message }}</p>  
</div>

மேலே உள்ள எடுத்துக்காட்டில், message கூறுகளின் தரவுப் பண்பு. மதிப்பு மாறும்போது message, ​​குறிச்சொல்லின் உள்ளே உள்ள உள்ளடக்கம் <p>  தானாகவே புதுப்பிக்கப்படும்.

2. One-Way Binding

One-Way Binding கூறுகளின் தரவுப் பண்புகளிலிருந்து பயனர் இடைமுகத்துடன் தரவை பிணைக்க உங்களை அனுமதிக்கிறது. தரவுப் பண்புகளில் ஏதேனும் மாற்றங்கள் பயனர் இடைமுகத்தில் பிரதிபலிக்கும், ஆனால் வேறு வழியில் அல்ல. உதாரணமாக:

<div>  
  <p>{{ message }}</p>  
  <button @click="updateMessage">Update</button>  
</div>

data() {  
  return {  
    message: 'Hello Vue.js'  
  };  
},  
methods: {  
  updateMessage() {  
    this.message = 'Updated message';  
  }  
}

"புதுப்பிப்பு" பொத்தானைக் கிளிக் செய்யும் போது, ​​இன் மதிப்பு message  மாறும் மற்றும் பயனர் இடைமுகத்தில் காட்டப்படும்.

3. Two-Way Binding

Two-Way Binding மாதிரிக்கும் பயனர் இடைமுகத்திற்கும் இடையில் தரவை ஒத்திசைக்க உங்களை அனுமதிக்கிறது. மாதிரி அல்லது பயனர் இடைமுகத்தில் தரவு மாறும்போது, ​​இரண்டும் தானாகவே புதுப்பிக்கப்படும்.

உதாரணமாக:

<div>  
  <input v-model="message" type="text">  
  <p>{{ message }}</p>  
</div>

data() {  
  return {  
    message: 'Hello Vue.js'  
  };  
}

மேலே உள்ள எடுத்துக்காட்டில், உள்ளீட்டில் உள்ளிடப்பட்ட மதிப்பு மாறிக்கு புதுப்பிக்கப்படும் message  , மாறாக, message  மாற்றங்கள் ஏற்பட்டால், உள்ளீட்டில் உள்ள மதிப்பும் புதுப்பிக்கப்படும்.

4. Computed Properties

கணக்கிடப்பட்ட பண்புகள் கூறுகளில் உள்ள பிற தரவு பண்புகளின் அடிப்படையில் மதிப்புகளைக் கணக்கிட உங்களை அனுமதிக்கின்றன.

உதாரணமாக:

<div>  
  <p>Full Name: {{ fullName }}</p>  
</div>

data() {  
  return {  
    firstName: 'John',  
    lastName: 'Doe'  
  };  
},  
computed: {  
  fullName() {  
    return this.firstName + ' ' + this.lastName;  
  }  
}

மேலே உள்ள எடுத்துக்காட்டில், fullName கணக்கிடப்பட்ட சொத்து firstName மற்றும் lastName. எப்போது firstName அல்லது lastName மாற்றங்கள் fullName என்பதும் புதுப்பிக்கப்படும்.

5. Watchers:

Watchers குறிப்பிட்ட தரவு சொத்து மாற்றங்களைக் கவனிக்கவும் மாற்றம் நிகழும்போது ஒத்திசைவற்ற அல்லது சிக்கலான செயல்களைச் செய்யவும் உங்களை அனுமதிக்கிறது.

உதாரணமாக:

<div>  
  <p>Count: {{ count }}</p>  
</div>

data() {  
  return {  
    count: 0  
  };  
},  
watch: {  
  count(newValue, oldValue) {  
    // Perform action when count changes  
    console.log('Count changed:', newValue, oldValue);  
  }  
}

மேலே உள்ள எடுத்துக்காட்டில், மதிப்பு மாறும்போது count, ​​கண்காணிப்பாளர் தூண்டப்பட்டு அதற்கான செயலைச் செய்வார்.

Data Binding இந்த நுட்பங்களைப் பயன்படுத்துவதன் மூலம், நீங்கள் Vue.js இன் நெகிழ்வுத்தன்மையைப் பயன்படுத்தி, மாடல் மற்றும் பயனர் இடைமுகத்திற்கு இடையேயான தரவை நேரடியான மற்றும் திறமையான முறையில் எளிதாக நிர்வகிக்கவும் ஒத்திசைக்கவும் முடியும் .

இந்த நுட்பங்களைப் பயன்படுத்துவதன் மூலம் data binding, உங்கள் Vue.js பயன்பாடுகளில் மாறும் மற்றும் ஊடாடும் பயனர் இடைமுகங்களை உருவாக்கலாம். Vue.js ஒரு சக்திவாய்ந்த மற்றும் நெகிழ்வான data binding அமைப்பை வழங்குகிறது, இது தரவை நிர்வகித்தல் மற்றும் புதுப்பிக்கும் செயல்முறையை எளிதாக்குகிறது. இந்த அணுகுமுறைகள் ஒவ்வொன்றையும் ஆராய்ந்து data binding அவற்றை உங்கள் Vue.js திட்டங்களில் எவ்வாறு செயல்படுத்தலாம் என்பதைப் பார்ப்போம்.