Vue - 基础应用

Vue 常用操作

全局常量、函数

• Plugin

新建 Constants.js

export default {

  install(Vue, options) {
    Vue.prototype.G = Object.freeze({

      /**
       * ROLE OF SYSTEM USER
       */
      USER_ROLE : {
        STU: 'Students',
        TRAIN: 'Trains',
        ADMIN: 'Admins'
      }, 

	  /**
       * num of question option.
       */
      OPTION_NUM : {
        0: 'A',
        1: 'B',
        2: 'C'
      }
	})
  }
}

新建 Function.js

export default {
  install(Vue, options) {
 
     // Class Method
     Date.prototype.format = _format
 
     // F Method
     Vue.prototype.F = Object.freeze({
       clone : _clone
     })
   }
 }

function _format () {
  ...
}

function _clone () {
  ...
}

在 main.js 中引入 Constants.js、Function.js 并应用

import G from './common/Constants'
import F from './common/Function'

Vue.use(G)
Vue.use(F)

在 组件中可以直接调用

let date = new Date().format('yyyyMMdd HH:mm:ss')
let _date = this.F.clone(date)

console.log(this.G.USER_ROLE.STU)
console.log(this.G.OPTION_NUM[0])

以上常量挂在使用 Object.freeze() 是安全操作，常量内容不会被改变；
常量挂载点 G、F 可省略，此处为全局调用方便区分；

• Vue.prototype

直接使用 Vue.prototype 挂在常量，在 main.js 中挂载如下

Vue.prototype.USER_ROLE = Object.freeze({
  STU : 'Stu',
  ADMIN : 'Admin'
})

Vue.prototype.clone = function (obj) {
  ...
}

在组件中可以直接调用

let date = this.clone(new Date())

console.log(this.USER_ROLE.STU)