<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>演示自定义指令参数</title>
    <style type="text/css">
        div{
            width: 400px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="app" v-demo-directive:lightgrey="message">

    </div>

    <script src="../js/vue.js"></script>

    <script>
        Vue.directive('demoDirective',{
            bind:function (el,binding,vnode) {
                el.style.color = '#fff';
                el.style.backgroundColor = binding.arg;
                el.innerHTML =
                    '指令名name：' + binding.name + '<br>' +
                    '指令绑定值value：' + binding.value + '<br>' +
                    '指令绑定表达式expression：' + binding.expression + '<br>' +
                    '传入指令的参数argument：' + binding.arg + '<br>';
            }
        });

        let vm = new Vue({
            el:'#app',
            data:{
                message:'你好，欢迎加入Vue！',
            }
        });
    </script>
</body>
</html>