- 局部指令只有当前的实例，不能用在其他实例中。
1、注册全局指令
这里的注册可以通过使用Vue.directive(id,definition)来注册一个全局指令。
<div id="box"><input type="text" v-focus>
</div>
<script>Vue.directive('focus', {inserted: function (el) {el.focus();}});var vm = new Vue({el : '#box',});
</script>2、注册局部指令
这里是放到directives中的。例如这里的setBorder的函数。
<div id="example">边框宽度：<input type="text" v-model="border"><p><img width="200" src="line.jpg" v-set-border="border"></p>
</div>
<script type="text/javascript">
var vm = new Vue({el:'#example',data: {border: ''},directives: {setBorder: {update: function (el,binding) {el.border = binding.value;//设置元素边框}}}
})
</script>3、钩子函数
这里的el是指令所绑定的元素可以直接操作DOM，后面的binding是一个传入的值的对象，可以用value得到v-demo时绑定的元素的值
<div id="example"><label>选择文字大小：</label><select v-model="size"><option value="20px">20px</option><option value="30px">30px</option><option value="40px">40px</option><option value="50px">50px</option><option value="60px">60px</option></select><p v-font-size="size">天生我材必有用</p>
</div>
<script type="text/javascript">
var vm = new Vue({el:'#example',data: {size: '20px'},directives: {fontSize: function (el,binding) {el.style.fontSize = binding.value;//设置字体大小}}
})
</script>4、在这里要说明的是，自定义指令的绑定的值不仅仅是data中的属性，也可以是其他的Javascript表达式，数值常量、字符串常量、对象字面量。
我这里就局了数组的引用方式，其他的都只要value就可以：
<div id="example"><p v-font-size="{size:54}">天生我材必有用</p>
</div>
<script type="text/javascript">
var vm = new Vue({el:'#example',data: {size: '20px'},directives: {fontSize: function (el,binding) {el.style.fontSize = binding.value.size;//设置字体大小}}
})
</script>上机大作业（移动的图片）：
<div id="box"><img src="banner.jpg" v-move>
</div>
<script type="text/javascript">
var vm = new Vue({el:'#box',directives: {move: function (el) {//按下鼠标el.onmousedown = function(e) {var initX = el.offsetLeft;var initY = el.offsetTop;var offsetX = e.clientX - initX;var offsetY = e.clientY - initY;//移动鼠标document.onmousemove = function(e) {var x = e.clientX - offsetX;var y = e.clientY - offsetY;var maxX = document.documentElement.clientWidth - el.offsetWidth;var maxY = document.documentElement.clientHeight - el.offsetHeight;if(x <= 0) x = 0;if(y <= 0) y = 0;if(x >= maxX) x = maxX;if(y >= maxY) y = maxY;el.style.left = x + "px";el.style.top = y + "px";return false;}}//松开鼠标document.onmouseup = function() {document.onmousemove = null;}}}
})
</script>
