Apakah perbezaan antara contoh dan komponen dalam vuejs

Perbezaan: 1. Instance mempunyai titik el mount, tetapi komponennya tidak. 2. Dalam contoh, ia ialah "data:{}", dan dalam komponen, ia ialah "data(){return{}}". 3. Elemen html contoh vue dipaparkan secara langsung ke dalam halaman manakala elemen html komponen ditakrifkan pada templat dan kemudian dipaparkan ke dalam halaman melalui panggilan.

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Apabila saya menulis item komponen tunggal vue dan penghalaan kali terakhir, saya memikirkan masalah. Vue baharu({…}) ialah contoh Vue, jadi adakah komponen itu merupakan tika Vue?

Analisis

Seperti yang dinyatakan sebelum ini, terdapat dua kaedah pembangunan. Satu adalah berasaskan pelayar (iaitu, main.js diperkenalkan terus ke dalam skrip), dan satu lagi ialah kaedah pembangunan berasaskan baris arahan yang dibina oleh vue-cli (projek vue). projek sebenar adalah besar Sebahagian daripadanya menggunakan kaedah pembangunan baris arahan, jadi kita masih bercakap tentang komponen dalam kaedah pembangunan baris arahan.

berada dalam main.js projek

dan dalam kod App.vue ialah

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({//这里就是一个vue实例
  el: '#app',//el挂载点
  router,
  components: { App },
  template: &#39;<App/>&#39;,//此处引根组件
})

Rendering adalah seperti berikut . Yang di bawah teks ungu boleh diabaikan.

<template>
  <div id="app">
       <div class="welcome">welcome! {{name}}, you are {{age}} years old</div>
    <router-view/>
  </div>
</template>
<script>
export default {
  name: &#39;App&#39;,
  data:function(){
    return {
      name:&#39;wangyue&#39;,
      age:&#39;25&#39;
    }
  },
  }
</script>

<style>
  .welcome{
    font-size: 32px;
    color: blueviolet;
  }
</style>

Zum masuk dan bandingkan

Perbezaan antara kejadian dan komponen dalam vuejs

Data komponen ialah fungsi dan bukan komponen ialah data:{}. Komponen

tidak mempunyai pilihan titik el mount

. Menurut laman web rasmi, komponen adalah contoh Vue yang boleh diguna semula dengan nama. Dalam projek vue, secara amnya terdapat hanya satu tika VUE yang ditakrifkan dalam main.js, dan yang lain ialah tika komponen vue. Sebenarnya, semuanya adalah contoh Vue, tetapi untuk kemudahan pembezaan, saya hanya berkata demikian. Sebagai tambahan kepada komponen akar, terdapat banyak komponen kecil dalam komponen.

Iaitu:

1 Contoh vue mempunyai el untuk menentukan elemen pelekap, tetapi komponen tidak, kerana komponen itu juga dipanggil pada halaman pemaparan dan dipaparkan secara langsung dengan memanggil nama komponen;

2. Bentuk atribut data bagi kejadian dan komponen adalah berbeza

atribut data dalam contoh vue: data:{"name":"aa","age":18} ,

data dalam Atribut komponen: data(){ return{"name":"aa","age":18}},

3. Elemen html bagi contoh vue ialah dipaparkan terus ke dalam halaman, manakala elemen html komponen ialah Ia ditakrifkan pada templat dan kemudian diberikan ke halaman dengan memanggil

Cadangan berkaitan: "

tutorial vue.js

"

Atas ialah kandungan terperinci Apakah perbezaan antara contoh dan komponen dalam vuejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!