vue development skills

1.require.context()

　　reqire.context () method webpack the fact, vue-cli is based webpack, and basically vue projects are based on a webpack engineered, so that you can use this API method;

　　require.context(directory, useSubdirectories, regExp);

　　　　Parameters: directory: the need to retrieve the catalog;

　　　　　　    useSubdirectories: whether to retrieve a subdirectory;

　　　　　　    regExp: positive match files expressions;

 

　　Use scenario: we have introduced a number of folders in the same file, you can use; for example:

　　import titleCom from '@/components/home/titleCom'
　　import bannerCom from '@/components/home/bannerCom'
　　import cellCom from '@/components/home/cellCom'
　　components:{titleCom,bannerCom,cellCom}

　　这样文件多的话，是很繁琐的，可以使用：
　　const path = require('path')
　　const files = require.context('@/components/home', false, /\.vue$/)
　　const modules = {}
　　files.keys().forEach(key => {
  　　const name = path.basename(key, '.vue')
  　　modules[name] = files(key).default || files(key)
　　})
　　components:modules

2.watch

　　After the watch then we can monitor data, change data to realize we just start listening method, in fact, have a similar way also can be achieved, for example, we bind the v-model, this time to add on-change event this scenario we generally used in the form elements, but not the only click on the form element to trigger on-chang event, as long as the value of the v-model changes, it will trigger on-change  

 

　　watch general usage scenarios, such as: table need to adjust the initial incoming query interface getList (), then change the input will re-query

　　

　　Created () { 
 　　 this.getList () 
　　}, 
　　watch: { 
  　　inpVal () { 
    　　this.getList () 
  　　} 
　　} 
　　where we can actually watch the immediate use of the handler property and abbreviations: 
　　watch: { 
 　　 inpVal: { 
    　　handler: 'the getList' , 
      　　immediate: to true 
  　　} 
　　} 
　　inpVal value as long as the change is triggered handler behavior, the behavior of the corresponding name is getList; here to watch not only the immediate property, in fact, there are still deep depth listening properties