javascript - Comment écrire des composants Vue
怪我咯
怪我咯 2017-05-19 10:18:42
0
2
535

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

.
怪我咯
怪我咯

走同样的路,发现不同的人生

répondre à tous(2)
大家讲道理

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);
    }
  }
})
刘奇

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

.
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!