Vue自定义指令不使用模板标记

Question

我在下面的指令中遇到了问题，它可以处理除模板标签之外的任何标签

  Vue.directive('count',{
  bind(el,b,v){
    console.log(b.value);
  },
  inserted(el,b,v){
        console.log(b.value);
  },
  update(el,b,v){
        console.log(b.value);
  }
});

new Vue({
  el: "#app"  ,
  data:{
     value:0
  }
})

<div id="app">
<button @click="value+=1">
inc value
</button>
   <template v-count="value">

   </template>

 <!--  <div v-count="value">

   </div> --> 
</div>

如果div上的注释被删除，指令将记录值，但使用模板标记指令的挂钩不会被触发

这里是这个问题的jsfiddle

谢谢

Answer 1

实际上，模板标记本身并不挂载任何内容，因此它在DOM中没有位置，也不绑定。在您的例子中，一个简单的解决方案是将v-count="value“放在按钮标记上。如果对此指令有更特殊的需求，而您只是给我们提供占位符代码，那么将其放在SPAN或DIV上将比模板更有意义。