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

<h3 id="钩子函数">钩子函数
<h4 id="一个指令定义对象可以提供如下几个钩子函数">一个指令定义对象可以提供如下几个钩子函数

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

• 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中，修饰符对象为{ foo:true,bar:true }

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

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

注意

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

举个例子

Vue.directive('demo',{

bind: function (el,vnode) {

var s = JSON.stringify

el.innerHTML =

'name: '       + s(binding.name) + '
' +

'value: '      + s(binding.value) + '
' +

'expression: ' + s(binding.expression) + '
' +

'argument: '   + s(binding.arg) + '
' +

'modifiers: '  + s(binding.modifiers) + '
' +

'vnode keys: ' + Object.keys(vnode).join(',')

}

})
new Vue({

el: '#hook-arguments-example',data: {

message: 'hello!'

}

})

<h1 id="生产环境部署">生产环境部署

var webpack = require('webpack')
module.exports = {

// ...

plugins: [

// ...

new webpack.DefinePlugin({

'process.env': {

NODE_ENV: '"production"'

}

}),new webpack.optimize.UglifyJsPlugin({

compress: {

warnings: false

}

})

]

}

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

.transform(vueify)

.transform(

// 必填项，以处理 node_modules 里的文件

{ global: true },envify({ NODE_ENV: 'production' })

)

.bundle()

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!