Vue 新手:在vue中引入外部的js文件

在vue中如果把所有的代码都写到一个页面中,有时比较难找,显得比较复杂,所以一些js代码会写在外面的js文件中,然后引入到使用的页面中。
可以在src下新建一个文件夹去存这个js文件,例如:DateToString.js,一定要写export ,需要把模块抛出,让其他组件可以获取到。

export let DateToString = function (time) {
  var year = time.getFullYear()
  var month = time.getMonth() + 1
  if (month < 10) {
    month = '0' + month
  }
  var day = time.getDate().toString()
  if (day < '10') {
    day = '0' + day
  }
  var hour = time.getHours().toString()
  if (hour < '10') {
    hour = '0' + hour
  }
  var minute = time.getMinutes().toString()
  if (minute < '10') {
    minute = '0' + minute
  }
  var second = time.getSeconds().toString()
  if (second < '10') {
    second = '0' + second
  }
  return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second
}

在其他组件使用该js文件时:
var dateToString= require(’…/…/config/DateToString.js’)
dateToString.DateToString(传一个日期);

<template>  
    <div>  
        <button @click="jsmethod">显示</button>  
    </div>  
</template>  
<script>  
var dateToString= require('../../config/DateToString.js')
    export default {  
        methods:{
          jsmethod:function(){  
              dateToString.DateToString(传一个日期);  
           }  
    }}  
</script>  

以上是方法,如果js文件是一个静态数组或属性时,可以在组件中定义一个属性或数组去接收js文件中的数组或属性
this.arrayList = dateToString.arrayJSONList 然后在template中使用arrayList 就可以显示出来。

猜你喜欢

转载自blog.csdn.net/w_e_i_1201/article/details/86178607