技術標籤：VUEvue

1、區域性外掛

例：安裝關於時間格式的外掛 moment

安裝 npm install --save -devmoment

app.vue引入 importmomentfrom"moment"

<template>
  <div>
    <table>
      <tr>
        <th>姓名</th>
        <th>年齡</th>
        <th>性別</th>
        <th>時間</th>
      </tr>
      <tr v-for="(item,index) in arr" :key="index">
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td>{{item.sex}}</td>
        <td>{{item.date | datefilter}}</td>
      </tr>
    </table>
  </div>
</template>
<script>
import moment from "moment"
  export default {
      data(){
        return{
          arr :[
            {name:"張三",age:18,sex:"男",date:new Date()},
            {name:"李四",age:28,sex:"男",date:new Date()},
            {name:"王五",age:19,sex:"女",date:new Date()},
            {name:"趙六",age:22,sex:"男",date:new Date()}
          ]
        }
      },
      filters:{
        datefilter(val){
            return moment(val).format("YYYY/MM/DD")
        }
      }
  }
</script>
 

以上就是區域性引入外掛，這個外掛只能在當前的app.vue中使用

2、全域性外掛

1. 安裝
2. 在main.js中引入 並將引入的外掛設定給 vue.prototype

如果設定vue的全域性屬性，通常在 prototype後加$

import Vue from 'vue'
import App from './App.vue'

import moment from "moment"
Vue.prototype.$formatDate = moment

Vue.config.productionTip = false
new Vue({
  render: h => h(App),
}).$mount('#app')
 

<template>
  <div>
    <table>
      <tr>
        <th>姓名</th>
        <th>年齡</th>
        <th>性別</th>
        <th>時間</th>
      </tr>
      <tr v-for="(item,index) in arr" :key="index">
        <td>{{item.name}}</td>
        <td>{{item.age}}</td>
        <td>{{item.sex}}</td>
        <td>{{$formatDate(item.date).format("YYYY-MM-DD")}}</td>
      </tr>
    </table>
  </div>
</template>
<script>
  export default {
      data(){
        return{
          arr :[
            {name:"張三",age:18,sex:"男",date:new Date()},
            {name:"李四",age:28,sex:"男",date:new Date()},
            {name:"王五",age:19,sex:"女",date:new Date()},
            {name:"趙六",age:22,sex:"男",date:new Date()}
          ]
        }
      }
  }
</script>
 

在使用時 不需要引入