vuecli自定义指令,vue自定义指令两种方式

　　本文主要介绍vue中自定义指令的相关资料，帮助你更好的理解和学习Vue框架。感兴趣的朋友可以了解一下。

　　除了默认的核心指令(v-model和v-show)，Vue还允许注册自定义指令。在Vue中，代码复用的主要形式和抽象是组件。但是，在某些情况下，仍然需要对纯DOM元素执行底层操作，然后将使用自定义指令。本文将详细介绍Vue自定义指令。

　　指令注册

　　以一个自动获得焦点的input元素为例。当页面加载时，使用自动聚焦可以使元素获得焦点。但autofocus在手机版的Safari上无法使用。现在注册一条指令，使元素自动获得焦点。

　　指令注册类似于组件注册，包括全局指令和局部指令。

　　[全球指令]

　　使用Vue.diretive()全局注册指令。

　　//在将绑定元素插入DOM时，注册一个全局自定义指令v-focusvue.directive (focus )，{//即可。

　　已插入：函数(el) {//焦点元素el.focus()

　　}

　　})

　　[本地说明]

　　您还可以注册选项以接受本地指令、组件或Vue构造函数中的指令。

　　var vm=new Vue({

　　el: #example ，

　　指令：{

　　焦点：{

　　插入：函数(el) {

　　焦点()

　　}

　　}

　　}

　　})

　　然后，您可以在模板中的任何元素上使用新的v-focus属性。

　　p id=示例

　　输入垂直焦点/p

　　Script//注册一个全局自定义指令v-focusvue.directive (focus )，{//当绑定元素插入DOM时。已插入：函数(el) {//焦点元素el.focus()

　　}

　　})var vm=new Vue({

　　el: #example ，

　　})/脚本

　　钩子函数

　　definition函数提供了几个钩子函数(可选)。

　　【绑定】

　　只调用一次，指令在第一次绑定到元素时被调用。这个钩子函数可以用来定义一个在绑定过程中执行一次的初始化动作。

　　【已插入】

　　当绑定元素插入父节点时调用(当父节点存在时可以调用，但它不一定存在于文档中)

　　【更新】

　　当组件的VNode更新时调用，但它可能发生在其子组件的VNode更新之前。指令的值可能已更改，也可能未更改。但是，通过比较更新前后的值，可以忽略不必要的模板更新。

　　【组件更新】

　　当组件的VNode及其子组件的VNode都更新时调用

　　【解除绑定】

　　当指令与元素解除绑定时，只调用一次。

　　钩子函数参数

　　钩子函数被赋予以下参数

　　【el】

　　由指令绑定的元素可用于直接操作DOM。

　　【装订】

　　包含以下属性的对象：

　　名称：指令名，不包括v前缀。

　　Value:指令的绑定值，例如：v-my-directive= 1 1 ，value的值为2。

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

　　表达式：绑定值的字符串形式。比如v-my-directive=1 1 ，expression的值是 1 1 。

　　Arg:传递给指令的参数。比如v-my-directive:foo，arg的值就是‘foo’。

　　修改器：包含修改器的对象。例如：v-my-directive.foo.bar，modifier对象modifiers的值为{foo: true，bar: true}。

　　【虚拟节点】

　　Vue编译生成的虚拟节点。

　　【旧节点】

　　最后一个虚拟节点，仅在update和componentUpdated挂钩中可用。

　　【注意】除了el，其他参数都是只读的，尽量不要修改。如果需要在钩子之间共享数据，建议通过元素的数据集来实现。

　　下面是一个使用这些参数的自定义挂钩的示例。

　　p id= example v-demo:foo . a . b= message /p

　　scriptVue.directive(demo ，{

　　bind: function (el，binding，vnode) { var s=JSON.stringify

　　el.innerHTML=

　　名称： s(binding.name) br

　　值： s(binding.value) br

　　表达式： s(binding.expression) br

　　参数：“s(binding . arg)”br”

　　修饰符： s(binding.modifiers) br

　　vnode keys: Object.keys(vnode)。联接(，)

　　}

　　})新Vue({

　　el: #example ，

　　数据：{

　　信息：“你好！”

　　}

　　})/脚本

　　[功能缩写]

　　在大多数情况下，您可能希望在绑定和更新挂钩上重复操作，并且不希望关心其他挂钩函数。可以这样写：

　　Vue.directive(颜色样本，函数(el，binding) {

　　El . style . background color=binding . value

　　})

　　[物体的文字数量]

　　如果指令需要多个值，可以传入一个JS对象文本。指令函数可以接受所有有效的JS表达式。

　　p v-demo={ color: white ，text:你好！}/p

　　Vue.directive(demo ，function (el，binding) {

　　console . log(binding . value . color)//= white

　　console . log(binding . value . text)//= hello！

　　})

　　以上是详细讲解vue中自定义指令的细节。更多关于Vue自定义说明的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。