自定义指令，生产环境部署

钩子函数

一个指令定义对象可以提供如下几个钩子函数

• bind ： 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
• inserted : 被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）
• update : 所在组建的VNode更新调用，但是可能发生在其子VNode更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
• componentUpdated : 指令所在组件的VNode及其子VNode全部更新后通用
• unbind : 只调用一次，指令与元素解绑时调用

钩子函数参数

钩子函数的参数（即el,binding,vnode和oldVnode）

指令钩子函数会被传入以下参数

• el : 指令所绑定的元素，可以用来直接操作DOM

• binding : 一个对象，包含以下属性

• name : 指令名，不包括 v- 前缀

• value ： 指令的绑定值，例如 : v-my-directive="1+1" 中，绑定值为2

• oldValue : 指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用

• expression : 字符串形式的指令表达式。例如 v-my-directive="1+1" 中，表达式为"1+1"

• arg : 传给指令的参数，可选。例如v-my-directive:foo中，参数为"foo"

• modifiers : 一个包含修饰符的对象。例如：v-my-directive.foo.bar中，修饰符对象为

• vnode :Vue编译生成的虚拟节点。

• oldVnode ： 上一个虚拟节点，仅在update和componentUpdated钩子中可用

注意

• 除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

举个例子

<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>


Vue.directive('demo', {
  bind: function (el, binding, vnode) {
    var s = JSON.stringify
    el.innerHTML =
      'name: '       + s(binding.name) + '<br>' +
      'value: '      + s(binding.value) + '<br>' +
      'expression: ' + s(binding.expression) + '<br>' +
      'argument: '   + s(binding.arg) + '<br>' +
      'modifiers: '  + s(binding.modifiers) + '<br>' +
      'vnode keys: ' + Object.keys(vnode).join(', ')
  }
})

new Vue({
  el: '#hook-arguments-example',
  data: {
    message: 'hello!'
  }
})

生产环境部署

使用构建工具

webpack

var webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ]
}

Browserify

/ 使用 envify 的自定义模块来定制环境变量
var envify = require('envify/custom')

browserify(browserifyOptions)
  .transform(vueify)
  .transform(
    // 必填项，以处理 node_modules 里的文件
    { global: true },
    envify({ NODE_ENV: 'production' })
  )
  .bundle()

Rollup

const replace = require('rollup-plugin-replace')
rollup({
  // ...
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify( 'production' )
    })
  ]
}).then(...)