初识vue.js，我的学习之路（三）

  vue之自定义指令

    像v-if、v-show、等这些都是系统指令，比如说我想写一个v-color的指令，但是系统是没有这个指令的，如果我们直接这样写肯定会报错，所以我们下面就需要自定义指令。

<div id="app">

    <h1 v-color="pink">11111111111111</h1>

</div>

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

    Vue.directive("color",function(el,binding){
        /*console.log(el);
        console.log(binding); */

        el.style[binding.name] = binding.expression;

    });
    new Vue({
        el:"#app",
        data:{
            pink:""
        }

    })
</script>
</body>

上面这种Vue.directive是全局的写法，里面有两个参数第一个是指令名称，第二个是一个方法，方法里面也有两个参数第一个参数el就是Dom节点，第二个是这个对象里面有个name属性，name对应color就是这个color。
这是一个全局的写法。
    下面这种是局部的写法（注意的是directive要加s）：

<div id="app">

    <h1 v-color>11111111111111</h1>
    <h2 v-date>456</h2>

</div>

<script src="vue.js"></script>
<script>
    new Vue({
        el:"#app",
        directives:{
            "color":function(el,binding){
                el.style.color = "red"
            },
            "date":function(el,binding){

                el.innerHTML = "123"
            }
        }
    })