Vue 'varsayılan dışa aktarma' ve 'yeni Vue'

137

Vue'yu yeni kurdum ve vue-cli web paketi şablonunu kullanarak bir proje oluşturmak için bazı öğreticileri takip ediyorum. Bileşeni oluşturduğunda, verilerimizi aşağıdakilerin içine bağladığını fark ettim:

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

Oysa diğer eğitimlerde verinin şunlardan bağlandığını görüyorum:

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

Fark nedir ve neden ikisi arasındaki sözdizimi farklı gibi görünüyor? Vue-cli tarafından oluşturulan App.vue'dan kullandığım etiketin içinden 'yeni Vue' kodunu çalıştırırken sorun yaşıyorum.

vue.js vue-component vue-cli

— rockzombie2
kaynak

vscode için çok şükür!

— petey

162

Beyan ettiğinizde:

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

Bu, tipik olarak uygulamanın geri kalanının geldiği kök Vue örneğinizdir. Bu, bir html belgesinde bildirilen kök öğeyi kapatır, örneğin:

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

Diğer sözdizimi, daha sonra kaydedilebilen ve yeniden kullanılabilen bir bileşeni bildirmektir. Örneğin, aşağıdaki gibi tek bir dosya bileşeni oluşturursanız:

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

Bunu daha sonra içe aktarabilir ve şu şekilde kullanabilirsiniz:

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

Ayrıca, datamülklerinizi işlev olarak bildirdiğinizden emin olun , aksi takdirde reaktif olmayacaklar.

4

Pekala, bir "MyApp.vue" bileşen dosyasında her çalıştığınızda, "varsayılan dışa aktar {}" sözdizimini kullanacaksınız, ancak aksi takdirde yalnızca Vue'yu düz bir HTML dosyasında kullanıyorsanız, "yeni Vue ({})" kullanıyor, doğru mu?

— rockzombie2

4

Genel olarak evet. Yani - HTML doc kendisi veya harici dosyada kök örneği oluşturun olsun main.js- gerçekten önemli, sadece benzer uygulamanın başlangıç noktası olduğunu bilmez int main()C de Component.vueher zaman kullanacağı dosya export default { ... }sözdizimi. Dokümanlar, bileşenler, global , yerel ve tek dosya

İlk yeni Vue'yu takip ediyorum ({el: '#app', data () {return {msg: 'A'}})} Sonra {{msg}} Özelliğini veya "msg" yöntemini kullanmaya çalıştığımda örnekte tanımlanmış ancak neden referans gösterilmiş? @ user320487

— user123456

8

export default Vue bileşeni için yerel kayıt oluşturmak için kullanılır.

İşte bileşenler hakkında daha fazla bilgi veren harika bir makale https://frontendsociety.com/why-you-shouldnt-use-vue-component-ff019fbcac2e

— atrichkov
kaynak

5

İlk durum ( export default {...}) , bazı nesne tanımlarının kullanıma hazır hale getirilmesi için ES2015 sözdizimidir.

İkinci durum ( new Vue (...)), tanımlanmış bir nesneyi örneklemek için standart sözdizimidir.

İlki JS'de Vue'yu önyüklemek için kullanılırken, her ikisi de bileşenler ve şablonlar oluşturmak için kullanılabilir.

Daha fazla ayrıntı için https://vuejs.org/v2/guide/components-registration.html adresine bakın.

— Shellum
kaynak

3

Ne zaman kullanırsan

export someobject

ve bir nesne

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

yukarıdakileri importveya kullanarak herhangi bir yere içe aktarabilirsiniz module.jsve orada bir nesneyi kullanabilirsiniz. Bu, bir nesnenin bir nesne olacağına dair bir kısıtlama değildir, ancak bir işlev, bir sınıf veya bir nesne de olabilir.

Dediğinde

new Object()

dediğin gibi

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

Burada, Vue sınıfının bir nesnesini başlatıyorsunuz.

Umarım cevabım, sorgunuzu genel olarak ve daha açık bir şekilde açıklar.

— DHRUV GUPTA
kaynak