javascript – So schreiben Sie Vue-Komponenten

Question

Das Projekt wird Vue nutzen. Die Projektzeit ist knapp und ich komme zum ersten Mal mit Vue in Kontakt, daher verstehe ich viele Dinge nicht.
Hier möchte ich fragen, wie die Komponenten geschrieben werden sollen, wenn das Vue-Cli-Tool und das Webpack nicht verwendet werden. Denn die meisten Schreibmethoden, die ich im Internet sehe, sind Einzelseitenschreiben. Schreiben Sie eine Komponente als Datei im .vue-Suffixformat und kombinieren Sie sie dann. Wenn sie nicht in diesem Format geschrieben ist, wie soll die Komponente geschrieben werden? Wie kann man es dann auf jeder HTML-Seite wiederverwenden?

Ich habe ein Beispiel einer Rasterkomponente auf der offiziellen Website gesehen:

Aber ich weiß nicht, wie ich es in verschiedenen HTML-Seiten wiederverwenden soll, aber die Daten sind unterschiedlich.

Answer 1

不用vue-cli的话可以写一个js组件,然后页面引入这个js文件。

// 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

我前两天也在研究这个问题！ 发现了一个独家新方法实现组件, 不用vue-cli和webpack, 最大的好处是组件可以带样式 !
利用了一个js通过注释输出多行文本的技巧.
单文件组件