javascript - Comment écrire des composants Vue

Question

Le projet va utiliser Vue. Le temps du projet est serré et c'est la première fois que j'entre en contact avec Vue, donc je ne comprends pas beaucoup de choses.
Ici, je voudrais demander comment les composants doivent être écrits si l'outil vue-cli et le webpack ne sont pas utilisés ? Parce que la plupart des méthodes d'écriture que je vois sur Internet sont des écritures sur une seule page. Écrivez un composant sous forme de fichier au format de suffixe .vue, puis combinez-le. S'il n'est pas écrit dans ce format, comment le composant doit-il être écrit ? Alors comment le réutiliser dans chaque page html ?

J'ai vu un exemple de composant grille sur le site officiel :

Mais je ne sais pas comment le réutiliser dans différentes pages HTML. La structure est la même, mais les données sont différentes, je les traite simplement comme un modèle

.

Answer 1

Si vous n'utilisez pas vue-cli, vous pouvez écrire un composant js, puis importer ce fichier js dans la page.

// video-fitler.component.js

Vue.component('video-filter',{
  props:{
    videoLists:{
      type:Array,
      required:true
    },
    loading:{
      type:Boolean,
      default:false,
    },
    currentPage:{
      required:true,
      type:Number,
      default:1,
    },
    totalCount:{
      type:Number,
      required:true
    },
    radioName:{
      type:String,
      default:'mediaId'
    }
  },
  template:'<p v-loading="loading">'+
  '                        <p v-show="!loading" v-if="videoLists.length">'+
  '                          <table  class="table">'+
  '                            <tbody id="video-tbody">'+
  '                            <tr v-for="video in videoLists" :key="video.id">'+
  '                              <td><input type="radio" :name="radioName" :value="video.id"></td>'+
  '                              <td>{{video.name}}</td>'+
  '                            </tr>'+
  '                            </tbody>'+
  '                          </table>'+
  '                          <el-pagination'+
  '                                  layout="prev, pager, next"'+
  '                                  :current-page="currentPage"'+
  '                                  :page-size="10"'+
  '                                  :total="+totalCount"'+
  '                                  @current-change="searchVideo"'+
  '                                  class="table-center">'+
  '                          </el-pagination>'+
  '                        </p>'+
  '                        <p v-else class="text-danger mvs">未搜索到您要查找的内容！</p>'+
  '                      </p>',
  methods:{
    searchVideo:function (page) {
      this.$emit('current-change',page);
    }
  }
})

Answer 2

J'étudiais également cette question il y a deux jours ! J'ai trouvé une nouvelle façon exclusive d'implémenter des composants sans vue-cli et webpack. Le plus grand avantage est que les composants peuvent être stylisés !
Utilisation d'une technique js pour générer du texte multiligne via des commentaires.
Composant de fichier unique

.