函数式

我们先定义一个需求：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。

我们首先将代码框架写好，先不定义v-big指令，代码如下：

		<div id="root">
			<h2>当前的n值是：<span v-text="n"></span> </h2>
			<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
			<button @click="n++">点我n+1</button>
		</div>
	</body>
	
	<script type="text/javascript">
		Vue.config.productionTip = false
		
		new Vue({
			el:'#root',
			data:{
				n:1
			},
		})
		
	</script>

此时运行的话，数字n是可以实现增加的，控制台会报错：
在这里插入图片描述
注意报错报的式big，而不是v-big。有两种情况是没有前缀的：

代码写错了，报错是不带v-的
定义指令的时候，指令名直接定义为big，用的时候v-big

我们在Vue的实例对象中添加一个配置项 – directives，在其中我们就能定义自己的指令。

接下来我们的重点在于探索big方法身上其中的两个重要参数：

<body>
    <div id="root">
        <h2>当前的n值是：<span v-text="n"></span> </h2>
        <h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
        <button @click="n++">点我n+1</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false
    
    new Vue({
        el:'#root',
        data:{
            n:1
        },
        directives:{
            big(a,b){
                console.log(a,b);
            }
        }
    })
    
</script>

在这里插入图片描述

我们发现big方法中会有两个形参，一个是指令所处的元素(也可以说是指令所绑定的元素，它可以用来直接操作 DOM )，另一个是一个对象：
在这里插入图片描述

expression是表达式
value是表达式的值
name是我们定义的名字
rawname是我们使用的时候的名字

在文档中这两个形参的名字当然不是a和b，而是element(el)和binding.此时我们可以补全我们的代码：

<body>
    <div id="root">
        <h2>当前的n值是：<span v-text="n"></span> </h2>
        <h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
        <button @click="n++">点我n+1</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false
    
    new Vue({
        el:'#root',
        data:{
            n:1
        },
        directives:{
            big(el,binding){
                el.innerText = binding.value * 10
            }
        }
    })
    
</script>

我们发现随着n的增加，第二行放大10倍的n也会增加，这是因为big函数在以下两种情况都会被调用：

指令与元素成功绑定时
指令所在的模板被重新解析时

对象式

还是通过案例来理解：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

我们的第一反应：

<body>
    <div id="root">
        <h2>当前的n值是：<span v-text="n"></span> </h2>
        <h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
        <button @click="n++">点我n+1</button>
        <hr/>
        <input type="text" v-fbind:value="n">
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false
    
    new Vue({
        el:'#root',
        data:{
            n:1
        },
        directives:{
            big(el,binding){
                el.innerText = binding.value * 10
            },
            fbind(el,binding){
                el.value = binding.value
                el.focus()
            }
        }
    })
    
</script>

不过运行之后我们发现一开始的时候input框并没有获取焦点，在将n+1之后才会获取焦点，这是为什么呢？

一开始input框并没有获取焦点是因为fbind函数会在指令与元素成功绑定的时候执行一次，但是这只是一种关系的建立(内存层面上的操作)，页面上此时并没有input(模板是经过Vue渲染了之后才会放在页面上的，并不是直接放上去)，所以说我们的focus是不管用的。

而后来在n+1之后，n发生了变化，模板会重新被解析，此时fbind函数会再次被调用。不过在这次调用的时候input框已经被放在页面上了，它是存在的。所以这个focus()才可以起作用，让input框获得焦点。

也就说为了解决这一系列的问题，我们需要：在指令与元素绑定成功，并且元素已经在页面上存在了，我们再去执行focus().

如果我们继续使用函数式，这种需求是没有办法实现的。因为它永远只有那两种时候函数会被调用。我们拿不到那个时间点(Vue把元素放到页面上的时间点)

所以接下来我们使用对象式来解决这个问题！

对象中我们可以使用三个特别的函数(其他的我们在这里不做讨论)，他们会在一些关键的时间点被调用：
在这里插入图片描述

bind()：指令与元素成功绑定的时候调用
inserted()：指令所在元素被插入页面时被调用
update()：指令所在的模板被重新解析的时候被调用

最后我们的解决代码：

<body>
    <div id="root">
        <h2>当前的n值是：<span v-text="n"></span> </h2>
        <h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
        <button @click="n++">点我n+1</button>
        <hr/>
        <input type="text" v-fbind:value="n">
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false
    
    new Vue({
        el:'#root',
        data:{
            n:1
        },
        directives:{
            big(el,binding){
                el.innerText = binding.value * 10
            },
            fbind:{
                bind(el,binding){
                    el.value = binding.value
                },
                inserted(el,binding){
                    el.focus()
                },
                update(el,binding){
                    el.value = binding.value
                }
            }
        }
    })
    
</script>