মান 'রফতানি ডিফল্ট' বনাম 'নতুন ভিউ'

136

আমি সবেমাত্র ভ্যুকে ইনস্টল করেছি এবং ভ্যু-ক্লিপ ওয়েবপ্যাক টেম্পলেট ব্যবহার করে একটি প্রকল্প তৈরি করতে কয়েকটি টিউটোরিয়াল অনুসরণ করেছি। যখন এটি উপাদানটি তৈরি করে, আমি লক্ষ্য করি এটি নীচের ভিতরে থাকা আমাদের ডেটা আবদ্ধ করে:

export default {
    name: 'app',
    data: []
}

অন্য টিউটোরিয়ালে আমি দেখতে পাচ্ছি যে ডেটা এ থেকে আবদ্ধ হচ্ছে:

new Vue({
    el: '#app',
    data: []
)}

পার্থক্য কী এবং কেন মনে হচ্ছে দুজনের মধ্যে সিনট্যাক্স আলাদা? আমি ভিউ-ক্লিমে তৈরি অ্যাপ.ভ্যু থেকে যে ট্যাগটি ব্যবহার করছি তা ট্যাগের ভিতরে থেকে কাজ করতে 'নতুন ভ্যু' কোডটি পেতে আমার সমস্যা হচ্ছে।

vue.js vue-component vue-cli

— rockzombie2
সূত্র

ভিসকোডের জন্য শুকরিয়া ধন্যবাদ!

— পেটে

160

আপনি যখন ঘোষণা করবেন:

new Vue({
    el: '#app',
    data () {
      return {}
    }
)}

এটি সাধারণত আপনার রুট ভ্যু উদাহরণ যা বাকি অ্যাপ্লিকেশনটি থেকে আসে। এটি এইচটিএমএল ডকুমেন্টে ঘোষিত মূল উপাদানটি বন্ধ করে দেয়, উদাহরণস্বরূপ:

<html>
  ...
  <body>
    <div id="app"></div>
  </body>
</html>

অন্য বাক্য গঠনটি এমন একটি উপাদান ঘোষণা করছে যা নিবন্ধীকৃত এবং পরে পুনরায় ব্যবহার করা যেতে পারে। উদাহরণস্বরূপ, আপনি যদি একটি একক ফাইল উপাদান তৈরি করেন তবে:

// my-component.js
export default {
    name: 'my-component',
    data () {
      return {}
    }
}

আপনি পরে এটি আমদানি করতে এবং এটির মতো ব্যবহার করতে পারেন:

// another-component.js
<template>
  <my-component></my-component>
</template>
<script>
  import myComponent from 'my-component'
  export default {
    components: {
      myComponent
    }
    data () {
      return {}
    }
    ...
  }
</script>

এছাড়াও, আপনার dataসম্পত্তিগুলিকে ফাংশন হিসাবে ঘোষণা করতে ভুলবেন না , অন্যথায় তারা প্রতিক্রিয়াশীল হবে না।

4

ঠিক আছে, সুতরাং যখনই আপনি "মাই অ্যাপ.ভ্যু" উপাদান ফাইলটিতে কাজ করছেন, আপনি "রফতানি ডিফল্ট {synt" বাক্য গঠনটি ব্যবহার করবেন, তবে অন্যথায় যদি আপনি কেবল একটি সরল এইচটিএমএল ফাইলটিতে ভ্যু ব্যবহার করছেন তবে আপনি "নতুন ভ্যু ({})" ব্যবহার করবেন, সঠিক?

— Rockzombie2

4

সাধারণত বলছি, হ্যাঁ আপনি HTML ডক্টর নিজেই বা কোনও বাহ্যিক ফাইলের মূল উদাহরণটি তৈরি করুন - যেমন main.js- আসলেই কিছু আসে যায় না, কেবলমাত্র এটি জেনে রাখুন যে এটি অ্যাপ্লিকেশনটির প্রারম্ভিক বিন্দু, int main()সি-ইন-ইন Component.vueফাইলের মতো সর্বদা export default { ... }বাক্য গঠন ব্যবহার করবে । দস্তাবেজগুলি উপাদান, গ্লোবাল , স্থানীয় এবং একক ফাইলের

আমি প্রথম নতুন ভ্যু অনুসরণ করছি ({এল: '# অ্যাপ', ডেটা () {রিটার্ন {msg: 'এ'}})} তখন আমি যখন {{ব্যবহার করার চেষ্টা করি try}} সম্পত্তি বা পদ্ধতি "msg" হয় না উদাহরণে সংজ্ঞায়িত হলেও রেফারেন্স কেন? @ ব্যবহারকারী320487

— ব্যবহারকারী 123456

8

export default ভ্যু উপাদানটির জন্য স্থানীয় নিবন্ধকরণ তৈরি করতে ব্যবহৃত হয়।

এখানে একটি দুর্দান্ত নিবন্ধ যা উপাদানগুলি সম্পর্কে আরও ব্যাখ্যা করে https://frontendsociversity.com/why-you-shouldnt-use-vue-comp घटक- ff019fbcac2e

— atrichkov
সূত্র

5

প্রথম কেস ( export default {...}) হ'ল ES2015 সিনট্যাক্স ব্যবহারের জন্য কিছু অবজেক্টের সংজ্ঞা উপলব্ধ করার জন্য।

দ্বিতীয় কেস ( new Vue (...)) হ'ল সংজ্ঞায়িত কোন বস্তুর তাত্ক্ষণিক মানক সিনট্যাক্স।

প্রথমটি জেএসে ভ্যু বুটস্ট্র্যাপ করতে ব্যবহৃত হবে, অন্যথায় উপাদান এবং টেম্পলেট তৈরি করতে ব্যবহার করা যেতে পারে।

আরও তথ্যের জন্য https://vuejs.org/v2/guide/comp اجتماع- নিবন্ধকরণ html দেখুন ।

— Shellum
সূত্র

3

আপনি যখনই ব্যবহার করবেন

export someobject

এবং someobject হয়

{
 "prop1":"Property1",
 "prop2":"Property2",
}

আপনি উপরের যে কোন জায়গায় আমদানি ব্যবহার করতে পারেন importবা module.jsএবং আপনার someobject সেখানে ব্যবহার করতে পারেন। এটি কোনও বিধিনিষেধ নয় যে কোনওরকম সাবজেক্ট কেবল একটি বস্তু হবে এটি কেবল কোনও ফাংশন, শ্রেণি বা কোনও বস্তু হতে পারে।

যখন তুমি বললে

new Object()

যেমনটা তুমি বলেছিলে

new Vue({
  el: '#app',
  data: []
)}

এখানে আপনি ক্লাস ভ্যু এর একটি বিষয় শুরু করছেন।

আমি আশা করি আমার উত্তরটি আপনার প্রশ্নের সাথে সাধারণভাবে এবং আরও স্পষ্টভাবে ব্যাখ্যা করেছে।

— ডিএইচআরইউ গুপ্তা
সূত্র

-7

<template>
  <my-components></my-components>
</template>
<script>
  import myComponents from 'my-components'
  export default {
    components: {
      myComponents
    }
    data () {
      return {}
    }
    created(){},
    methods(){}
  }
</script>

— A.Batgem
সূত্র

20

স্ট্যাক ওভারফ্লোতে স্বাগতম! যদি আপনি কোডটিতে কিছুটা ব্যাখ্যা যোগ করতে পারেন তবে আপনার উত্তর সম্ভবত অন্যান্য ব্যবহারকারীর পক্ষে অনেক বেশি সহায়ক হতে পারে।

— ই