javascript - How to write vue components
怪我咯
怪我咯 2017-05-19 10:18:42
0
2
529

The project is going to use Vue. The project time is tight and it is my first time to come into contact with Vue, so I don’t understand many things.
Here I would like to ask how the components should be written if the vue-cli tool and webpack are not used? Because most of the writing methods I see on the Internet are single-page writing methods. Write a component as a file in the .vue suffix format and then combine it. If it is not written in this format, how should the component be written? Then how to reuse it in every html page?

I saw an example of a grid component on the official website:

But I don’t know how to reuse it in different html pages. The structure is the same, but the data is different. I just treat it as a template

怪我咯
怪我咯

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

reply all(2)
大家讲道理

If you don’t use vue-cli, you can write a js component, and then import this js file into the 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);
    }
  }
})
刘奇

I was also studying this issue two days ago! Found an exclusive new way to implement components without vue-cli and webpack. The biggest advantage is that components can be styled!
Using a js technique of outputting multi-line text through comments.
Single file component

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!