ローカルディレクティブVuejsの引数が定義されていません

Question

オンラインの例に基づいて、Vue.jsでディレクティブを配線しようとする際に問題が発生しています。ここで

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

それは、バインドまたは更新フック、 el、 bindingを使用している vnodeがすべて定義されていないかどうか、私はこれを実行するメインのVueのApp

const v = new Vue({ 
     el: '#app', 
     data: { 
      message: 'hello!' 
     }, 
     directives: { 
      demo: { 
       update: function (el, binding, vnode) { 
        console.log(el); 
        console.log(binding); 
        console.log(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(', ') 
       } 
      } 
     } 
    }) 

とディレクティブインラインのですか？私は間違って何をしていますか？

Answer 1

質問コードはVue 2で正しく機能します。OPは意図せずVue 1を使用していました。

console.clear() 
 

 
function onLifecycle(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(', ') 
 
} 
 

 
const v = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    message: 'hello!', 
 
    visible: false 
 
    }, 
 
    directives: { 
 
    demo: { 
 
     bind: onLifecycle , 
 
     update: onLifecycle 
 
    } 
 
    } 
 
})

<script src="https://unpkg.com/vue@2.4.2"></script> 
 
<div id="app"> 
 
    <div v-if="visible"> 
 
    <div id="hook-arguments-example" v-demo:foo.a.b="message"></div> 
 
    </div> 
 
    <button @click="message='world'">Update Message</button> 
 
    <button @click="visible=!visible">Toggle Visible</button> 
 
</div>