javascript - Bagaimana untuk menulis komponen vue
怪我咯
怪我咯 2017-05-19 10:18:42
0
2
502

Projek ini akan menggunakan Vue Masa projek adalah ketat dan ini adalah kali pertama saya berhubung dengan Vue, jadi saya tidak faham banyak perkara.
Di sini saya ingin bertanya bagaimana komponen harus ditulis jika alat vue-cli dan webpack tidak digunakan? Kerana kebanyakan kaedah penulisan yang saya lihat di Internet adalah kaedah penulisan satu halaman Tulis komponen sebagai fail dalam format akhiran .vue dan kemudian gabungkannya Jika ia tidak ditulis dalam format ini, bagaimanakah komponen itu harus ditulis ? Kemudian bagaimana untuk menggunakannya semula dalam setiap halaman html?

Saya melihat contoh komponen grid di laman web rasmi:

Tetapi saya tidak tahu cara menggunakannya semula dalam halaman html yang berbeza Strukturnya adalah sama, tetapi datanya berbeza

怪我咯
怪我咯

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

membalas semua(2)
大家讲道理

Jika anda tidak menggunakan vue-cli, anda boleh menulis komponen js, dan kemudian mengimport fail js ini ke dalam halaman.

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

Saya juga sedang mengkaji isu ini dua hari lalu! Menemui cara baharu yang eksklusif untuk melaksanakan komponen tanpa vue-cli dan webpack Kelebihan terbesar ialah komponen boleh digayakan!
Menggunakan teknik js untuk mengeluarkan teks berbilang baris melalui ulasan.
Komponen fail tunggal

.
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!