Vue-自定义指令

• 局部指令只有当前的实例，不能用在其他实例中。

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>